Layout problem in IE

HTML & CSS
1

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. I’ve attached an image of what the IE screenshot looks like. The link to the site is:http://www.osullivans-pubs.com/draft

2

So I’ve pinpointed the element that IE is having an issue with (I think). It’s this:

#back {
	overflow: hidden;
	min-height: 700px;
	margin-top: -235px;
	padding-top: 80px;
	text-align: center;
	position: relative;
	zoom:1;
	display: block;
}

IE (even IE10) just won’t recognise the negative margin. And it needs to have a negative margin, this can’t be done with absolute positioning. I’d really appreciate any help anyone can give because I’ve kind of exhausted my options at this stage and am unsure what to do…

3

Using negative top margins like that usually bombs out somewhere, sometime. I recommend rethinking how you construct this. You could make better use of background images on existing elements, rather than relying on absolutely positioned elements to contain background images. I suggest you place a container around the navigation and the slideshow, add the back_gradient image to that as a background, and perhaps just adjust the position of the navigation to suit (with some relative positioning). That would be a lot more bulletproof. :slight_smile: