With problem in IE7 and 6

HTML & CSS
1

I’;ve got a problem with IE7 here: http://stage.truedesign.electra-2.titaninternet.co.uk/teamaquatic

The blue navigation bar and the image slide show below that are wider than they should be.

I have specified a width for header nav and .coin-slider, so I don’t know why this doesn’t work in IE7. Would be grateful for any help here. Many thanks.

2

Hi,

The problem is caused by the overflow-x and y rules you have applied to the body. I’m not sure why you see the need to hide the horizontal scrollbar as that makes the site unusable on any devices less than 960px wide.

Change to the body rules to this and add position:relative also.


body {
	background: url(images/bg-page.gif) repeat-y #fff;
	width:960px;
	margin: 0 auto;
	padding:0 10px;
	position:relative
}

The position:relative is needed because you are using the body for centring purposes (which I always advise against) and in IE7 and under none of the absolute elements will keep track if the window is opened or closed (just check out your slider for an example) unless position:relative is added. There are also issues with the zoom function in IE when the body is used for centring as it scales weirdly and of course the scrollbar issues you just encountered.

All in all its much easier to use a page container and avoid all the issues above.:slight_smile:

3

Thanks you very much. I’m working with a container now, and that indeed works. I was hoping to reduce the number of DIVs by not using one, but was unaware of the problems.

(The overflow things slipped in from CSS of another site.)