FF causing problems that IE doesnt have! CSS

[RedSon]

Here is the site if you want to look at it http://malk0lm.110mb.com. What I am trying to figure out is how to get the navbar to render properly in both IE and FF. If you look at it in IE there is no additional dark line at the bottom of the toolbar. Also with IE the nav bar covers 100% of the width where in FF it covers more then 100% because you cant see the right side end cap graphic.

Here is the markup:

[CODE=html]<div id="masthead">
<h1 id="siteName">D ear James</h1>
<div id="globalNav"> <img src="protected/img/gblnav_left.gif " alt="" name="gnl" width="5" height="32" id="gnl" /> <img alt="" src="protected/img/glbnav_right.gi f" height="32" width="5" id="gnr" />
<a href="http://malk0lm.110mb.c om/" class="glink" >Home</a><a href="#" class="glink">N one</a></div>
</div>
<!-- end masthead -->[/CODE]

The CSS:

[CODE=css]
#globalNav img{
display: block;
margin-bottom: 0px;
z-index: 2;
}

#globalNav a {
font-size: 90%;
}

a.glink, a.glink:visited {
font-size: small;
color: #000000;
font-weight: bold;
margin: 0px;
padding: 2px 5px 4px 5px;
border-right: 1px solid #8FB8BC;
}

a.glink:hover{
background-image: url(img/glblnav_selecte d.gif);
text-decoration: none;
}

#gnl {
position: absolute;
top: 0px;
left:0px;
}

#gnr {
position: absolute;
top: 0px;
right:0px;
}

#globalNav{
color: #cccccc;
padding: 6px 6px 0px 6px;
white-space: nowrap;
position: relative;
width: 100%;
min-width: 640px;
height: 32px;
color: #cccccc;
background-image: url(img/glbnav_backgrou nd.gif);
}

#masthead{
margin: 0;
padding: 10px 0px 10px 0px;
border-bottom: 1px solid #cccccc;
width: 100%;
}
[/CODE]

[phvfl]

Hi,

The issue here is the differences in the box model betweeen IE and Firefox. In IE the padding is included in the width and height, in IE it is not.

Essentially you need to remove the padding or height in Firefox but not in IE. While there are many CSS hacks around to do this, although the star hack does not work in IE7, IMHO a better way to do it is to use conditional comments.

At the start of the body insert to code:
[HTML]
<!--[if IE]><div id="IERoot"><![endif]-->
[/HTML]

and immediately before the closing body tag put
[HTML]
<!--[if IE]><div id="IERoot"><![endif]-->
[/HTML]

The content of the conditional comment is only read in IE so IE has a div tag with an ID of IERoot whereas other browsers do not. For more info on conditional comments look at http://msdn2.microsoft.com/en-us/library/ms537512.aspx

You can then use CSS selectors that hook into the #IERoot to specify IE specific styles. In this case change the width and height of the #globalNav statement to auto:
[CODE=css]
#globalNav{
color: #cccccc;
padding: 6px 6px 0px 6px;
white-space: nowrap;
position: relative;
width: auto;
min-width: 640px;
height:auto;
color: #cccccc;
background-image: url(/img/glbnav_backgrou nd.gif);
}
[/CODE]

and then the IE specific code:

[CODE=css]
#IERoot #globalNav{
height:32px;
}
[/CODE]

immediately after. I have tested this in IE6 as well and it displays correctly.

As much as I would love to claim credit for the IERoot idea I learnt it here

PS. Don't know if you noticed but in IE it states "This site best viewed with Firefox with Google Toolbar " although the problem was with Firefox :) Just though it was amusing.

[RedSon]

Hi,

The issue here is the differences in the box model betweeen IE and Firefox. In IE the padding is included in the width and height, in IE it is not.

Essentially you need to remove the padding or height in Firefox but not in IE. While there are many CSS hacks around to do this, although the star hack does not work in IE7, IMHO a better way to do it is to use conditional comments.

At the start of the body insert to code:
[HTML]
<!--[if IE]><div id="IERoot"><![endif]-->
[/HTML]

and immediately before the closing body tag put
[HTML]
<!--[if IE]><div id="IERoot"><![endif]-->
[/HTML]

The content of the conditional comment is only read in IE so IE has a div tag with an ID of IERoot whereas other browsers do not. For more info on conditional comments look at http://msdn2.microsoft.com/en-us/library/ms537512.aspx

You can then use CSS selectors that hook into the #IERoot to specify IE specific styles. In this case change the width and height of the #globalNav statement to auto:
[CODE=css]
#globalNav{
color: #cccccc;
padding: 6px 6px 0px 6px;
white-space: nowrap;
position: relative;
width: auto;
min-width: 640px;
height:auto;
color: #cccccc;
background-image: url(/img/glbnav_backgrou nd.gif);
}
[/CODE]

and then the IE specific code:

[CODE=css]
#IERoot #globalNav{
height:32px;
}
[/CODE]

immediately after. I have tested this in IE6 as well and it displays correctly.

As much as I would love to claim credit for the IERoot idea I learnt it here

PS. Don't know if you noticed but in IE it states "This site best viewed with Firefox with Google Toolbar " although the problem was with Firefox :) Just though it was amusing.

Great that worked with the height of the toolbar but how do I solve the width issue? The right nav bar cap does not display on FF without the hscrollbar, what do I do to correct that?

Is the solution similar to the height issue?

[phvfl]

Ps

The width is still explicitly stated:
[CODE=css]
width:100%;
[/CODE]

Changing this to
[CODE=css]
width:auto;
[/CODE]

within the #globalNav selector solved the issue in the three browsers that I checked with:IE6, IE7, FF2

PS:if you need to explicitly state the width for some reason then you would need to do similar to with the height although as this is a percentage this may not scale well

[drhowarddrfine]

Well, the biggest problem you are having is that IE is in quirks mode because you aren't using a proper doctype. This totally messes up IE in the box model. As usual, FF is performing correctly while IE screws everything up with its broken box model.

See the article about doctypes under Articles above. Then validate your html for the list of 19 html errors you have.

Never, ever use IE as your reference for correct behavior. It will shoot you in the foot every time. IE7 is nine year behind web standards.

EDIT: After reading the post above, what he is doing is fixing IEs broken mode. This need not be done with the proper doctype but, essentially, he's doing the same thing by altering the margin/padding. However, this may cause problems later as the broken IE model will still persist.

[RedSon]

Well, the biggest problem you are having is that IE is in quirks mode because you aren't using a proper doctype. This totally messes up IE in the box model. As usual, FF is performing correctly while IE screws everything up with its broken box model.

See the article about doctypes under Articles above. Then validate your html for the list of 19 html errors you have.

Never, ever use IE as your reference for correct behavior. It will shoot you in the foot every time. IE7 is nine year behind web standards.

EDIT: After reading the post above, what he is doing is fixing IEs broken mode. This need not be done with the proper doctype but, essentially, he's doing the same thing by altering the margin/padding. However, this may cause problems later as the broken IE model will still persist.

Changing the doctype made IE behave like FF did so I went ahead and removed the fix that was described below. Now I am working through the validation errors but they dont make any sense.

[drhowarddrfine]

Some of the errors are caused by you using a Xhtml end tag, the '/>'. Remove the slashes.

(I'm working through this until I get called away)