Dammit! IE issue and I don't know how to resolve it.

nin's picture

They have: 9 posts

Joined: Mar 2008

I made a design for a site I'm working on: http://sourcemeup.zzl.org and everything looks fine on Firefox and Opera but the footer seems to be misplaced in IE (at least version 6 thereof, couldn't test it on others)

Could anyone give a solution to this?

Megan's picture

She has: 11,421 posts

Joined: Jun 1999

I think it has something to do with the big negative margin/positive padding on the content and sidebar divs. If I turn that if it seems to go back to normal in IE. For some reason IE seems to be calculating that differently. You might have to put in a special rule for IE there.

nin's picture

They have: 9 posts

Joined: Mar 2008

Thank you for your reply Megan,

Yes, those margins are part of my wrapper which basically makes the left, center and right content expand to the size of whichever div (left, content, right) contains the most content. Without the wrapper the following would happen:

If I had a huge article in the middle, the left and right sides wouldn't stretch and the backgrounds thereof would in turn be white as the browsers don't render it like the human would like it to. Remove it, it displays correctly only because the content seems pretty much aight for IE but then not for the more valid browsers (Firefox, Opera).

You mention creating a rule, I've heard of people doing that but I've never seen examples. What is required of me to do? A simple edit in the CSS file or does it involve scripting to detect IE browsers?

Thanks again.

Megan's picture

She has: 11,421 posts

Joined: Jun 1999

Look up IE conditional comments - that's what you need. There are a couple of ways to use them - you could serve a separate stylesheet to IE using conditional comments, or use the conditionals to put in a unique containing div for IE only (#IEroot or something like that) which you would then target in your existsing CSS.

nin's picture

They have: 9 posts

Joined: Mar 2008

Thank you, I will see what I can find.

He has: 629 posts

Joined: May 2007

Hmm. My browser is telling me it can't find your site. Sad

From the conversation, it sounds like you are using the Equal Height Columns method from positioniseverything.net. If so, perhaps this article will help: Problems with the Equal Height Columns method.

Cordially, David
--
delete from internet where user_agent="MSIE" and version < 8;

nin's picture

They have: 9 posts

Joined: Mar 2008

Hi webwiz. Thanks for the trouble and yes, my webhost was down for a couple of hours. It should be back up now (is here at least).

I did however not use the method mentioned in that article. I do however appreciate your concerns.

Thanks again

He has: 629 posts

Joined: May 2007

Yes. I see it now. The method mentioned in the article employs a large padding-bottom and a corresponding large negative margin. In your CSS I see this:

#left, #right, #content {
margin-bottom:-32767px;
padding-bottom:32767px;
}
'
Looks like the same technique to me.(?)

Anyways, I am very sorry to tell you that the page breaks very badly in all browsers this end, and in different and disastrous ways. Try, for example, increasing text size in Firefox by just one increment to see all three columns collapse to the right of the screen in a jumble.

My only suggestion is for you to start over. There are tested and working layouts at Layout Gala[1], while the "faux columns" method[2] for getting the appearance of equal height columns should work well for you.

[1] http://blog.html.it/layoutgala/
[2] http://www.strictlycss.com/articles/article/47/css-fluid-layouts-with-fa...

Cordially, David
--
delete from internet where user_agent="MSIE" and version < 8;

nin's picture

They have: 9 posts

Joined: Mar 2008

Thank you again webwiz. Yes I guess it is the same technique. I won't be having a 3 column CSS layout because it's too complicated. I've stuck to my old design.

Megan's picture

She has: 11,421 posts

Joined: Jun 1999

That might be a good idea if you're not that experienced with CSS layouts. Keep it simple to start, unless you can find a pre-built template that works...

Want to join the discussion? Create an account or log in if you already have one. Joining is fast, free and painless! We’ll even whisk you back here when you’ve finished.