First of all, thank you for taking the time to read my question.

The page looks exactly how I need it to in FireFox and Safari and even IE 8.

But when tested on IE 7 the content in the "leftnav" DIV completely slides over to the right.

Could anyone please guide me in the right direction how to fix this?


3 answers

Emily G 620
This was chosen as the best answer

It's because you are using position:absolute on #leftnav without giving it a position (i.e. top:70px; left:20px;) so each browser decides to display it in a different place.

A better solution would be to use a float.

#leftnav {                      
    margin-top: 70px;
    display:inline;    /* this line fixes the double margin but in ie6 */
Answered about 8 years ago by Emily G
  • Emily, You are the cat's pajamas. Thank you again for taking time out of your day to help me with my problem. Is there any chance that you'd be willing to help with some other problems? I would be willing to compensate you for your time. Feel free to e-mail me directly at Justin U. about 8 years ago
mahalie 33

Wrap your left-nav UL in a <div>.

I think this has to do with IE inherited margin bug. Further reading:

Also agree that using floats would be a better way to do this layout if you're concerned with best practices.

Answered about 8 years ago by mahalie
  • I'm so sorry.. on your first comment all I saw was "wrap your left UL in a".. Justin U. about 8 years ago
mahalie 33

Wow, sweet. Just joined and at negative 1! Did you even try it? What a waste of my time...

Answered about 8 years ago by mahalie