...

View Full Version : Pixel off in IE with position right or bottom and border



Skotty
08-22-2008, 08:42 PM
It seems in some situations in IE, when you have a 0px right or bottom positioned element in a div with a border, a pixel of space can occur between the positioned element and the border. Has anyone encountered this before and found an easy solution for it? From my testing so far, this doesn't seem to occur in Firefox or in Safari. The version of IE I am using is 6.0.

Example:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Border Gap Test</title>
<script type="text/javascript">
var w = 200;
var h = 200;
function increaseDivSize() {
document.getElementById("div1").style.width = ++w + "px";
document.getElementById("div1").style.height = ++h + "px";
}
</script>
</head>
<body>
<input type="button" value="Increase Size" onclick="increaseDivSize()">
<p>Watch for a gap between the red box and the black bordered box as the black bordered box's size is increased.</p>
<div id="div1" style="position: relative; width: 200px; height: 200px; border: 5px solid black">
<div style="position: absolute; right: 0px; bottom: 0px; width: 50px; height: 75px; background: red">
</div>
</div>
</body>
</html>

effpeetee
08-23-2008, 06:11 PM
This is a screen shot at 400&#37; on my PC using IE7.
I can't see any gap.
It shows on my IE6 simulator but only at certain magnifications.

Look in the Sources program below. It has some IE6 items in it.

This seems interesting (http://www.positioniseverything.net/explorer.html)

Might be helpful.

But why aren't you using CSS?

Frank

Skotty
08-25-2008, 05:55 PM
Don't know how closely you looked at it, but the gap only occurs when the outer div is an odd width and/or height.

Here is a further simplified version with no script:



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Border Gap Test</title>
<style type="text/css">
#div1 {
position: relative;
width: 200px;
height: 200px;
border: 5px solid black;
margin: 10px;
float: left;
}
#div2 {
position: relative;
width: 201px;
height: 201px;
border: 5px solid black;
margin: 10px;
float: left;
}
.inner {
position: absolute;
right: 0px;
bottom: 0px;
width: 50px;
height: 75px;
background-color: red;
}
</style>
</head>
<body>
<p>Look for a gap between the red box and the black border on the following two scenarios:</p>
<div id="div1">
200 x 200
<div class="inner">
</div>
</div>
<div id="div2">
201 x 201
<div class="inner">
</div>
</div>
</body>
</html>


In this version, the box on the right side has a 1 pixel gap between the red box and the black border. The box on the left has no gap. The only difference is the outer div size.

Skotty
08-25-2008, 05:58 PM
Attached is a snapshot of how it looks on my screen.

Marcel-
11-22-2008, 05:14 PM
Hi Scotty, just wondering: did you solve this problem? I have the same experience in IE.

abduraooft
11-23-2008, 03:24 PM
Hi Scotty, just wondering: did you solve this problem? I have the same experience in IE.
Make a new thread for you and explain the issues. Please post link to your page also, or at least all code (HTML +CSS). Here is another sample layout (http://www.bonrouge.com/3c-hf-fluid.php)

Skotty
11-25-2008, 02:29 AM
I have not found a solution for this. I switched to using top/left positioning only. Not as convenient, but never is with IE.

Excavator
11-25-2008, 02:41 AM
I have not found a solution for this. I switched to using top/left positioning only. Not as convenient, but never is with IE.

I've been playing with it off and on for a day or two and I haven't figured it out either. We need the bughunter to figure out what's happening.

jhaycutexp
11-25-2008, 05:20 AM
check for this kind of invalid styles..


right: 0px; bottom: 0px;


if you clear those.. maybe.. maybe... it'll fix your thing...



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum