Big layout trouble in IE7

Get Started
1

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:

2

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.

3

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;
	}
4

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.

5

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?

6

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