2 replies [Last post]
RyanR
Offline
newbie
Last seen: 13 years 38 weeks ago
Joined: 2009-03-18
Posts: 2
Points: 0

I just launched a new site redesign (still needs some tweaking and additions), however, IE 6.0 doesn't display the page correctly. The navigation on the right hand side is mispositioned and the bottom left arrow doesn't show up.

Here's a screenshot of the problem: http://browsershots.org/screenshots/3138047fa00b8a9dbc71c205e017fdeb/

Please let me know if you have any ideas or solutions. Any help is greatly appreciated.

http://wasterecoverysystems.net

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 48 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

With the navigation element

With the navigation element following after the wrapper and floated IE is dropping the floated nav to the next line below wrapper, as would normally be expected if the floated element of a pair is last in the order, generally for floats to work correctly it needs to come first in the flow before the non floated element.

I'm not too keen on your approach to hiding the primary navigation to the bottom of the markup flow, I would prefer to have primary navigation - which is important - higher up? Perhaps a better approach would be to place the floated nav after wrapper and before content.

If you want to stick to that approach you have you will probably need to use one of the source order tricks to get it to work such as a floated parent 100% width negative right margin to nav width then the first child has a normal right margin to the nav width. Nav follows after the negative margined parent which should allow a following float to move up.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

RyanR
Offline
newbie
Last seen: 13 years 38 weeks ago
Joined: 2009-03-18
Posts: 2
Points: 0

Thanks for the suggestions,

Thanks for the suggestions, Hugo. I played around with the positioning and noticed that I could move the navigation up by adding a margin-top:-400px, however, there's no set number of pixels I could define that would work for every page since they all vary in length.

I was trying to follow your suggestion about using a floated parent 100% width with negative right margin, etc. but I honestly don't understand what you mean exactly. I realize it may be best to "hack" something together in CSS and apply it to IE 6.0> browsers to get it to position correctly. What you're suggesting sounds like it may be on the right track. Would you mind explaining it in a bit more detail please?