Forum Moderators: not2easy

Message Too Old, No Replies

IE6 div bottom 1px showing

         

jman11

4:13 am on Dec 21, 2009 (gmt 0)

10+ Year Member



On IE 6, if i position an element to 0px from the bottom, with position: absolute, there is still a 1 pixel gap from the bottom. Im putting rounded corners on the edge of the div, it works fine for the top corners, but the bottom is 1px up from the bottom. If i change the padding on an inside element,sometimes it will be fixed, that is why I cant just do bottom: -1px; because sometimes it will work and then it will be messed up that way. Any ideas what im talking about and fixes for this?

picture of example:

[i47.tinypic.com...]

the black corners are what im trying to do, as you can see they are 1px from bottom

techtheatre

4:31 am on Dec 21, 2009 (gmt 0)

10+ Year Member



it is nearly impossible to answer without seeing the actual CSS you are using. one tip that may help is to make sure you always use a broad reset on all elements before you start so that every browser behaves similarly. you can easily find these by doing a google search for "css reset"

alias

12:01 am on Dec 22, 2009 (gmt 0)

10+ Year Member



This used to be a common issue in my experience. The simplest way to fix it is to use CSS expressions:

.bottom_left {
left: 0;
top: expression(this.parentNode.offsetHeight-10+"px");
} // if I remember correctly, it really was a while ago

It works like a replacement for bottom: 0, the -10 part is the height of the corner.

As far as I remember, doctypes and other quirky tricks did not help me solve this issue, so this is the closest I got to solving this annoying issue.

But hey, it's just IE6. Use this trick and forget it ;)

jman11

12:38 am on Dec 22, 2009 (gmt 0)

10+ Year Member



Yeh I know what the problem is, when you have dynamic heights, if the height is an odd number, it will generate a 1px margin on bottom. I just made it a 3 row div, top corners, content, bottom corners. Just float the corners