Topic: CSS - Has Me Dizzy!

From my web page URL below, take a look at the orange box with blue text. I set the padding to 5px all four sides. There is more open space on the bottom below the blue text. Using Windows IE, and Mac Safari you see less but still noticeable. It shows more open space on Windows and Mac using FF.

Any suggestions on how to make the text, or an image vertically align just right using CSS?

Thank you.

http://www.meetkenyans.com/xhtml/box.html

Re: CSS - Has Me Dizzy!

You'll want to take a look at the margin setting as well.  There's a difference between how IE and Firefox/Safari/any good browser render padding and margin settings.

Also, try using "padding: 5px" to save yourself some typing :-)

Re: CSS - Has Me Dizzy!

Thank you danger. I was testing all four sides before on the padding to see what would come from it. I could vertically align to the middle when the bottom padding was 2px instead of 5px using FF. But then Safari you could see the vertical align to the middle was still not right.

I just played with the margins and there was no difference.

Re: CSS - Has Me Dizzy!

I have now set it up so it is easier to see. No matter what I do to the margins or padding there is still a little bit of space below the text. Will that space always be there, or is there a hack to get rid of it so my vertical alignment of text can be perfect in the middle?

http://www.meetkenyans.com/xhtml/box.html

http://www.meetkenyans.com/xhtml/box2.html

Re: CSS - Has Me Dizzy!

found this the other day.

http://exanimo.com/css/vertical-centeri … oated-shim

found from hicksdesign:

http://www.hicksdesign.co.uk/journal/ve … a-shiv-div

The trick is usually to set a negative margin half the height of the containing element. At least that is what I remember...

just my $0.02

Re: CSS - Has Me Dizzy!

Not sure what your after besides the middle alignment. But this is one way of doing it.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <title>three ooo's</title>
        <meta http-equiv="content-type" content="text/html;charset=iso-8859-1" />
<style type="text/css">
html,body {height: 100%; margin: 0; padding: 0 }
#middle {height: 100%; margin: 0 }
#inner {position: absolute; height:20px; width: 130px; top: 50%; margin-top: -10px; border: 1px green solid}
p { margin: 0; font-size: 30px; line-height: 20px; padding: 0}
</style>

</head>

<body>
    <div id="middle">
        <div id="inner">
            <p>three ooo's</p>
        </div>
    </div>
</body>
</html>


You can place an object like this by using height, 50% top and half the value of height in negative. Make sure you set the html, body like I have.

About that margin around the text I'm not sure. I think it has something to do with line-height. I've managed to remove it, but these are fixed values. I would be glad to find an explanation to this so you can used "fluid" values instead.