...

View Full Version : CSS Alignment issues for IE6



TheShaner
05-18-2007, 06:18 PM
I'm having some alignment issues in IE6. For some odd reason, I'm having weird <1px gaps and overdone margins.

www.espinc1.com/esptest/index.asp
www.espinc1.com/esptest/services.asp
www.espinc1.com/esptest/simulation.asp

On the first page, you'll notice that there are really small gaps that are smaller than 1px on each side of my images for ESP & Related News, Licensed Awards, and Applicable Links. I had to add in some CSS hacks to up the margin and width of the sidecolumn for IE6 (using the > selector) to get the images more "normal" looking than it was, but it's still not flush on either side. The ESP image is also overlapping because the margin-right: 5px on the maincolumn is farther than it should. If I hack to 3px, it still overlaps on the left, but if i go down to 2px, it's now too far to the right. How???

If you look at the other two pages, you'll see the same problem with my breadcrumb bar and other images all being pushed to the left due to IE6 screwing up the margin-right on maincolumn.

What is the exact cause of this problem? Is there a way to fix this? Is it bad CSS on my part? I've never seen something like this before until now. FF2 and IE7 display perfectly.

-Shane

koyama
05-18-2007, 07:03 PM
What is the exact cause of this problem? Is there a way to fix this? Is it bad CSS on my part? I've never seen something like this before until now. FF2 and IE7 display perfectly.
Are you aware of the IE6 doubled float margin bug (http://www.positioniseverything.net/explorer/doubled-margin.html)?

Example:


#sidecolumn {
float: left;
padding: 0;
margin: 0 0 0 3px;
display: inline; /* IE6 magical fix for doubled float margin */
width: 195px;
background-color: #eee;
color: #000;
font-family: verdana, arial;
font-size: 0.8em;
text-align: left;
}

IE6 will double the left-margin for a left float. Same doubling occurs for right-margin on right floats. This bug has been fixed in IE7.

You can, but don't need to feed IE6 separately with the shown fix above. You can just put it in your normal style sheet as show. The fix is neutral in the sense that the CSS specification requires the display value to compute to display: block for floated elements even when display: inline is specified.

TheShaner
05-18-2007, 08:28 PM
Wow o wow! Thanks a bunch Koyama. Actually, I hadn't heard of it. I'm still teaching myself new things in CSS and that is one problem I never came across before. It's hard to keep up with all the CSS issues, esp. with IE6-.

Thanks again! It's all fixed and looking perfect now!

-Shane



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum