Forum Moderators: not2easy
IE7 and FF are fine, but for some reason IE6 leaves 1 px gap, like the image is at 1px on the bottom.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style>
BODY {
width: 980px;
margin: 20px auto;
background: #b1b1b1 url( 'images/body-background.gif') repeat-x;
}
#header {
position: relative;
height: 149px;
background: green;
}
#header IMG {
position: absolute;
bottom: 0;
}
</style>
</head>
<body>
<div id='header'>
Some text and things
<img src='/images/header-image.jpg'>
</div>
</body>
</html>
Green background added to show up the pixel!
I tweaked my layout and used it as a background image.
I'd still like an answer though if anyone has one, I'm sure this will come up again.
[edited by: Dabrowski at 4:55 pm (utc) on Sep. 26, 2008]
I'd try to see what IE7.js gives.
If the image is presentational only, then probably best as a background. Some possible reasons for the "gap" might be that the image was inheriting a padding or margin from elsewhere in the cascade, or the image sizes were not exactly matched (easy to do with images with transparency)
Fix for the first is to use the generic reset (or apply direct to the image):
* {
padding:0;
margin:0;
border:none;
}
I thought IE6 did bottom ok, but not bottom and top for sizing.
There can't be any inheritance or IE7 and FF would also display the gap, but IE6 may be allowing for a possible border if it was a hyperlink?
I'll have a play again and report back.
I thought IE6 did bottom ok, but not bottom and top for sizing.
There can't be any inheritance or IE7 and FF would also display the gap
but IE6 may be allowing for a possible border if it was a hyperlink
However, that question suggests there is more than the provided code. I couldn't reproduce the issue on the provided code which indicates the issue lies elsewhere - and there are so many coding possibilities speculating "what if's" is probably less helpful than maybe posting a bit more code.
For what its worth, in my experience every time I thought I've had this issue its been caused by inadvertently incorrectly sizing an image with transparency. Simple, silly and works every time. ;)
The more strange, is that when I set the parent div's height smaller than 544 pixels, and it prevents browser from adding scrollbar, there is no 1pixel gap! but as soon as the height of the parent div is big enough for vertical scrollbar to appear, it also causes 1pixel gap to appear in the end of the image... Ain't it a BUG?!
everything is ok in Opera.
this is original code:
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<style type="text/css">
<!--
}#div-parent {
position:relative;
height:550px;
width:502px;
background-color: blue;
margin: 0px;
padding: 0px;
z-index:1;
}#div-child {
position:absolute;
bottom: 0;
right: 0;
width: 502px;
height: 183px;
margin: 0px;
padding: 0px;
z-index:2;
background-color: yellow;}
-->
</style>
</head><body bgcolor="#FFFFFF">
<div id=div-parent>
<div align=right id=div-child><img src="img/183pixels.jpg" width="502" height="183"></div>
</div>
</body>
</html>
[edited by: SuzyUK at 7:12 pm (utc) on Oct. 1, 2008]
[edit reason] Please No URI's code is fine :) [/edit]
* html #header img { margin-bottom: -1px; }i know it's not ideal, but it should work alright.
IE does have it bugs but not too sure if this one of them or not.. IE has rounding errors (not a bug) at times where positioning is concerned, but I'm not sure this issue is one of those times as that usually is just 1px and I'm getting a 2-3px gap on pasting this code
re: earlier questions
IE can cope with right/bottom positioning coordinates. but perhaps not at the same time as left/top is used - & though I think huge inroads have been made in that area in IE8, I haven't tested lately
This I think is either an (inline) whitespace issue (that's a bug) or a rounding issue.. if it's a rounding issue then there's not much to be done .. however for the whitespace issue try making the image {display: block;} and see if that helps.. if not let us know!
PS: just saw Londrums reply, that might help out if it's the rounding issue at the least it might make it less noticeable
let us know, there are some discussions on the 1px rounding error somewhere and we could try a search if you're still having a problem
I couldn't reproduce the issue on the provided code
The first rule is strip code to minimum. So I did a little test page to reproduce the error, and that is it, in full.
You are looking in IE6 aren't you?
I didn't even have an image, you can even see the fault with the broken image icon if you compare between IE6 and IE7.
can't you just put
I could but...I know CSS has more quirks than quirks mode, but I'm sure I shouldn't have to use a hack to get a simple image to line up properly.
This I think is either an (inline) whitespace issue (that's a bug)
The same thought occured to me while reading some of the comments above. I'll try display block, I cen't believe I didn't put that in anyway, I don't yet think I've found a use for an inline image.
Interesting that you're getting a 2-3px gap though, is that with an actual image or just the broken icon?
Neither FF3, safari nor opera show a blue box.
They all 3 show an image in the lower right corner of the viewport.
IE6 does show a big blue box
IE6 also show the image on the left right under that blue box.
Now looking at the code:
Goes to show to always validate your html and CSS.
I then added
body {
background-color: red;
}
<sarcasm>
Just add this to your code:
<body>
<!--[if IE 6]>
<h1 style="color: red"><blink>Upgrade your browser</blink></h1>
<![endif]-->
You are looking in IE6 aren't you?
You could persuade your entire audience to visit and view exclusively on my set-up ;)
Otherwise I suggest please don't allow my comments to distract as it looks like I'm not adding anything of much help.
... fumbling for magnifying glass ...
----
Mods is it worth splitting off #3756925 and responses before things get complicated?
Dabrowski, have you tried doing nothing more with your example code than setting the heading height to 150px?
I tested a range of even/odd numbers, up/down from 149px and best I can figure the issue only appears on odd numbers.
Can anyone confirm this - or should I just put my name down for a guide dog?
I tested a range of even/odd numbers, up/down from 149px and best I can figure the issue only appears on odd numbers.
I didn't see the rounding error just guessed at it, but that Dabrowski is the exact symptom. (the guide dog is safe ;)) it's more commonly seen with right positioning (IE)
the negative 1px bottom margin or bottom: -1px; might be the best bet - it will mean 1px is chopped off the bottom of the image at times but that might be preferable to the 1px "border"
[added] found this older thread [webmasterworld.com] on the issue
[edited by: SuzyUK at 7:44 am (utc) on Oct. 2, 2008]
Given this is all positioned, another option would be to replace
bottomtop---
It makes sense to me that relative units can lead to rounding issues, but it is not intuitively obvious (to me) why rounding errors arise in an example using px.
I modified Dabrowski's example and fixed every measurement, then set all positions to absolute (including HTML and body - bizarre). That removed all the variables/triggers for rounding issues mentioned in the materials I could find. That sugested the issue is how px are translated to screen (and perhaps computed values), which led me to materials about TWIPs - and more. Bleeeh!
Would someone be kind enough to provide/point to an explanation suitable for a non-hardware techie for a "rounding" error when there isn't an "obvious" need for rounding (in the code)?
[edit]to clarify question[/edit]
Also remember that IE has its problems with position: relative; so that's just another anomaly to take into account especially in IE6 and below
and lastly a pixel is technically a relative unit of length [w3.org] too. Now I know that it's relative to the screen resolution and that if that doesn't change why should it matter, but to me that does mean that some sort of calculation is going on to find the exact co-ordinate for positioning, and that each UA will use its own method.
Anyway after all this I did actually manage to see it, but only when the document was in Quirks mode (no Doctype, I pasted the code exactly as above) for IE7, and once I fired up IE6 it was apparent regardless of rendering mode, so perhaps it really is older style calculation problem, that has been dealt with in IE7
IE never could count ;) it appears that if the width/height of the parent is odd numbered the 1px shift appears (as Dabrowski already found!), this suggests, to me anyway, that in order to find the right or bottom IE was dividing the width by 2 at some point (hence the rounding down).. perhaps they did this in all their calculations for some reason, didn't centering using the positioning method also have problems?
Who knows? it appears it's on its way to being fixed and the usage of a proper Doctype should help - which makes sense as they did a lot with positioning in IE7 (e.g. allowing us to support all four co-ordinates at once), so they must have changed their calculation method?
edited: sorry screen resolution not size!
[edited by: SuzyUK at 11:34 am (utc) on Oct. 2, 2008]
[edited by: Dabrowski at 4:21 pm (utc) on Oct. 2, 2008]
setting the heading height to 150px
Nope, as I mentioned it has to line up with a body background image. And yes I guess I could chop a pixel off that, but I shouldn't have to, so I won't.
another option would be to replace bottom positioning with top
Simple solutions are always the best!
there isn't an "obvious" need for rounding (in the code)?
If Microsoft stuck to code they needed, Vista wouldn't come on a DVD.
the width/height of the parent is odd numbered the 1px shift appears (as Dabrowski already found!),
The credit for finding the cause really has to go to alt131, nice one.
ok, display: block didn't fix it, so I changed from bottom: 0 to top: 40px (my image is 109px tall) and that did fix it.
Out of interest, tried top: 0 and no gap with that one.
Better solution as I've still managed to code this site with no IE6 hacks. I'm trying to use alternate methods, and tweaking designs to accomodate IE6. I really don't like having separate stylesheets for IE6/7 and IF IE tags in the code everywhere.
It's been (and still is being) a good experience, making me think more about my methods and cleaner code at the end of it.
Thanks all for suggestions and help! :¬)
didn't centering using the positioning method also have problems
The credit for finding the cause really has to go to alt131, nice one.
Oh yes sorry alt131 :o it's your your hat tip!
Dabrowski, yes there are no problems with the margin auto method.. but I seem to remember this 1px shift thing occurs with centering using the AP centering method.. not that I've used it - it just rings a bell.. anyway it's likely the exact same issue if it is.. or if I'm mistaken then it's a non-issue ;
The credit for finding the cause really has to go to alt131, nice one.
and lastly a pixel is technically a relative unit of length too.
Out of interest, tried top: 0 and no gap with that one
topGiven the top/left centric approach to drawing it makes sense (to me) there will be less difficulty identifying top/left - and that any measurement "discrepancies" will be "passed on"/appear at bottom/right.
IE never could count ;)
For me, I get (what I assume are) rounding errors in horizontal measurements whenever dealing with a divisor or technique that produces an odd number measurement - as would be expected. What was interesting was this appeared in a vertical example - consistent with the
bottomI'm trying to use alternate methods, and tweaking designs to accommodate IE6. I really don't like having separate stylesheets for IE6/7 and IF IE tags in the code everywhere.
I wonder why swa66 did not see that 1pix blue line in IE6... yes, there were some mistakes like "}" and "align=right" in my code (sorry for 'dirty' code), but even now when I cut them away I still get the same result. So that mistakes do no affect 1px gap problem. I expected that different computers may display different results, and that's why I attached a screenshot to my first post to illustrate the problem, but no external links were allowed here.
I think that to make the poisition "top:666" instead of "bottom:0" is the only one solution of the problem, and I will use it. But I still can not understand why such a simple operation/property causes such a big troubles for the browser. The more strange, is that 1 pixel gap does not happen always, but depends on the scrollbar... maybe swa66 has large screen resolution, and thats why my code with 550 px height of the div doesn't work? When I set height for, say, 300 px, I also do not get any 1pixel gaps. I do not get it until the height of the page requires a scrollbar. My resolution is 1024x768.
swa66, can you, please, try to change parent div style to this? just to check out whether gap will appear or not:
#div-parent {
position:relative;
height:100%;
width:502px;
background-color: blue;
margin: 0px;
padding: 0px;
z-index:1;
}
...and add some text after the divs like that:
<body bgcolor=white>
<div id=div-parent>
<div id=div-child><img src="img/183pixels.jpg" width="502" height="183"></div>
</div>masdmfkas <br>
masdmfkas <br>
masdmfkas <br>
masdmfkas <br></body>
Margin -1 is not very nice, cuz it requires to add a special code to define which browser is used by client: otherwise in Opera it results in puting my image down on 1px (it is not hard, but it is additional script, and I did not want it)
Some interesting links about rounding error, SuzyUK! thanks for the info on the issue.
this is good board, many clever people and fast replies!
[edited by: Fokel at 10:45 pm (utc) on Oct. 3, 2008]
maybe swa66 has large screen resolution
Personally I'd not make too much out of it. Those still using IE6 need some incentive to upgrade after all.
I do agree this forum "works" and allows one to learn a lot.
