Need IE 6 bug fix - right menu DIV drops

CodeGuy

05-11-2008, 02:17 AM

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:

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:

<!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>

oesxyl

05-11-2008, 02:31 AM

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

jessnoonyes

05-11-2008, 03:26 AM

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; }

CodeGuy

05-11-2008, 03:37 PM

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

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

CodeGuy

05-11-2008, 03:39 PM

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.

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; }

abduraooft

05-11-2008, 04:07 PM

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
<!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>
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 (http://csscreator.com/?q=divitis)

Candygirl

05-11-2008, 05:09 PM

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:



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:

#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 (http://www.satzansatz.de/cssd/onhavinglayout.html) (the bug appears on the content not the container), but the bug is still there and could make some problems depending of your content.

oesxyl

05-11-2008, 06:14 PM

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.

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

PS: this along with Candygirl explanation, :)
regards

Candygirl

05-11-2008, 06:48 PM

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):
<!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 ;)

CodeGuy

05-11-2008, 08:13 PM

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.

CodeGuy

05-11-2008, 08:18 PM

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!

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:



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:

#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 (http://www.satzansatz.de/cssd/onhavinglayout.html) (the bug appears on the content not the container), but the bug is still there and could make some problems depending of your content.

CodeGuy

05-11-2008, 08:25 PM

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!