Website not rendering correctly in IE7?

Question

Hi ,

My website : geek.designbracket.com (Drupal 6.10) is not getting rendered correctly in IE7. The main problem lies with the primary links in the header and the Logo. The site gets displayed as required in FireFox and Chrome.

Main Problem : The #Page div has huge margin on top and bottom in IE which displaces the Logo.

Basically I have used a div : #utilities which encapsulates the Primary Menu + Search + Logo which are positioned relative inside this div. I have done this to ensure consistent alignment of the elements in FF and Chrome even when the site is viewed across different resolutions .

Below this div I have #Page div: which holds the sidebar and the content.

css fr the relevant divs is as under:

#utilities {
margin:0 auto;
padding:0 10px 15px;
width:990px;
}

#utilities #plinks { /*plinks is for the primary menu*/
float:left;
left:60px;
position:relative;
width:900px;
}

#utilities form { /* this div determines the position of the search box */
position:relative;
top:10px;
z-index:1;
}


#logo {
float:left;
left:70px;
position:relative;
}

Please help me align the primary links, logo and the search box in such a fashion that the alignment stays consistent for different resolutions in IE too like it has been done fr FF.

Thanks.

Answer 1

Quick suggestion: try to place a clear:left statement in your #logo block (can't test it myself right now...)

Answer 2

Here are some fixes for ie6. It should fix some of the ie7 problems

The logo is to the far right.

style.css #logo{clear:left;}

Your left-column has the double-margin bug

layout.css #primary {display:inline;}

Your "Add a new comment" and "Read More" are cut off. The problem is they are both floated elements which have no height. You have then put a lot of margin/padding on different elements to get it to line up right which usually does not work well cross-browser. I think you need to read Clearing Floats and start that part from scratch.

Answer 3

Slightly OT, but you might find positioniseverything useful the next time IE has you reaching for a hammer!