Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 12 of 12
  1. #1
    New Coder
    Join Date
    Mar 2008
    Posts
    23
    Thanks
    6
    Thanked 0 Times in 0 Posts

    Internet Explorer Need IE 6 bug fix - right menu DIV drops

    Code People!

    My page works ok with FireFox in both PC and Mac, but on IE 6 Windows the menu on the right drops down out of place. (On Mac IE 5 I'm getting an entirely different problem - the container DIV in not centering, but my 1st priority is to solve the IE 6 on Windows)

    Please take a peek with FireFox(works) and IE (doesn't work) at:

    http://circledigital.com/AngelinaRef/AngelinaRef.html

    I understand that IE6 has mucho bugs, but I haven't yet found those little buggers that are doing this. Any help would be much appreciated.

    Here is the CSS, followed by my HTML:

    Code:
    body {
    background-color: #529cc4;
    background-image: url(../images/BkGrndImg.jpg);
    background-repeat: repeat-x;
    margin: 0 auto;
    text-align: center;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    	font-size: 12px;
    	color: #666666; }
    
    
    #container {
    width: 765px;
    margin: 0 auto;
    background-color: #ffffff;
    overflow:hidden;
     }
    
    #header {
    width: 765px;
    height: 170px;
    background-image: url(../images/Banner.jpg);
    margin: 0 auto;
     }
    
    #navcontainer {
    margin-left: 559px;
    width: 206px;
    height: 300px; }
    
    #navcontainer ul
    {
    margin-left: 0;
    padding-left: 0;
    list-style-type: none;
    margin: 0 auto;
    }
    
         a.BtnHome {
              display: block;
              width: 206px;
               height: 33px;
              background: url(../images/Btn_Home.jpg) no-repeat 0em 0em;
               text-decoration: none;
               }
          a:hover.BtnHome {
    
              background-position: 0 -33px;
               } 
    
         a.BtnClass {
              display: block;
              width: 206px;
               height: 28px;
              background: url(../images/Btn_Classes.jpg) no-repeat 0em 0em;
               text-decoration: none;
               }
          a:hover.BtnClass {
    
              background-position: 0 -28px;
               }   
    
         a.BtnCal {
              display: block;
              width: 206px;
               height: 27px;
              background: url(../images/Btn_Cal.jpg) no-repeat 0em 0em;
               text-decoration: none;
               }
          a:hover.BtnCal {
    
              background-position: 0 -27px;
               }  
         a.BtnBio {
              display: block;
              width: 206px;
               height: 27px;
              background: url(../images/Btn_Bio.jpg) no-repeat 0em 0em;
               text-decoration: none;
               }
          a:hover.BtnBio{
    
              background-position: 0 -27px;
               }    
     a.BtnContact {
              display: block;
              width: 206px;
               height: 27px;
              background: url(../images/Btn_Contact.jpg) no-repeat 0em 0em;
               text-decoration: none;
               }
          a:hover.BtnContact{
    
              background-position: 0 -27px;
               }   
    a.BtnFoot {
              display: block;
              width: 206px;
               height: 54px;
              background: url(../images/Btn_Foot.jpg) no-repeat 0em 0em;
               text-decoration: none;
               }
    
    
    
    #content {
    text-align: left;
    width: 500px; 
    margin: 0em auto +0px auto;
    float: left;
    padding-right: 10px;
    padding-left: 30px;
    padding-bottom: 10px; }
    
    
    #footer {
    clear:both;
    width: 765px;
    margin: 0 auto;
    color: #ebebeb;
    font-family: Verdana, Helvetica, Arial, sans-serif;
    font-size: 10px;
    text-align: center;
    padding: 10px; }.TitleFont {
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    	color: #9dbc3d;
    	font-size: 16px;
    	font-weight: bold;
    }
    .MainTxt {
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    	font-size: 12px;
    	color: #666666;
    }
    Here is the HTML:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Angelina's Yoga</title>
    <link href="css/template_css.css" rel="stylesheet" type="text/css" />
    </head>
    
    <body>
    <div id="header"></div>
    
    <div id="container"> 
    	<div id="content">
    	 <span class="TitleFont">About Angelina's Yoga</span><br />
    	    <br />
    	    <p class="MainTxt">Lorem epsom ipson dolor sic amet sec in consetum nunc ad valorem. Lorem
    	      ipson dolor sic amet sec in consetum nunc ad valorem. Lorem ipson dolor
    	      sic amet epsom sec in consetum nunc ad valorem. Lorem ipson dolor sic
    	      amet sec in consetum nunc ad valorem. Lorem ipson dolor sic amet sec in
    	      consetum nunc ad valorem. Lorem ipson dolor sic epsom amet sec in consetum
    	      nunc ad valorem. Lorem ipson dolor sic amet sec in consetum nunc ad valorem.
    	      Lorem ipson dolor sic amet sec in consetum nunc ad epsom valorem. Lorem
    	      ipson epsom dolor sic amet sec in consetum nunc ad valorem.<br />
    	      <br />
    	    Lorem epsom ipson dolor sic amet sec in consetum nunc ad valorem. Lorem
    	      ipson dolor sic amet sec in consetum nunc ad valorem. Lorem ipson dolor
    	      sic amet epsom sec in consetum nunc ad valorem. Lorem ipson dolor sic
            amet sec in consetum nunc ad valorem. </p>
    	    </div>
       
        <div id="navcontainer">
    <ul id="navlist">
    <li><a class="BtnHome" href="#"></a></li>
    <li><a class="BtnClass" href="#"></a></li>
    <li><a class="BtnCal" href="#"></a></li>
    <li><a class="BtnBio" href="#"></a></li>
    <li><a class="BtnContact" href="#"></a></li>
    <li><a class="BtnFoot" href="#"></a></li>
    </ul>
    </div>
    
    
    </div>
    
    <div id="footer"> Site Map / Home / Classes / Bio / Calander / Contact<br />
    Site Design By Circle Digital</div>
    </body>
    </html>

  • #2
    Master Coder
    Join Date
    Dec 2007
    Posts
    6,682
    Thanks
    436
    Thanked 890 Times in 879 Posts
    It's a guess, I don't have IE so you must check it.
    #container have width 765px, but #content have 500px+30px+10px = 540px and #navcontainer have
    559px wow( typo 55px?) + 205px = 764px (260px if I'm correct and is typo with that value).
    But 540px for #container + 260px for #navcontainer = 800px > 765px, see IE 6/5.5 box model.

    regards

  • #3
    Regular Coder
    Join Date
    Mar 2007
    Posts
    157
    Thanks
    6
    Thanked 4 Times in 4 Posts
    IE6 does weird things with margins and paddings sometimes too, doubling it at times. You can try this to see if it helps any:

    #content {
    text-align: left;
    width: 500px;
    margin: 0em auto +0px auto;
    float: left;
    padding-right: 10px;
    _padding-right: 0;
    padding-left: 30px;
    padding-bottom: 10px; }

  • #4
    New Coder
    Join Date
    Mar 2008
    Posts
    23
    Thanks
    6
    Thanked 0 Times in 0 Posts
    Hi oesxyl,

    I corrected the additions, but still not correcting the problem. Any other ideas?

    Here is what I tried:
    - Container 765 px
    - within container is the Content (corrected to 519px + 30+10 padding = 559 px)
    - within container is also NavContainer (206 px)
    - 559px (content) + 206px (NavContainer) = 765 px (Container)

    Any other ideas on how to fix this problem in IE6 very much appreciated. Thanks


    Quote Originally Posted by oesxyl View Post
    It's a guess, I don't have IE so you must check it.
    #container have width 765px, but #content have 500px+30px+10px = 540px and #navcontainer have
    559px wow( typo 55px?) + 205px = 764px (260px if I'm correct and is typo with that value).
    But 540px for #container + 260px for #navcontainer = 800px > 765px, see IE 6/5.5 box model.

    regards

  • #5
    New Coder
    Join Date
    Mar 2008
    Posts
    23
    Thanks
    6
    Thanked 0 Times in 0 Posts
    Hi jessnoonyes,

    Thanks for your advice, but adding the code _padding-right: 0; did not correct the problem in IE6 Windows. Any other ideas?

    Thanks for your help.

    Quote Originally Posted by jessnoonyes View Post
    IE6 does weird things with margins and paddings sometimes too, doubling it at times. You can try this to see if it helps any:

    #content {
    text-align: left;
    width: 500px;
    margin: 0em auto +0px auto;
    float: left;
    padding-right: 10px;
    _padding-right: 0;
    padding-left: 30px;
    padding-bottom: 10px; }

  • #6
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,849
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    CodeGuy,

    I think, the situation would be simplified if we try to position the two columns in the logical order. You have applied float to the main column and margin to the navigation. And that pursue to apply a big left margin for your navigation column.

    The easier way is to apply float:right; to the smaller column and then apply adequate margin-right to the content. But, this would require to place the right column beforet he content in the markup order. Have a look be creating a test document by the following
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml"><head>
    
    
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Angelina's Yoga</title>
    
    <link href="AngelinaRef_files/template_css.css" rel="stylesheet" type="text/css"></head><body>
    <div id="header"></div>
    
    <div id="container"> 
    	
    	<div id="navcontainer">
    		<ul id="navlist">
    		<li><a class="BtnHome" href="#"></a></li>
    		<li><a class="BtnClass" href="#"></a></li>
    		<li><a class="BtnCal" href="#"></a></li>
    		<li><a class="BtnBio" href="#"></a></li>
    		<li><a class="BtnContact" href="#"></a></li>
    		<li><a class="BtnFoot" href="#"></a></li>
    		</ul>
    	</div>
    	<div id="content">
    	 <span class="TitleFont">About Angelina's Yoga</span><br>
    	    <br>
    	    <p class="MainTxt">Lorem epsom ipson dolor sic amet sec in consetum nunc ad valorem. Lorem
    	      ipson dolor sic amet sec in consetum nunc ad valorem. Lorem ipson dolor
    	      sic amet epsom sec in consetum nunc ad valorem. Lorem ipson dolor sic
    	      amet sec in consetum nunc ad valorem. Lorem ipson dolor sic amet sec in
    	      consetum nunc ad valorem. Lorem ipson dolor sic epsom amet sec in consetum
    	      nunc ad valorem. Lorem ipson dolor sic amet sec in consetum nunc ad valorem.
    	      Lorem ipson dolor sic amet sec in consetum nunc ad epsom valorem. Lorem
    	      ipson epsom dolor sic amet sec in consetum nunc ad valorem.<br>
    	      <br>
    	    Lorem epsom ipson dolor sic amet sec in consetum nunc ad valorem. Lorem
    	      ipson dolor sic amet sec in consetum nunc ad valorem. Lorem ipson dolor
    	      sic amet epsom sec in consetum nunc ad valorem. Lorem ipson dolor sic
            amet sec in consetum nunc ad valorem. </p>
    	  </div>
     
    </div>
    
    <div id="footer"> Site Map / Home / Classes / Bio / Calander / Contact<br>
    Site Design By Circle Digital</div>
    </body></html>
    Code:
    body {
    background-color: #529cc4;
    background-image: url(../images/BkGrndImg.jpg);
    background-repeat: repeat-x;
    margin: 0 auto;
    text-align: center;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    	font-size: 12px;
    	color: #666666; }
    
    
    #container {
    width: 765px;
    margin: 0 auto;
    background-color: #ffffff;
    overflow:hidden;
     }
    
    #header {
    width: 765px;
    height: 170px;
    background-image: url(../images/Banner.jpg);
    margin: 0 auto;
     }
    
    #navcontainer {
    /*margin-left: 559px;*/
    width: 206px;
    height: 300px; 
    border:1px solid red;
    float:right;
    }
    
    #navcontainer ul
    {
    margin-left: 0;
    padding-left: 0;
    list-style-type: none;
    margin: 0 auto;
    }
    
         a.BtnHome {
              display: block;
              width: 206px;
               height: 33px;
              background: url(../images/Btn_Home.jpg) no-repeat 0em 0em;
               text-decoration: none;
               }
          a:hover.BtnHome {
    
              background-position: 0 -33px;
               } 
    
         a.BtnClass {
              display: block;
              width: 206px;
               height: 28px;
              background: url(../images/Btn_Classes.jpg) no-repeat 0em 0em;
               text-decoration: none;
               }
          a:hover.BtnClass {
    
              background-position: 0 -28px;
               }   
    
         a.BtnCal {
              display: block;
              width: 206px;
               height: 27px;
              background: url(../images/Btn_Cal.jpg) no-repeat 0em 0em;
               text-decoration: none;
               }
          a:hover.BtnCal {
    
              background-position: 0 -27px;
               }  
         a.BtnBio {
              display: block;
              width: 206px;
               height: 27px;
              background: url(../images/Btn_Bio.jpg) no-repeat 0em 0em;
               text-decoration: none;
               }
          a:hover.BtnBio{
    
              background-position: 0 -27px;
               }    
     a.BtnContact {
              display: block;
              width: 206px;
               height: 27px;
              background: url(../images/Btn_Contact.jpg) no-repeat 0em 0em;
               text-decoration: none;
               }
          a:hover.BtnContact{
    
              background-position: 0 -27px;
               }   
    a.BtnFoot {
              display: block;
              width: 206px;
               height: 54px;
              background: url(../images/Btn_Foot.jpg) no-repeat 0em 0em;
               text-decoration: none;
               }
    
    
    
    #content {
    text-align: left;
     
    margin: 0em auto +0px auto;
    /*float: left;
    width: 500px;
    */
    padding-right: 10px;
    padding-left: 30px;
    padding-bottom: 10px; 
    border:1px solid red;
    margin-right:206px;
    }
    
    
    #footer {
    clear:both;
    width: 765px;
    margin: 0 auto;
    color: #ebebeb;
    font-family: Verdana, Helvetica, Arial, sans-serif;
    font-size: 10px;
    text-align: center;
    padding: 10px; }.TitleFont {
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    	color: #9dbc3d;
    	font-size: 16px;
    	font-weight: bold;
    }
    .MainTxt {
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    	font-size: 12px;
    	color: #666666;
    }
    (red borders are just for testing)
    PS: #navcontainer ? I think you could postion the <ul> itself and avoid some divitis
    Last edited by abduraooft; 05-11-2008 at 04:11 PM.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #7
    Regular Coder Candygirl's Avatar
    Join Date
    Apr 2008
    Location
    Switzerland
    Posts
    184
    Thanks
    3
    Thanked 56 Times in 56 Posts
    This is about 3px jog, a bug in IE6 and under. IE6 put 3 more pixels between a float and the adjacent content. Try to give a margin-left: 556px; to #navcontainer and it will be ok in IE6 (not in other browsers ).

    With your code, To correct the bug in IE6 you could specify this:

    Code:
    <!--[if lt IE 7]>
      <style type="text/css">
        #navcontainer {
          position:relative;
          left:-3px;
          margin-right:-3px;
        }
      </style>
    <![endif]-->
    But the best is to avoid the bug.
    This is easy in your case because your layout has fixed width. You should just make float #navcontainer:

    Code:
    #navcontainer {
    	float:right;
    	width: 206px;
    	background-color:red;
    }
    Abduraooft's proposition will make the 3px jog less visible because #content won't have the layout (the bug appears on the content not the container), but the bug is still there and could make some problems depending of your content.
    "Imagination was given to man to compensate for what he is not;
    a sense of humour to console him for what he is."
    -Francis Bacon

  • Users who have thanked Candygirl for this post:

    oesxyl (05-11-2008)

  • #8
    Master Coder
    Join Date
    Dec 2007
    Posts
    6,682
    Thanks
    436
    Thanked 890 Times in 879 Posts
    Candygirl already give the solution,
    I post only to add some additional documentation would probably could help you:

    http://css-discuss.incutio.com/?page=BoxModelHack
    http://htmlfixit.com/contribs/MS_conditional_tags.html

    I'm agreed with Candygirl suggestion to use MS conditional comment but I think is better to use IE 6 condition and change the if comment content appropiate for this.

    PS: Candygirl, I didn't know about the 3px issue in IE6, and I think that is one of the margin/border/padding setting, but I could be wrong, so I appreciate some reference about this issue. Thank you in advance.

    Edit:
    google with "3px jog", as Candygirl suggest in next replay, give many results, one relevant, IMO, is:
    http://www.positioniseverything.net/...reepxtest.html

    PS: this along with Candygirl explanation,

    regards
    Last edited by oesxyl; 05-11-2008 at 07:27 PM.

  • #9
    Regular Coder Candygirl's Avatar
    Join Date
    Apr 2008
    Location
    Switzerland
    Posts
    184
    Thanks
    3
    Thanked 56 Times in 56 Posts
    Quote Originally Posted by oesxyl View Post
    Candygirl, I didn't know about the 3px issue in IE6, and I think that is one of the margin/border/padding setting, but I could be wrong, so I appreciate some reference about this issue.
    If you make some search on google with "3px jog" you'll find some explanations.

    But the best is to see the bug in action (yes this is a specific 3px bug not just a margin/padding/border issue):
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>3px jog</title>
    <style type="text/css">
    	* {margin:0;padding:0;}
    	
    	#left {
    		float:left;
    		width:200px;
    		background-color:red;
    	}
    	
    	#content {
    		margin-left:200px;
    		background-color:green;
    	}
    	
    	#content ul {
    		list-style:inside;
    	}
    	</style>
    </head>
    
    <body>
    	<div id="left">left<br />left</div>
    	<div id="content">
    		<ul>
    			<li>a list to see it better</li>
    			<li>a list to see it better</li>
    			<li>a list to see it better</li>
    			<li>a list to see it better</li>
    		</ul>
    	</div>
    </body>
    </html>
    In IE6 (it's corrected in IE7) you can see that there are 3px between the text in the content and the left floating element. When the floating element ends, the text goes back to the right place.

    Now, let's give the layout to #content by giving it a width. Add width:500px to #content. Now, in IE6 you can see the 3px are now applied between #left and #content, not anymore to the content of #content.

    Well that's almost it... The bug does not appear between two floating elements. If you change the margin-left:200px with float:left, IE6 display it correctly. There are some different cases related to this bug but this is the base.

    If you want to keep the #content flexible but #left with a fixed width, you can't make #content float. In that case, If the design is not suffering with the bug, you can just ignore it, but if it does you can apply the fix I gave higher.

    Hope its clear enough
    Last edited by Candygirl; 05-12-2008 at 08:16 AM.
    "Imagination was given to man to compensate for what he is not;
    a sense of humour to console him for what he is."
    -Francis Bacon

  • Users who have thanked Candygirl for this post:

    oesxyl (05-11-2008)

  • #10
    New Coder
    Join Date
    Mar 2008
    Posts
    23
    Thanks
    6
    Thanked 0 Times in 0 Posts

    Thumbs up

    Thank you abduraooft!

    Yes, this worked! See the result in IE6:
    http://circledigital.com/AngelinaRef/AngelinaRef5.html

    The main thing I learned here, which I can use for other sites, is the simplified and logical positioning that you suggested (ie float:right to the NavContainer etc.), remembering to change the markup order in the HTML.

    [QUOTE=abduraooft;687167]CodeGuy,

    I think, the situation would be simplified if we try to position the two columns in the logical order. You have applied float to the main column and margin to the navigation. And that pursue to apply a big left margin for your navigation column.

    The easier way is to apply float:right; to the smaller column and then apply adequate margin-right to the content. But, this would require to place the right column beforet he content in the markup order.

  • #11
    New Coder
    Join Date
    Mar 2008
    Posts
    23
    Thanks
    6
    Thanked 0 Times in 0 Posts

    Thumbs up

    Thank you CandyGirl!

    Yes, this solution worked also. Very useful knowledge to have about this 3 px bug in IE6. This is also my 1st application of applying browser specific code comments which is very cool.

    Thanks again for sharing with me this solution. I hope it helps others also.

    See the results here:
    http://circledigital.com/AngelinaRef/AngelinaRef6.html

    Thanks again!


    Quote Originally Posted by Candygirl View Post
    This is about 3px jog, a bug in IE6 and under. IE6 put 3 more pixels between a float and the adjacent content. Try to give a margin-left: 556px; to #navcontainer and it will be ok in IE6 (not in other browsers ).

    With your code, To correct the bug in IE6 you could specify this:

    Code:
    <!--[if lt IE 7]>
      <style type="text/css">
        #navcontainer {
          position:relative;
          left:-3px;
          margin-right:-3px;
        }
      </style>
    <![endif]-->
    But the best is to avoid the bug.
    This is easy in your case because your layout has fixed width. You should just make float #navcontainer:

    Code:
    #navcontainer {
    	float:right;
    	width: 206px;
    	background-color:red;
    }
    Abduraooft's proposition will make the 3px jog less visible because #content won't have the layout (the bug appears on the content not the container), but the bug is still there and could make some problems depending of your content.

  • #12
    New Coder
    Join Date
    Mar 2008
    Posts
    23
    Thanks
    6
    Thanked 0 Times in 0 Posts
    Thankyou abduraooft, CandyGirl, and oesxyl!

    All of you have been very helpful in advancing my knowledge of CSS. I am still climbing the learning curve here and finding this site has been a tremendous resource for me. Thank you all again for sharing with me, your time and knowledge.

    The only fix left unsolved is on the Mac IE5 where the container that holds both the content and the NavContainer (just below the header), is not centered, but stays to the left. I will search for Mac IE5 specific issues for a solution, but if any of you know a quick fix for Mac IE, thanks in advance!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •