Page 1 of 2

IE6 box height, showing extra pixels

Posted: Wed Jan 17, 2007 4:31 am
by Hurreman
Been designing a webpage lately, but since I upgraded to IE7 and then didn't get IE6 working as intended, I was unable to check what it looked like in IE6 until a co-worker did a test-run for me.
Now, I've been trying this and that to get rid of the bug, but I've run out of ideas. So as usual, I come here for brainstorming and advice.

I created a small test-page to illustrate the problem, and the code looks like this:

Code: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
	.tl {
		position: absolute;
		top: 0;
		left: 0;
	}
	
	.tr {
		position: absolute;
		top: 0;
		right: 0;
		background-position: 10px 0;
	}
	
	.br {
		position: absolute;
		bottom: 0;
		right: 0;
		background-position: 10px -10px;
	}
	
	.bl {
		position: absolute;
		bottom: 0;
		left: 0;
		background-position: 0 -10px;
	}
	
	.corner {
		width: 10px;
		height: 10px;
		background-color: #ccc;
		background-image: url(round.gif);
	}
	
	.spacer {
		width: 10px;
		height: 10px;
	}
</style>
</head>
<body style="background-color: #C0C0C0;">
<div style="width: 900px; margin: 0 auto;">

<div style="background-color: white; width: 200px; position: relative;height: 159px; margin: 0 auto; float: left;  margin: 10px">
	<div class="tl corner"><img src="images/transp_8x8.gif" class="spacer" /></div>
	<div class="tr corner"><img src="images/transp_8x8.gif" class="spacer" /></div>
	<div class="br corner"><img src="images/transp_8x8.gif" class="spacer" /></div>
	<div class="bl corner"><img src="images/transp_8x8.gif" class="spacer" /></div>
</div>

<div style="background-color: white; width: 200px; position: relative;height: 160px; margin: 0 auto; float: left; margin: 10px">
	<div class="tl corner"><img src="images/transp.gif" class="spacer" /></div>
	<div class="tr corner"><img src="images/transp.gif" class="spacer" /></div>
	<div class="br corner"><img src="images/transp.gif" class="spacer" /></div>
	<div class="bl corner"><img src="images/transp.gif" class="spacer" /></div>
</div>

<div style="background-color: white; width: 200px; position: relative;height: 259px; margin: 0 auto; float: left; margin: 10px">
	<div class="tl corner"><img src="images/transp.gif" class="spacer" /></div>
	<div class="tr corner"><img src="images/transp.gif" class="spacer" /></div>
	<div class="br corner"><img src="images/transp.gif" class="spacer" /></div>
	<div class="bl corner"><img src="images/transp.gif" class="spacer" /></div>
</div>

<div style="background-color: white; width: 200px; position: relative;height: 260px; margin: 0 auto; float: left; margin: 10px">
	<div class="tl corner"><img src="images/transp.gif" class="spacer" /></div>
	<div class="tr corner"><img src="images/transp.gif" class="spacer" /></div>
	<div class="br corner"><img src="images/transp.gif" class="spacer" /></div>
	<div class="bl corner"><img src="images/transp.gif" class="spacer" /></div>
</div>

</div>
</body>
</html>
I'm using a 20px * 20px image of a sphere and the use of background-position to create the corners using only one image.
Also, I noticed that in some browsers I needed to place a spacer gif within the corner div or the dimensions would be, messed up.
Here's a screenshot of the result in IE6, showing the bug on two of the boxes:

Image


As you can see, two of the boxes end up with one extra pixel of height, which shows up under the bottom corners. This would easily be fixed if I were using boxes with a fixed height, but since the content of the target webpage is dynamic, I'll end up with this bug whenever the box height is has an odd value (at least that's my conclusion).

Can anyone see what's causing the problem above, or know a solution/IE6 hack?

/ Fredrik

Posted: Wed Jan 17, 2007 11:30 am
by daedalus__

Code: Select all

.block .rnd
{
	padding: 0;
}

.rnd .top, .rnd .bottom
{ font-size: 1px; }

.rnd .content
{ padding: 1em; }

.rnd .content, .rnd .r1, .rnd .r2, .rnd .r3, .rnd .r4
{ border: 1px solid #ffdc00; border-width: 0 1px; overflow: hidden; background-color: #00001c; }

.rnd .r1, .rnd .r2, .rnd .r3, .rnd .r4
{ height: 1px; }

.rnd .r1 { margin: 0 5px; border: 0; background-color: #ffdc00; }
.rnd .r2 { margin: 0 3px; border-width: 0 2px; }
.rnd .r3 { margin: 0 2px; }
.rnd .r4 { margin: 0 1px; height: 2px; }

Code: Select all

	<div class="top"><div class="r1"></div><div class="r2"></div><div class="r3"></div><div class="r4"></div></div>
						<div class="content">

rounded corners						</div>
						<div class="bottom"><div class="r4"></div><div class="r3"></div><div class="r2"></div><div class="r1"></div></div>
					</div>

Posted: Wed Jan 17, 2007 2:39 pm
by RobertGonzalez
I think I experienced this once, and had to use a negative margin and the !important CSS flag. I can look around for my fix and see if it along the lines of what you want.

Posted: Wed Jan 17, 2007 4:35 pm
by matthijs
Yes, it's probably some rounding error deep inside the dungeons of the IE renderer.

The negative margin Everah suggested might work, or see if there's another way to do this in which it doesn't matter if there's a 1px shuffle.

Posted: Wed Jan 17, 2007 5:08 pm
by daedalus__
He is just trying to make rounded corners on his boxes right?

Posted: Wed Jan 17, 2007 5:18 pm
by RobertGonzalez
Yes, but he is using images as the corners and the background color is shining through that wonderful 1 pixel window that IE creates for you.

Posted: Thu Jan 18, 2007 2:18 am
by matthijs
And what if you remove the spacer gifs? I can't believe they are necessary. And also, they defy the whole idea of having separated your design (background images in css) from the content. I even think IE's problem could have something to do with them. IE always messes up the rounding errors with elements in the HTML.

Are the boxes a fixed width? In that case there's another solution, which I also described in this thread.

Posted: Thu Jan 18, 2007 3:22 am
by Hurreman
Solved the problem by skipping images alltogether and using nifty corners instead.
The reason I chose images in the first place was that I wanted antialiased corners, but meh, can't get everything.
You might call me lazy, but right now I just need to get the site ready for release. 8O

It's interesting really. Four months ago, I would've never used a pre-written library or script to solve a problem, or get results more quickly.
Suppose it's just not realistic to keep reinventing the wheel over and over again in a competative world. :roll:

Thanks for the replies tho! I'll try the suggested negative margin out when I got some more time to spare.

Posted: Thu Jan 18, 2007 9:18 am
by Hurreman
Hm, nevermind my last post.
When using serverside scripts to generate some content, the javascript takes too long to load which will end up in a very ugly transition after a few seconds.

I'll try some more to get rid of the extra pixel in my previous example and removing the spacer gifs, but I might end up doing them with static divs like Daedalus- described.

Posted: Thu Jan 18, 2007 10:37 am
by Kieran Huggins
if you have fixed widths, you could use a variation on the "sliding doors" method - google it, it was on alistapart a few years back

Posted: Thu Jan 18, 2007 12:42 pm
by daedalus__
That code I posted works fine in IE6 and Firefox 2, as far as I know. I borrowed the idea from a css website and then re-wrote the css to be about half as many characters. I have it in use on two websites.

Posted: Thu Jan 18, 2007 1:02 pm
by Kieran Huggins

Posted: Thu Jan 18, 2007 1:23 pm
by daedalus__
Kieran Huggins wrote:(cough) jquery (cough)

http://methvin.com/jquery/jq-corner.html
When you figure out how to force users to enable javascript, let me know!

Posted: Thu Jan 18, 2007 1:52 pm
by John Cartwright
I don't see using javascript a bad thing in this case, if it simplifies things. Javascript is used to enhanced features, if the user chooses to ignore these "enhancements" so be it.
When you figure out how to force users to enable javascript, let me know!
I take it you never use javascript then? I would rather serve 97/100 people with javascript enabled anyways :D

Posted: Thu Jan 18, 2007 4:23 pm
by Kieran Huggins
Just how important are rounded corners, anyway?

You could also render a giant jpeg for each page as well - no browser incompatibility at all!