Layout problem in IE7, IE8 and all others fine

HTML & CSS
1

Hi,

I have an odd problem with what appears to be a straight forward layout.

The problem is only evident in IE7.

See the attached image. A normal left hand sidebar (float left) which contains the navigation, and the right hand content area.

For some reason the right hand content area start at the bottom of the navigation elements inside the sidebar.

The project is confidential so its difficult to post a demo url. Have made a graphic of the problem.

All help greatly appreciated.

Steve

2

Do you have clear:right (or some other form of clear) on any of those nav items?

You could post some css and html without compromising your site.

3

Hi, there are so many possibilities of what could be going on. All of which, however, as Ralph pointed out, would be entire guesses without full HTML and CSS :).

Although a link would be more preferable as it would allow easy testing.

4

Thanks Guys. I have permssion to post the site now…

You can see the problem here: http://79.170.40.247/go-moco.co.uk/index-apr10-18-DIV.htm

The css is here http://79.170.40.247/go-moco.co.uk/styles/common-new.css

In all browsers accept IE7 and below display the site fine.

The maincontent area is being shifted over to the right as if the padding has been applied twice.

I inherited this site from another designer, so it not my original code.

All help greatfully received.

Steven

5

I don’t have IE available right now, but I’m assuming the problem is with the quadR div? I couldn’t see any “maincontent”.

I would recommend floating quadR and removing the left margin. That’s always just asking for trouble in IE. I can’t remember how people get that to work (perhaps by adding display: inline?) but I just don’t use that for layout. I don’t see the point, when you can just float both divs.

6

BTW, if anyone doesn’t have IE7, you can see the same problem in IE8 in compatibility mode.

7

A bit more info may help…

div rightcolumnFront has a left padding to push it to the right of the left column.

inside this is div QUADcontainer.

inside this is quadL which is float left or quadR.

it appears it is the QUADcontainer that is being pushed over to the right by a similar margin to the rightcolumnFront div. But there is no padding set on this.

8

Subtle hint:

.rightcolumnFront {
	min-height: 376px;
	font-size: 1.2em;
	line-height: 1.3em;
	padding: 0px 0px 0px [SIZE="7"]240px[/SIZE];
}