floated navigation (list) not floating in IE

[snehula]

Hi there,

i was about to say i can't get my nav menu (list elements) to float in IE (tested 7 and 8) although i've set the list items to float left.. meanwhile with a little bit of experimentation i managed to get it floating. The problem seems to have been the following:
i've had my list elements set to a 100% width. If i'm not mistaken that should be a 100% of the parent element, and that's how it worked in all major browsers. IE however interpreted it as a 100% width of the window. So, i came to a conclusion that if i wanna be able to display things correctly in ie, i shouldnt be using percents? Is that right?

Could anybody point me to the right direction as for a comprehensive guide on browser differences regarding css implementation, most of all i'm interested in IE bugs and workarounds.
And, I am really curious, good people, YOU who have designed dozens of websites, do you end up writing a completely different css file for IE each time or how does it work? :-)

[Hoople]

Many css discussions cite positioniseverything.net as an IE bug authority page.

[penders]

Is the page rendering in standards mode? ie. with a relevant DOCTYPE. Does the page HTML validate?

[snehula]

penders.. emmm no it doesn't.. but the problems start in the main content, the menu seems ok
and while we're at it, what am i stupposed to think of this kind of error:

Line 62, Column 244: start tag for "LEGEND" omitted, but its declaration does not permit this

….php"><div id="leftfs"><fieldset><br><input type="

with the br closing bracket highlighted as the location of the error
dpctype is transitional
each fieldset tag MUST have its legend tag? or have i left one closing tag out somewhere else.. i'm getting this error (or 'end tag for LEGEND imotted) on a number of lines around fieldset tags.

[snehula]

Hoople thanks i'm gonna check it out

[snehula]

ok now putting in the legend tags fixed the problem, so .. yes, it validates

[penders]

Yes, every fieldset requires a legend element. But does this solve your original problem? I can't imagine that it does?

[snehula]

no no the original problem is still there.. only IE

[snehula]

ok one more go.. css validation found the following mistakes:

textarea Property resize doesn't exist in CSS level 2.1 but exists in [css3] : vertical
#navbar Property opacity doesn't exist in CSS level 2.1 but exists in [css3] : 0.7
#navbar Parse Error opacity=50)
#navbar ul li a Property text-shadow doesn't exist in CSS level 2.1 but exists in [css2, css3] : #000 1px 1px 1px
#content Property opacity doesn't exist in CSS level 2.1 but exists in [css3] : 0.8
284 #footer Property opacity doesn't exist in CSS level 2.1 but exists in [css3] : 0.7
348 Unknown pseudo-element or pseudo-class :nth-child

I doubt that this should affect the layout of navbar in any browser though..

[alt131]

Hi snehula, good on you for validating, and I think you are correct that the warnings about the properties that don't exist in css2.1 shouldn't be affecting the layout. However, the parse error could because it may be affecting the way subsequent rules are interpreted/applied - so I'd get that resolved.

To return to your original issues though, you've said you had your list elements set to 100% width - and you are right that should be 100% of the parent element which is the <ul>. However, if the list items are occupying the full width of the parent, they cannot float to the left of each other because there isn't enough horizontal room. ie copes with percentages quite well, and in this case is actually behaving correctly, so the fact that some browsers are floating the <li> next to each other suggests there is something else affecting this.

Given your comments about the css and problems with floating in earlier threads my first guess at the source of these conflicting displays would be invalid code - either html or css. So at this stage I'd suggest to keep validating until you have removed all parse errors. After that, if the problem still exists can you post an "examplified" html snippet that shows the mark-up for the list, plus the relevant relevant css.