...

View Full Version : IE Problems, Again



aspekt9
05-22-2007, 02:01 PM
Once again, everything in Firefox looks right. It seems like IE6 and 7 are having problems with my divs. It looks like a problem with my definition lists, the distance between the <dt>'s and the <dd>'s is so much larger in IE than in FF and I think it's stretching the divs. How can I decrease the difference so the divs will line back up? Also in IE, the definition list for general interests doesn't line up like it does in FF.

http://www.boozards.com/home.php

Thanks

koyama
05-22-2007, 08:33 PM
At least one reason why your page is breaking in IE6 is because of the IE6 double float margin bug (http://www.positioniseverything.net/explorer/doubled-margin.html).

You'll need to fix that first. Read the article which also contains the fix which is to use display: inline to the affected floats.

aspekt9
05-22-2007, 11:13 PM
Ok, awesome. That fixed the gap between the two about me and stats boxes I had. However, the divs containing the definition lists are still oversized and stretching larger than their div container. It's only the divs with the definition lists that do this (comments, about me, fast stats, and general interests). Still that gab between the <dt>'s and <dd>'s. Also the <dt>'s and <dd>'s still don't line up in the interests in IE6 or IE7.

Thanks

koyama
05-22-2007, 11:37 PM
Ok, awesome. That fixed the gap between the two about me and stats boxes I had. However, the divs containing the definition lists are still oversized and stretching larger than their div container.
Same bug. Look carefully for all left margins on left floats. Also look carefully for all right margins on right floats.

Example: Here you need to add the red part because you have a left margin of 6em on a left floated element.


.stats dd
{
float:left;
margin:-1.2em 0 0 6em;
display: inline; /* IE6 double margin bug fix */
}

aspekt9
05-23-2007, 03:00 PM
Ok, that fixed all of the double float bugs and they're all the proper size. Now, for some reason all the blocks on the left look like they're set to clear everything on the right. But it's only in IE6 that this happens. Also, the <dt>'s and <dd>'s in the general interests box still don't line up in IE.

koyama
05-23-2007, 08:56 PM
Try to use this and you'll see what is wrong.


.homeblockcontainer
{
margin-top:20px;
width:284px;
float:left;
display:inline;
background: green;
}

.homecontentcontainer
{
width:600px;
float:right;
float: left;
background: red;
}

You need to adjust the width for each block.

aspekt9
05-23-2007, 09:13 PM
Awesome, so that fixed that problem. Now what about the <dt>'s and <dd>'s not lining up? Is it a matter of the width sizes for each?

koyama
05-23-2007, 11:24 PM
Now what about the <dt>'s and <dd>'s not lining up? Is it a matter of the width sizes for each?
Hmm.. Interesting. It must be an IE bug. Not sure which one though. I think I will take a look at it later. The floats are being placed too high up.

For now, to fix your problem, instead of this:


#interests dd
{
float:left;
margin:-1.2em 0 0 6em;
display: inline;
}
use this


#interests dd
{
float:left;
margin:-1.2em 0 0 6em;
display: inline;
clear: left;
width: 22em;
}



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum