5 Replies Latest reply on Mar 18, 2010 12:57 PM by LouisaBoyles

    IE problems

    LouisaBoyles

      Hi there,

       

      I am having problems with my top navigation bar in IE 7 & under (8 seems to be fine), where the last link "press" has dropped to the next line under "home".

       

      And in IE 6 & under my sidebar nav has moved over to the right.

       

      I am new to this so I have been trying to work out what bugs have been causing this so I can apply Conditional comments.

       

      Could the side bar nav issue be the double float margin bug? I am still trying to work out what bug relates to the top nav.

       

      Does anyone know?

       

       

      http://www.denotestationery.com/denote_localroot1/denotehome.html

       

       

      Thanks in advance

        • 1. Re: IE problems
          LouisaBoyles Level 1

          Update: I have applied display:inline; to my sidebar div, which seems to have solved the extra margin problem. Still not sure what to do about the topnav though

          • 2. Re: IE problems
            polar_bare Level 4

            UPDATED:

             

            Try this in your CSS, you need to expand the div to 675px;

            #topnavcontainer {
            BACKGROUND-IMAGE: url(navlines.png);

            MARGIN-TOP: 35px;

            WIDTH:675px;

            DISPLAY: inline;

            BACKGROUND-REPEAT: repeat-x;

            FLOAT: right;

            HEIGHT: 34px;

            MARGIN-RIGHT: 30px
            }

             

            Jim

             

            Your width of your #topnavcontainer is too narrow also. If you increase the size to 675px, it displays correctly if  you put  your float back in.

            1 person found this helpful
            • 3. Re: IE problems
              osgood_ Level 8

              LouisaBoyles wrote:

               

              Hi there,

               

              I am having problems with my top navigation bar in IE 7 & under (8 seems to be fine), where the last link "press" has dropped to the next line under "home".

               


               

              Add margin: 0; to your .topnav ul just before margin-top: 9px; (as shown below). Incidentally you dont require font-family: none; and text-decoration: none; should be set on the 'a' (anchor) tag.

               

              .topnav ul {
                  font-size: 12px;
                  color: #333333;
                  list-style-type: none;
                  text-decoration: none;
                  font-family: none;
                  margin: 0;
                  margin-top:9px;
                  padding-left: 16px;
                  padding-right: 16px;
              }

              • 4. Re: IE problems
                polar_bare Level 4

                Yes, Os, that worked good job.

                 

                Jim

                • 5. Re: IE problems
                  LouisaBoyles Level 1

                  Thanks very much OS & Jim for your help.

                   

                  I used OS tactic and it worked!

                   

                  May I ask.... Was this a a problem with my CSS rather than IE bugs, or both? I would like to know what the problem was & why I added margin: 0 to the CSS & what that does so I am able to prevent future mishaps.

                  Forgive me if I should know!