Issues with Spacing and Overlapping in IE

**k0shyX** · 04-10-2008, 10:25 AM

Ok, well first of I'm Steve and I'm new to the forum, just thought I should let everyone know

Ok, well my website is having a few minor annoyances in IE that I really want to get rid of. Here are two screenshots, the first in Firefox, the second in IE. Both are from my homepage at k0shy.com

As you can see, I outlined two differences in the IE screenshot from the Firefox one. At the top of the screen in the IE screenshot, the "k0shy.com" logo does not overlap the border of the big box (notice how it looks like "k0shvy.com"? Secondly, the footer has a much larger space than necessary at the bottom compared to Firefox. I like Firefox's way, so how can I make IE do the same?

Those problems occur sitewide, but for some reason on my AP World History page the footer has an even longer footer than it does on the other pages. Check out the screenshot below to see what I mean.

So how can I fix these problems? Any help is greatly appreciated!

**LadynRed** · 04-10-2008, 11:17 AM

Your #title has a z-index on it.. BUT z-index ONLY works with positioned elements, so IE is ignoring it. Make it position:relative, THEN give it a z-index of 10. 1 will work, but IE has a funny way of calculating z-index, so I always make it higher than just 1 or 2 etc.

Footer - you have not defined a height, so give it a height !

In addition, you should get in the habit of zeroing out the margins and padding on all your main elements FIRST. Apply them back in where needed.

**k0shyX** · 04-10-2008, 11:32 AM

Thanks! The title problem is fixed, but the footer problem is still present. I defined a height in both the class credits (where the copyright info, etc is) and in the footer id, but it still isn't working.

**LadynRed** · 04-10-2008, 12:18 PM

Zero out the margins and padding on #main and #footer.
The big gap below the footer is coming from the 10px padding you have set on #container. Zero it out and the space disappears.

**k0shyX** · 04-10-2008, 01:07 PM

Okay, I did what you said, but it now looks ugly in Firefox (Everything is so close to the border of the box and the copyright stuff is overlapping the border). It doesn't look to great in IE either, everything is close to the border AND there's still more space under the copyright info than there was in Firefox before all the changes. Ughh, IE is the worst.

**LadynRed** · 04-10-2008, 02:14 PM

What version of IE are you using ? When I removed all that padding on the #container, the footer sat right at the bottom, maybe not optimal, but the space was gone. You have to learn the box model according to IE vs. the rest of the browsers too. If you want some space between the footer and the bottom of #container, give #footer a bottom margin. Since footer is EMPTY, IE WILL allow space for text, even though there is none, so you have to account for that too.

**k0shyX** · 02:35 PM

Okay, well I'm using IE7 but I just devised a way to circumvent IE's stupidy. I used the underscore hack to trick IE into using different settings than CSS compliant browsers. Can you see if this works on your computer?

Go to k0shy.com/test.html to see that the main page, it should be exactly the same for both IE and Firefox. Same with k0shy.com/apworld/test.html, for that page I added another CSS file in the <head> that brought up the bottom margin of "main".

EDIT:

By the way, I found the hack on this page.

Edit #2:

I just confirmed the hack works in IE6 as well (checked on my other computer), and it works OK in Opera, there is a gap below the footer but its consistent between the AP World Page and the Home page (the AP World page doesn't have a larger gap than the homepage) and the gap doesn't look noticeable, and my site probably targets more Firefox and IE users than Opera users (no offense Opera-lovers).

**LadynRed** · 04-10-2008, 02:34 PM

Using hacks is NOT a good idea, that underscore hack may pass IE7 w/o choking, but it may not pass IE8 or other future versions. If you have to hack ( and I don't see a reason for it), then use conditional comments instead and put the 'hacks' in a separate css file that ONLY IE will see.

I don't understand why you don't just put the credits in the footer since you don't appear to be using the footer for anything else.

**k0shyX** · 04-10-2008, 02:40 PM

Oh yeah, I didn't think about newer versions and such.

I didn't really know what the footer did either, I got this template from a website and I didn't want to mess around with it too much, but I'll try what you said and put the credits in the footer and mess around with it a bit.

**LadynRed** · 04-10-2008, 03:06 PM

Yes, you have one of Andreas's templates, I saw that. You can safely put your credits in the footer.

**k0shyX** · 04-10-2008, 03:12 PM

Ok, well I put the credits in the footer and I reverted back to a CSS without the "hack" (check out k0shy.com/apworld/test2.html).

Firefox looks perfect, Opera doesn't look bad either, although there is a bigger gap between the border and the footer, but no big deal, its not that much of a difference. IE, like always, has the problem. The text will not go all the way to the right, it is 75% of the way there.

**LadynRed** · 04-10-2008, 11:56 PM

on the .credits class:
- Don't float it
- take off the position:relative
- get rid of the z-index
- change the height:5px to something like 1.2em
If you change your doctype to XHTML 1.0 Transitional, the footer div will fill the entire horizontal space instead of stopping short as it does now.

**k0shyX** · 04-11-2008, 10:07 AM

Thanks, I did everything you said, and it turned out looking great. But, I checked it for validity and there were a ton of things I needed to change in order to make it valid again. So I took you're advice about not floating it and I changed "height", but I used the underscore hack in conjuction with the "position:relative" and "left" in order to move the footer to the right spot. I also used the hack with "z-index" because for some reason the footer was being overlapped by the border of the box.

I think I'll just keep it this way, if Microsoft does what it promises then IE8 will be fully standards compliant, and since the underscore hack just looks like a comment to compliant browsers there shouldn't be a problem.

Thanks for all your help LadynRed!

**LadynRed** · 04-11-2008, 10:21 AM

You're welcome !