CSS and DIV Problem

[Squintz]

When i use the following in my css it wont shrink the height to 5

div {}

#divbottom {
position:absolute;
top:420px;
left:157px;
width:500px;
height:5px;
background-color:#F76BFF;
}

Every thing else looks fine but the height stays at about 20px and i need it to goto about 5-10px

am i doing something wrong

[Squintz]

http://www.domainwebdesigns.com/centerHTML.html

Take a look here to see what i mean

[La Gal]

Hmm, I'm thinking maybe this is a IE bug, because when I set the font/line-height for #divbottom to less than the div height everything seems to work fine. Netscape 6.2 showed the div correctly without the font/line-height set.

#divbottom {
position:absolute;
top:420px;
left:157px;
width:500px;
height:5px;
background-color:#F76BFF;
font:3px/3px;
}

[Squintz]

thanx works great but what exactly is font:3px/3px;

what is its purpose

[La Gal]

It's shorthand for:

font-size:3px;
line-height:3px;

I have no idea why this works to fix the div height problem you were having. As I said, it must be an Internet Explorer bug???

You would normally use it when specifying fonts for an element, for example:

p {font:bold verdana,sans-serif 12px/18px;color:#000;background:#fff;}

is the same as:

p {
font-weight:bold
font-family:verdana, sans-serif;
font-size:12px;
line-height:18px;
font-color:#000000;
background-color:#ffffff;
}

Both examples are valid style declarations.

The line-height sets the distance between lines.

[BrainJar]

You need to set the overflow property to keep the DIV contents from showing outside the area specified by the width and height:

#divbottom {
position:absolute;
top:420px;
left:157px;
width:500px;
height:5px;
background-color:#F76BFF;
overflow: hidden;
}

[La Gal]

overflow: hidden;

Oh goody! I tried for ages yesterday to figure something out other than a line-height hack. For some reason that one never occurred to me…