applying values to hyperlinks in tables (even!)

[Wozza]

Wasabi!

This is in my stylesheet:

<h1>
{
font-size:10pt;
font-weight:normal;
color:#999999;
text-decoration:none;
text-align:justify
}

And this is in my html page:

<table>
<tr>
<td>
<a href="index.html">
<h1>
go back to the index page</a>
</td>
</tr>
</table>

So, no worries, the formatting's applied, and all is groovy. But if I change 'P' in the stylesheet to 'td' (so that the formatting applies to all tabledata cells), I only get some of the formatting. It's justified, and it's the right size, but it's blue and underlined, which is no good. I imagine this has something to do with being applied to a hyperlink...
How would I get around it?

Cheers-
Wozza

[Charles]

For CSS to work, you must start with well formed HTML and that is not well formed HTML. And you are not supposed to use TABLEs for layout. Before you try to learn CSS you need to read, mark, learn and inwardly digest the HTML 4.01 Specification (http://www.w3.org/TR/html4/).

[Aronya1]

The only thing I see that isn't "well formed HTML" is that you didn't close your <h1> tag.

In terms of the question you asked, it would help if we could see your CSS code for the <td> tag.

I think you're on the right track (hyperlink is the issue). Have you designated your link, visited, hover, etc properties?

[Charles]

The HTML and the CSS are both invalid as well as the HTML not being well formed. The inline element A cannot contain the block level element H1 and the selectors in CSS do not look like start tags.

[Aronya1]

Charles,

OK, so the rule says put the <a> tag inside the <h1> tag, right? Seems to work either way, though.

What do you mean "the selectors in CSS do not look like start tags?" I don't follow.

[Wozza]

Ah. First of all, the < and > around h1 in the css are typos (I've checked, and they're not in the .css file). Sorry about that.
As far as using tables for layout, I don't know of any way that css could do what the table does in this case. The actual HTML on the page looks like:

<center>
<table width="300" height="100%" border="0">
<tr>
<td>
</td>
</tr>

<tr>
<td height="200" width="300" background="images/bg.jpg">
The content goes here. It's centered in the page, regardless of resolution or window size (until the window is smaller than the cell). Incidentally, the content is a hyperlink.
</td>
</tr>

<tr>
<td>
</td>
</tr>
</table>
</center>

Perhaps you could explain what you mean by 'not well formed HTML'.

Back to the original question, the CSS for the td tag goes like this:

td
{
font-size:10pt;
font-weight:normal;
color:#999999;
text-decoration:none;
text-align:justify
}

As always, cheers.
Wozza

[pyro]

Originally posted by Wozza
As far as using tables for layout, I don't know of any way that css could do what the table does in this case.It cerainly can. And with less (and much more intuitive) code, at that. Also, you don't have to use the depreciated <center> tag.

http://www.infinitypages.com/research/cssverticalcentereddiv.htm

[Wozza]

aha...

in that case, I guess I'll just be shutting up and go fiddle some more, then. =P

Cheers-
Wozza

*edit*
But wait! How to I substitue the table's 'valign' property? For instance, I have a lot of pages, and I want all of them to display the text they contain (some long, some short), centered on the page (vertically and horizontally) If I was to go through and set up the div height and margin for every page...well...that'd be no fun at all.

Many thanks for your continued help (I haven't received a single bullet or black orchid in the mail! Only some anthrax, but as far as I can work out, that was from an unrelated...er...)

Cheers-
Wozza

[Da Warriah]

Originally posted by Wozza
But wait! How to I substitue the table's 'valign' property?

div {
vertical-align: top;
}

should work fine;)

[Wozza]

Arm...just to be a pain in the arse...=P

This doesn't seem to work (although no doubt that's my fault again). I have:

#navdiv
{
position:absolute;
vertical-align: center;
top: 50%;
left: 50%;
width:66px;
height:216px;
margin-top: -108px;
margin-left: -204px;
background: black
url("images/bg1.bmp");
overflow: hidden;
}

This appears on the page, no worries, and all the other properties work fine...

Cheers-
Wozza

[Da Warriah]

baseline | sub | super | top | text-top | middle | bottom | text-bottom | <percentage>

valid properties of vertical-align, as shown here:

http://builder.cnet.com/webbuilding/pages/Authoring/CSS/table.html

you probably want "middle";)