PDA

Click to See Complete Forum and Search --> : vertical align does not work

6StringGeek
02-13-2009, 03:39 PM
This is driving me nuts. This is a simple menu using *cough* a table. For some reason it does not align vertically. I colored the background and put borders on the menu items to make it obvious. I always thought tables stretched for content...

I am not smart about tables...so it could be my lack of experience getting me. Any help appreciated!

Here's the html:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>nav</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="wrap">
<table width="100%" border="0">
<tr>
<td><a href="#" title="#">about us</a></td>
<td><a href="#" title="#">products</a></td>
<td><a href="#" title="#">something</a></td>
<td><a href="#" title="#">contact</a></td>
<td><a href="#" title="#">shopping</a></td>
</tr>
</table>
</div>
</body>
</html>

and the css:
html,body {
height:100%;
font:100.1% tahoma, sans-serif;
}

body {
background:#fff;
text-align:center;
margin:0 auto;
}

#wrap {
width:960px;
margin:0 auto;
padding:0;
}

a {
color:#000;
font-size:.8em;
text-decoration:none;
text-align:center;
letter-spacing:3px;
margin:0 auto;
padding:4px 20px;
background: #fff;
font-weight: normal;
vertical-align: middle;
border: 1px solid #000;
}

A:link {text-decoration: none}
A:visited {text-decoration: none}
A:active {text-decoration: none}
A:hover {text-decoration: underline; color: red;}

table {
background: #bbb;
}
slaughters
02-13-2009, 04:02 PM
What is happening ? is "about us" wrapping to two lines ?

Can't quite figure out what you mean by "align vertically".

If it what I think, either add a "nowrap" attribute to the TD tag (or white-space:nowrap to the anchor tag class)

P.S.

The "vertical-align: middle;" style is not supported/horribly supported by most browsers that I am aware of. In CSS you have to fake it with margin and padding
6StringGeek
02-13-2009, 04:07 PM
What is happening ? is "about us" wrapping to two lines ?

Can't quite figure out what you mean by "align vertically".

If it what I think, either add a "nowrap" attribute to the TD tag (or white-space:nowrap to the anchor tag class)

P.S.

The "vertical-align: middle;" style is not supported/horribly supported by most browsers that I am aware of. In CSS you have to fake it with margin and padding

Thanks for your reply. No, there is no wrapping, the links with a white background do not sit in the table with the grey background. They drop down like 2 pixels or so below the grey container.

### PIC ATTACHED ###
slaughters
02-13-2009, 04:19 PM
Ahh...

You did not mention, but it looks like you are using Firefox, not IE (looks fine in IE, messed up in Firefox)

You are running across a bug (well I consider it a bug) in Firefox when assigning padding to an inline element versus a "block" (has layout) element.

Add a display:block to the anchor tag CSS and the TD's should expand and contract it's height the way you expect.
6StringGeek
02-13-2009, 04:25 PM
Genius. Thanks so much for taking the time to help me. That fixed it. :)