Big layout trouble in IE7

Hi folks,

I’m new to the forum. Have been busy for hours and hours to solve a lay-out problem for a website I’m working on. The site is already in it’s testing phase, but it turns out that there is a very nasty bug in IE7.

It’s a 3 column layout with a header and a footer. In IE 7, the right column is being placed over the left column. In firefox, IE8, safari, opera and chrome it goes well. Also, the tab menu goes next to the logo, and I can’t figure out why that is.

Maybe it has something to do with the ‘hasLayout’ thing in IE. So i tried to give the columns heights of 1%. Or am I supposed to get rid of the hasLayout? It’s a bit confusing to me.

What exactly goes wrong, I don’t know, so I would be really really greatful if somebody could help me out.

I’ve put a test version online at: test<dot>conscious<dot>nl (I can’t post links yet)

Cheers :slight_smile:

If you can, try rearranging the containers so that they line up in order of how they’ll be floated:

<div id=”left”>
<div id=”center”>
<div id=”right_wide_column”>

This will allow you to get rid of the 100% widths and -100% margins, which are probably the culprits. If you can’t edit the markup, those rules will still need to be dealt with since they’re a bit contradictory to “floating” boxes aside each other by asking them to occupy the same space.

Hi linkloper, welcome to SitePoint! :wave:

Good thinking to test for hasLayout issues. :slight_smile:

In the header, IE7 has two issues;

  • The floated right header_menu would drop below the inline logo link-mage due to old IE’s float model (here the correct would be to float it adjacent to the image top edge).
    So I suggest the logo image to be floated left to avoid the drop in IE7.
  • The tab_menu is AP at the bottom of header. IE7 needs also a horizontal coordinate set, e.g. left:0, otherwise the horizontal auto position is coming after the static inline logo image.
    But I suggest removing the AP and instead let it float left (it already has a float rule, but the AP overrides the float).

The right column:

  • Old IEs have difficulties with left negative margins on right floated boxes. -100% pulls the right column all left.
    To help IE7 I suggest setting the negative value the same as the box width.

Above changes should not brake anything in good browsers.


[COLOR="Red"]#header .logo {
	float: left;
	}[/COLOR]

#tab_menu {
	background: #53add0 url(../images/tab_menu_bg.gif) repeat-x;
	height: 29px;
	width: 100%;
	float: left;
	clear: both;
[COLOR="Red"]/*[/COLOR]	position: absolute; [COLOR="Red"]*** remove to activate the float ***[/COLOR]
	bottom: 0px;[COLOR="Red"] */[/COLOR]
	border-left: 1px solid #b7b7b7;
	border-right: 1px solid #b7b7b7;
	}



#right_small_column {
	width: 260px;          
	float:right;
	margin-left:[COLOR="Red"]-260px[/COLOR];
	margin-bottom: 30px;
	overflow:hidden;
	background: #fff;
	padding: 20px 0 0 0;
	}

#right_wide_column {
	width: 350px;          
	float:right;
	margin-left:[COLOR="Red"]-350px[/COLOR];
	margin-bottom: 20px;
	overflow:hidden;
	background: #fff;
	padding: 20px 0 0 0;
	}

Thanks a lot for helping me out! Unfortunally I`m not in the position to try it right now (fingers are itching though), but I will get back to you as soon as possible.

I chose to put the divs with the “center” on top, because I’ve been reading that it’s better for SEO concerns. Is that true?

Erik J, you made my day, it all works fine now :slight_smile: