This is the only piece of CSS that keeps eluding me. I've read all the W3C documentation, but no mater what I do, my element is still at the top.
Can someone please tell me what I need to do to get this thing to work (in all browsers)?Vertical-align is kind of a squirlly property to get ahold of. Most times its only use is vertically aligning inline elements within a line of text. Then the W3C throws a wrench into the works by letting vertical-align work on block elements if they are contained in a table cell.
vertical-align for inline elements: Inline elements are rendered on a line, and each line has a height. You can align inline elements within a line using the vertical-align property. Copy and paste the code below to see a simple example:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Markup Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css" media="screen">
<!--
div {
background-color: #fcc;
line-height: 3em;
}
span {
background-color: #cfc;
line-height: 1.2em;
}
-->
</style>
</head>
<body>
<div>
Regular text
<span style="vertical-align: top;">top text</span>
Regular text
<span style="vertical-align: bottom;">bottom text</span>
Regular text
<span style="vertical-align: middle;">middle text</span>
</div>
</body>
</html>
vertical-align for table cell content: This will vertically align any element, block or inline, to the top, bottom or middle of a table cell. This is synonymous with the valign HTML attribute.
Beyond this, I can't really resolve your problem unless I see your HTML and CSS.aha I see... of course it wasn't working I hadn't used the line-height property. The difference in height was due to padding, which after all isn't included in the 'height'.
thanks!
Can someone please tell me what I need to do to get this thing to work (in all browsers)?Vertical-align is kind of a squirlly property to get ahold of. Most times its only use is vertically aligning inline elements within a line of text. Then the W3C throws a wrench into the works by letting vertical-align work on block elements if they are contained in a table cell.
vertical-align for inline elements: Inline elements are rendered on a line, and each line has a height. You can align inline elements within a line using the vertical-align property. Copy and paste the code below to see a simple example:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Markup Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css" media="screen">
<!--
div {
background-color: #fcc;
line-height: 3em;
}
span {
background-color: #cfc;
line-height: 1.2em;
}
-->
</style>
</head>
<body>
<div>
Regular text
<span style="vertical-align: top;">top text</span>
Regular text
<span style="vertical-align: bottom;">bottom text</span>
Regular text
<span style="vertical-align: middle;">middle text</span>
</div>
</body>
</html>
vertical-align for table cell content: This will vertically align any element, block or inline, to the top, bottom or middle of a table cell. This is synonymous with the valign HTML attribute.
Beyond this, I can't really resolve your problem unless I see your HTML and CSS.aha I see... of course it wasn't working I hadn't used the line-height property. The difference in height was due to padding, which after all isn't included in the 'height'.
thanks!