Layout shifting or breaking in IE 6 & 7 - Help!

Hello there! I have coded a template and have it all working great in FF & Safari, of course then I took a look at it in IE and crap! it is pretty messed up (more so in IE6 than 7). If you take a peek you'll see I have a list to the right of the navigation where I've used graphic bullets these aren't working well in IE and the list is moving to the left too far. But IE 6 totally breaks the layout and sends most of the page below the navigation completely. I'm still fairly new to CSS positioning, so I'm hoping this is going to be an easy fix!

go to this link to view:

http://www.f7digitaldesign.com/lms1_site/index2.html


Thanks!
f7brian

The difference in the list is due to different defaults applied by the browsers to the bulleted list. I suggest adding padding-left:40px to your css for that ul - that should bring IE in line with FF.

In IE6 your #main_body div has dropped. It looks like this is because the div #nav_bottom2 is too wide (240px) to fit in #nav (215px). It also looks like just amending this width or removing it completely sorts the problem.

You've got quite a few error (http://validator.w3.org/check?uri=http://www.f7digitaldesign.com/lms1_site/index2.html)s in your markup too - mostly down to repeated element ids by the looks of it. Making these classes instead of ids should fix this.