Viewing Thread:
"Slight CSS porblem"

Right, I have a table in which I want the text aligned verticaly middle.

div.middle a {
display:block;
width:160px;
height:50px;
color: #FFFFFF;
text-decoration:none;
font:16px verdana;;
text-align:center;
}

This is what I have so far. I've tried using vertical align. Problem is that it moves the entire table down and not just the text. Any ideas?

Use inline, just define it in two (or three if you're paranoid) different elements.

eg. my current PHP crappy testpage: [URL] http://iscribbler.com/ntemplate [/URL]

Has the following CSS for it's list:

#nav ul {
margin-left: 0;
padding-left: 0;
display: inline;
}

#nav ul li {
margin-left: 53px;
list-style: none;
display: inline;
}


#nav ul li.begin {
margin-left: 0;
border-left: none;
list-style: none;
display: inline;
}

I know, it's ugly, but whatever.

Well I've done that but the problem is that I need to display them as a block and an inline for it to work properly, however I can't.

Inline makes the list horizontal and crappy
Block makes the list vertical and good

I want it horizontal and good. Any ideas?

Damarus wrote:
> The one you helped me with is this one.
> [URL]http://www.damarus.co.uk/webdesigns/design2/[/URL]

Bwhahahaha. lovely test image.

Use lists.

There's plenty of reasons now, in fact, so many I don't have time to list them.

Here's an article on it:

[URL] http://www.alistapart.com/articles/taminglists/ [/URL]

What's wrong with using tables for links?

Aah tables.

*Dies*

I prefer designing websites than I do building them so I have quite a few on the go.

The one you helped me with is this one. [URL]http://www.damarus.co.uk/webdesigns/design2/[/URL]

I know.

Wouldn't have suggested it if it didn't...

:D

Glad it does. How's your site coming? Care to link to a preview?

Thanks Coin. Works perfectly.

It can be done!

Just a quick google and I remembered an old bookmark, Ten CSS tricks you may not know [ULR] http://www.webcredible.co.uk/ [REMOVETHIS] user-friendly-resources/css/css-tricks.shtml [/URL].

So basically:

"Specify the line height to be the same as the height of the box itself in the CSS. In this instance, the box is 2em high, so we would insert line-height: 2em into the CSS rule and the text now floats in the middle of the box - perfect!"