IE6 box height, showing extra pixels

JavaScript and client side scripting.

Moderator: General Moderators

User avatar
Hurreman
Forum Commoner
Posts: 61
Joined: Sat Apr 29, 2006 8:42 am

IE6 box height, showing extra pixels

Post 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
User avatar
daedalus__
DevNet Resident
Posts: 1925
Joined: Thu Feb 09, 2006 4:52 pm

Post 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>
User avatar
RobertGonzalez
Site Administrator
Posts: 14293
Joined: Tue Sep 09, 2003 6:04 pm
Location: Fremont, CA, USA

Post 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.
matthijs
DevNet Master
Posts: 3360
Joined: Thu Oct 06, 2005 3:57 pm

Post 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.
User avatar
daedalus__
DevNet Resident
Posts: 1925
Joined: Thu Feb 09, 2006 4:52 pm

Post by daedalus__ »

He is just trying to make rounded corners on his boxes right?
User avatar
RobertGonzalez
Site Administrator
Posts: 14293
Joined: Tue Sep 09, 2003 6:04 pm
Location: Fremont, CA, USA

Post 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.
matthijs
DevNet Master
Posts: 3360
Joined: Thu Oct 06, 2005 3:57 pm

Post 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.
User avatar
Hurreman
Forum Commoner
Posts: 61
Joined: Sat Apr 29, 2006 8:42 am

Post 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.
User avatar
Hurreman
Forum Commoner
Posts: 61
Joined: Sat Apr 29, 2006 8:42 am

Post 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.
User avatar
Kieran Huggins
DevNet Master
Posts: 3635
Joined: Wed Dec 06, 2006 4:14 pm
Location: Toronto, Canada
Contact:

Post 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
User avatar
daedalus__
DevNet Resident
Posts: 1925
Joined: Thu Feb 09, 2006 4:52 pm

Post 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.
User avatar
Kieran Huggins
DevNet Master
Posts: 3635
Joined: Wed Dec 06, 2006 4:14 pm
Location: Toronto, Canada
Contact:

Post by Kieran Huggins »

User avatar
daedalus__
DevNet Resident
Posts: 1925
Joined: Thu Feb 09, 2006 4:52 pm

Post 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!
User avatar
John Cartwright
Site Admin
Posts: 11470
Joined: Tue Dec 23, 2003 2:10 am
Location: Toronto
Contact:

Post 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
User avatar
Kieran Huggins
DevNet Master
Posts: 3635
Joined: Wed Dec 06, 2006 4:14 pm
Location: Toronto, Canada
Contact:

Post 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!
Post Reply