Forum Moderators: not2easy
The subnav is absolutely positioned in order to appear below the main nav HOWEVER a new requirement for this site is for text size to increase by 4 times (e.g. in FF text zoom only, CTRL and + four times). The problem is that when the text is very large, it wraps the main nav tabs below the absolutely positioned subnav and becomes obscured.
I can't see any way around this - is is possible? If the subnav ul is not absolutely positioned, it breaks the main nav ul. Is there any way for a ul nested inside a li to sit below the main ul, without using absolute positioning?
The relevant parts of the CSS, with all other styling removed, are:
#hdr_links {
clear: both;
width: 955px;
}
#hdr_links ul li ul {
position: absolute;
top: 175px;
left: 0px;
height: 31px;
width: 955px;
}
#hdr_links ul, #hdr_links ul li ul {
list-style-type: none;
}
#hdr_links li {
float: left;
}
#hdr_links li ul li {
float: left;
height: 30px;
}
[edited by: swa66 at 7:39 pm (utc) on April 17, 2009]
[edit reason] No personal URLs allowed please see ToS and forum charter [/edit]
And now you absolute position your 2nd level ul with respect to the main 1st level nav.
Second step is to set the height of the 1st level nav in em.
#hrd_links li {height:1em;}
and update the positioning of the 2nd level ul - to use esm instead of pixels
#hrd_links ul ul {top:1em;} // instead of 175px
or whatever is the em height of your 1st level links.
This would "move" the 2nd level nav when the font size is increased.
P.S. Make sure to use ems for the font-sizes as well, as they won't change their size in IE.
The code I'm using is:
<!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" xml:lang="en" lang="en">
<head>
<style>
#hdr_links {
width: 955px;
}
#hdr_links ul {
list-style-type: none;
position:relative;
width: 955px;
}
#hdr_links li {
height:2.5em;
float: left;
padding: 10px;
}
#hdr_links ul li ul {
list-style-type: none;
position: absolute;
top: 3em;
left: 0em;
color: #000;
background-color: #f00;
}
#hdr_links li ul li {
float: left;
}
</style>
</head>
<body>
<div id="hdr_links">
<ul>
<li>Home</li><li>Our products<ul><li>Product menu ¦</li><li>Which product is best for you? ¦</li><li>Full Investment Fund</li></ul></li><li>How to apply</li><li>Our investments</li><li>News & events</li>
<li>About us</li><li>Contact us</li>
</ul>
</div>
</body>
</html>
It feels like you're unaware that what you apply to e.g. #hdr_links li get applied to all <li>s (of whatever nesting) inside any element with that id. So it also applies to "#hdr_links li ul li". If you want to have something nly appled to the first level you either
- need to use a selector like #hdr_links>ul>li (But IE6 will give you grief)
- need to counteract all settings in a the more specific rule (and there's no need there then to repeat what's already there.
Finally legacy IE versions and FF disagreeing over a layout: it's virtually always going to be IE that's wrong.
Start by making sure the code is valid (your html has issues).
But, to be honest I don't see a problem of wrapping when I zoom in in FF3 (mac latest version) All the way zoomed out to all the way zoomed in it's the same except for size and creating a scroll bar if it gets too wide.
I'd also ditch the div and place the id on the ul, much simpler.
