> for once ie is doing as its told and positioning the dropdown in the
> right possy but in firefox i can't for the life of me get the darn thing
Arrrggghhh! Surely you've seen the trend when "IE is right, Firefox is
wrong." Just how many times has Firefox got it wrong on this list?!
Here's the CSS in question:
li {
...
padding: 4px;
}
li ul {
...
top: 1.75em;
left: -.35em;
padding: 4px;
}
li > ul {
top: auto;
left:auto;
}
You've set 4px padding on LI, and 4px padding on LI UL. Because the
submenu UL is contained within the menu LI, they combine to an 8px
horizontal indent on the submenu LIs.
It looks like you've set LI UL to left:-.35em to pull the menu back
into position (affects all browsers.) This is an inexact method. In
most cases you should use the same unit for calculations (ie, 8px
indent = left:-8px)
BUT, below that you've got LI > UL setting left:auto which is ignored
by IE, but not other browsers who set left:0, overriding the -.35em
above.
So, how easy is it to fix?
Put the horizontal padding in the LI A instead:
li {
...
padding:4px 0;
}
li a {
padding:4px;
}
li ul {
...
top: 1.75em;
left:0;
padding:4px 0;
}
li > ul {
top: auto;
}
A perfect example of why many boffins here develop with Firefox then
tweak for IE. And a good example of simplifying the CSS when things go
pear shaped :)
--Ben
******************************************************
The discussion list for http://webstandardsgroup.org/
Proud presenters of Web Essentials 04 http://we04.com/
Web standards, accessibility, inspiration, knowledge
To be held in Sydney, September 30 and October 1, 2004
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list & getting help
******************************************************
