I've modified a CSS horizantal menu based of the one at <!-- m --><a class="postlink" href="http://www.sovavsiti.cz/css/horizontal_menu.html">http://www.sovavsiti.cz/css/horizontal_menu.html</a><!-- m --> It works ok except now the background dissapears in Firefox but looks ok in IE. Test this code or Download the source file and see for your self. Let me know what you think. Thanks
P.S. For now I set the LI's to have the same background, as a workaround.
<!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=iso-8859-1" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>Menu Test</title>
<style type="text/css">
<!--
body {
margin: 0px 0px 0px 0px;
}
#Main_Nav {
margin: 0px;
padding: 0px;
width: 100%;
background-color: #003399;
font-size: smaller;
font-weight: bold;
}
#Main_Nav ul {
list-style-type: none;
margin: 0px;
padding: 0px;
width: 100%;
}
#Main_Nav li {
float: left;
margin: 0px;
padding: 0px;
text-align: center;
white-space: nowrap;
width: 12%;
}
#Main_Nav a {
display: block;
width: 100%;
color: #DDDDDD;
text-decoration: none;
}
#Main_Nav a:hover {
background-color: #0000CC;
}
-->
</style>
</head>
<body>
<h2>Menu Bug</h2>
<p>Check out the below menu in both IE and Firefox.
You'll see that it looks ok in IE but in FF the background dissapears.
This is based off a <a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.sovavsiti.cz/css/horizontal_menu.html" target="_blank">CSS menu</a>.</p>
<p><em>* The width set on four LI's are to takup all the space because 100% can't be split evenly into 8.</em></p>
<div id="Main_Nav">
<ul>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.google.com/">Google</a></li>
<li style="width: 13%;"><a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.yahoo.com/">Yahoo</a></li>
<li style="width: 13%;"><a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.webdeveloper.com/">Web Developer</a></li>
<li style="width: 13%;"><a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.phpbuilder.com/">PHP Builder</a></li>
<li style="width: 13%;"><a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.slashdot.com/">SlashDot</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.msn.com/">MSN</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.cnn.com/">CNN</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.w3.org/">W3C</a></li>
</ul>
</div>
</body>
</html>Float #Main_Nav to the left- it's children are floating out of it. Not a Firefox bug, it's doing what it's supposed to. You'll have to wait for your technical explanation, though.
And here is that techinical explanation 
A web page consists of roughly three main layers, listed in order of being "closest" to the user's eyes:
1. Window (the whole browser lives here)
2. Frame
3. Document Flow (Also known as layers/absolute positioning.
Now within layer 3, there are three sub-layers:
3. Document Flow
A. Floated Elements |
| B. Inline Elements
C. Block Elements
Now the reason I indented 3.B. is because Inline elements (like text, <img />, <strong>, <span>, etc) will flow around the edges of floated elements. Floated elements, however, do not exist nor take up room in the Block element layer. So literally, the UL tag didn't contain anything. The LI tags you floated were raised out of the Block element layer (Layer 3.C, which contains the UL tag also) and the UL tag had no width and no height.LOL, that's not what I was expecting to hear back. Ok, well I can believe that. IE trying to fix things again... So why does it work in the example at that Website? I'll try and figure out the point were I loose the background while modifying that menu. Any ideas on fixing the issue without setting the background of the LI (not that it's bad or anything)? ThanksOriginally posted by rpanning
LOL, that's not what I was expecting to hear back. Ok, well I can believe that. IE trying to fix things again... So why does it work in the example at that Website? I'll try and figure out the point were I loose the background while modifying that menu. Any ideas on fixing the issue without setting the background of the LI (not that it's bad or anything)? Thanks Yes. Float the ul, and it goes onto the same level as the li's.Ok, got that to work but now two other issues popped up.
1. Putting borders on the left and right of the links, Anchors, pushes the menu to the left. I can't get it to size correctly. FF is close but IE is to wide.
2. Putting a border on the bottom of the menu. It goes up to the top of the menu (underneath it). This is because everything is floating. So, how can I get the DIV to expand to the proper height (without specifying height)?
It will be easier to show you what I'm doing. I'm trying to convert our exsisting design to Section 508 complient. <!-- w --><a class="postlink" href="http://www.stma.k12.mn.us">www.stma.k12.mn.us</a><!-- w -->
ThanksThe easiest and most cross-browser way is to add an element under your UL that has clear: both; applied to it in CSS.
In CSS:
#Main_Nav .spacer {
background-color: #<color of bottom border>;
height: 1px;
}
.spacer {
clear: both;
overflow: hidden;
}
In HTML:
</ul> <!-- The end of your main nav UL -->
<div class="spacer"> </div>
</div> <!-- End of #Main_Nav -->Awsome, that fixed that.
Now, any ideas on the left and right borders? Getting the width 100% without going over. I've tried several ways with no avail.
Also, FF seems to put a 1px space between every other link, You can see this when applying a left and right border. Ideas?
ThanksThe reason the borders break the layout is because of the CSS box model (<!-- m --><a class="postlink" href="http://www.w3.org/TR/CSS21/box.html#box-dimensions">http://www.w3.org/TR/CSS21/box.html#box-dimensions</a><!-- m -->). Get well-acquainted.
To get around the box model problem you're having, take out width: 100% in your #Main_Nav a {} declaration. Since the <a> tags are set to block display, they take up the max amount of width possible by default.
Leave the width out in your <a> tag style declarations, then add the padding and borders you want. The browser will automatically calculate the width property for you.
As for the 1 pixel space in Gecko browsers, that might disappear when you take out that width in the main nav <a> tag style declaration. If not, it's probably due to the The 1px Rounding Error Problem (<!-- m --><a class="postlink" href="http://www.positioniseverything.net/round-error.html">http://www.positioniseverything.net/round-error.html</a><!-- m -->) outlined at Position Is Everything. (<!-- m --><a class="postlink" href="http://www.positioniseverything.net/">http://www.positioniseverything.net/</a><!-- m -->)Wow you guys are genius's! How do you know so much?
Anyway, that did fix both issues. However (sigh), lol, now in IE you have to hover over the text to get the a:hover effect. It does change the background color for the whole li though. So, it's like it is a box but isn't. Odd.. Ideas on that? Thanks again.Add position: relative; to your main nav <a> style declaration.Here is what I have so far. I also forgot to mention the ~3px gap on the right with IE. That's not the biggest issue however and I can work around that. Thanks
Just attached now, to much code to post in thread.Originally posted by toicontien
Add position: relative; to your main nav <a> style declaration.
That worked! LAST thing then I'm going to call it good. There is about a 3px gap on the right side in IE. I can deal with that so if it's not fixable, oh well. ThanksAgain, that has to do with the 1 pixel rounding error. If you expand and contract the browser window, the gap disappears then reappers again. To mask that, you can put a right border on #Main_Nav, then just give all your <a> tags inside it a left border.Ok, I'll just keep it the way it is because I use both left and right borders. Well, I think the menu is as good as I'm going to get it. Thanks for all your help!
P.S. For now I set the LI's to have the same background, as a workaround.
<!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=iso-8859-1" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>Menu Test</title>
<style type="text/css">
<!--
body {
margin: 0px 0px 0px 0px;
}
#Main_Nav {
margin: 0px;
padding: 0px;
width: 100%;
background-color: #003399;
font-size: smaller;
font-weight: bold;
}
#Main_Nav ul {
list-style-type: none;
margin: 0px;
padding: 0px;
width: 100%;
}
#Main_Nav li {
float: left;
margin: 0px;
padding: 0px;
text-align: center;
white-space: nowrap;
width: 12%;
}
#Main_Nav a {
display: block;
width: 100%;
color: #DDDDDD;
text-decoration: none;
}
#Main_Nav a:hover {
background-color: #0000CC;
}
-->
</style>
</head>
<body>
<h2>Menu Bug</h2>
<p>Check out the below menu in both IE and Firefox.
You'll see that it looks ok in IE but in FF the background dissapears.
This is based off a <a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.sovavsiti.cz/css/horizontal_menu.html" target="_blank">CSS menu</a>.</p>
<p><em>* The width set on four LI's are to takup all the space because 100% can't be split evenly into 8.</em></p>
<div id="Main_Nav">
<ul>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.google.com/">Google</a></li>
<li style="width: 13%;"><a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.yahoo.com/">Yahoo</a></li>
<li style="width: 13%;"><a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.webdeveloper.com/">Web Developer</a></li>
<li style="width: 13%;"><a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.phpbuilder.com/">PHP Builder</a></li>
<li style="width: 13%;"><a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.slashdot.com/">SlashDot</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.msn.com/">MSN</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.cnn.com/">CNN</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.w3.org/">W3C</a></li>
</ul>
</div>
</body>
</html>Float #Main_Nav to the left- it's children are floating out of it. Not a Firefox bug, it's doing what it's supposed to. You'll have to wait for your technical explanation, though.
And here is that techinical explanation A web page consists of roughly three main layers, listed in order of being "closest" to the user's eyes:
1. Window (the whole browser lives here)
2. Frame
3. Document Flow (Also known as layers/absolute positioning.
Now within layer 3, there are three sub-layers:
3. Document Flow
A. Floated Elements |
| B. Inline Elements
C. Block Elements
Now the reason I indented 3.B. is because Inline elements (like text, <img />, <strong>, <span>, etc) will flow around the edges of floated elements. Floated elements, however, do not exist nor take up room in the Block element layer. So literally, the UL tag didn't contain anything. The LI tags you floated were raised out of the Block element layer (Layer 3.C, which contains the UL tag also) and the UL tag had no width and no height.LOL, that's not what I was expecting to hear back. Ok, well I can believe that. IE trying to fix things again... So why does it work in the example at that Website? I'll try and figure out the point were I loose the background while modifying that menu. Any ideas on fixing the issue without setting the background of the LI (not that it's bad or anything)? ThanksOriginally posted by rpanning
LOL, that's not what I was expecting to hear back. Ok, well I can believe that. IE trying to fix things again... So why does it work in the example at that Website? I'll try and figure out the point were I loose the background while modifying that menu. Any ideas on fixing the issue without setting the background of the LI (not that it's bad or anything)? Thanks Yes. Float the ul, and it goes onto the same level as the li's.Ok, got that to work but now two other issues popped up.
1. Putting borders on the left and right of the links, Anchors, pushes the menu to the left. I can't get it to size correctly. FF is close but IE is to wide.
2. Putting a border on the bottom of the menu. It goes up to the top of the menu (underneath it). This is because everything is floating. So, how can I get the DIV to expand to the proper height (without specifying height)?
It will be easier to show you what I'm doing. I'm trying to convert our exsisting design to Section 508 complient. <!-- w --><a class="postlink" href="http://www.stma.k12.mn.us">www.stma.k12.mn.us</a><!-- w -->
ThanksThe easiest and most cross-browser way is to add an element under your UL that has clear: both; applied to it in CSS.
In CSS:
#Main_Nav .spacer {
background-color: #<color of bottom border>;
height: 1px;
}
.spacer {
clear: both;
overflow: hidden;
}
In HTML:
</ul> <!-- The end of your main nav UL -->
<div class="spacer"> </div>
</div> <!-- End of #Main_Nav -->Awsome, that fixed that.
Now, any ideas on the left and right borders? Getting the width 100% without going over. I've tried several ways with no avail.
Also, FF seems to put a 1px space between every other link, You can see this when applying a left and right border. Ideas?
ThanksThe reason the borders break the layout is because of the CSS box model (<!-- m --><a class="postlink" href="http://www.w3.org/TR/CSS21/box.html#box-dimensions">http://www.w3.org/TR/CSS21/box.html#box-dimensions</a><!-- m -->). Get well-acquainted.
To get around the box model problem you're having, take out width: 100% in your #Main_Nav a {} declaration. Since the <a> tags are set to block display, they take up the max amount of width possible by default.
Leave the width out in your <a> tag style declarations, then add the padding and borders you want. The browser will automatically calculate the width property for you.
As for the 1 pixel space in Gecko browsers, that might disappear when you take out that width in the main nav <a> tag style declaration. If not, it's probably due to the The 1px Rounding Error Problem (<!-- m --><a class="postlink" href="http://www.positioniseverything.net/round-error.html">http://www.positioniseverything.net/round-error.html</a><!-- m -->) outlined at Position Is Everything. (<!-- m --><a class="postlink" href="http://www.positioniseverything.net/">http://www.positioniseverything.net/</a><!-- m -->)Wow you guys are genius's! How do you know so much?
Anyway, that did fix both issues. However (sigh), lol, now in IE you have to hover over the text to get the a:hover effect. It does change the background color for the whole li though. So, it's like it is a box but isn't. Odd.. Ideas on that? Thanks again.Add position: relative; to your main nav <a> style declaration.Here is what I have so far. I also forgot to mention the ~3px gap on the right with IE. That's not the biggest issue however and I can work around that. Thanks
Just attached now, to much code to post in thread.Originally posted by toicontien
Add position: relative; to your main nav <a> style declaration.
That worked! LAST thing then I'm going to call it good. There is about a 3px gap on the right side in IE. I can deal with that so if it's not fixable, oh well. ThanksAgain, that has to do with the 1 pixel rounding error. If you expand and contract the browser window, the gap disappears then reappers again. To mask that, you can put a right border on #Main_Nav, then just give all your <a> tags inside it a left border.Ok, I'll just keep it the way it is because I use both left and right borders. Well, I think the menu is as good as I'm going to get it. Thanks for all your help!