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?

THANK YOU

3 answers

Emily G 620
4
points
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;
    float:left;
    display:inline;    /* this line fixes the double margin but in ie6 */
}
Answered over 7 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 justinurich43@gmail.com Justin U. over 7 years ago
mahalie 33
4
points

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

I think this has to do with IE inherited margin bug. Further reading: http://www.satzansatz.de/cssd/onhavinglayout.html

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

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

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

Answered over 7 years ago by mahalie