I'm really struggling with a layout issue in (all versions of) IE. The site I'm working on works fine in Chrome and Firefox, but the layout of the banner is completely wrong in IE, where it appears a few hundred pixels lower than it should. I'm not sure if this is an issue with negative margins or what, and there's not much testing I can do since I'm using a Mac and only have static screenshots to go by.

I'd really appreciate any feedback on this. The link to the site is: http://www.osullivans-pubs.com/draft

The screenshot I'm getting for IE (10):

Try top: -235px; in #back in style.css instead of margin-top: -235px; which works for me making IE9 the same as Firefox.

 

If you have a problem with IE, always code for Firefox first and then put one or two different styles (not a complete stylesheet) in a conditional comment AFTER the main stylseheet links, which you have done but it's not live, it gets a 404 not found. (However, this won't overide inline styles in the markup.)

 

Try to avoid large negative margin-top and large negative top sizes as you may just push the problem lower don the page. I didn't check if it has done with my suggestion.

 

Check with a validator like http://validator.w3.org/ as you have a few errors like two opening or closing >> or << in BANNER class="controls"

Edited September 13, 201312 yr by Wickham

I see it's OK in Opera and Chrome but in FireFox dropdown menu of the Photos button appears on the top of the Home button half way up.