Forum Moderators: open
The horizontal rule tage <hr> is now deprecated. Documents using it in many situations (inside a table cell, for example) will not validate (HR is a block-level element).
I want the effect of: <hr size=1 noshade>
Simple, huh? So what's the replacement?
I can get the look by stretching a grey 1px image, but I'm having trouble centering it within a table cell due to ...
Another issue:
Inside an align="left" table cell, I want one element in the middle of the cell's contents to be aligned to the center.
Invalid attempts that DO center the element:
<center>x</center>
<p align="center">x</p>
<div style="text-align:center">x</div>
Attempts that DON'T center the element:
<img align="center"> (invalid and no centering)
<span style="text-align:center"></span> (valid but no centering, of course, it's an inline element)
<object style="text-align:center"></object> (whatever)
The validator (W3C) says one possible cause is that I have attempted to put a block-level element inside an inline element. So, counting the TD as a block-level element, what is the solution to this, apart from putting a nested table in that cell just for the one centered element? There are definitely no other block-level elements within the TD.
I'm all for validating, but this is hard to understand ... and I've been writing HTML since TBL published his first public drafts, and SGML before that, for crying out loud!
hr's align, noshade, size and width attributes are deprecated in favor of CSS. You can use the height and width properties, or play with borders to change the appearance of an hr.
Invalid attempts that DO center the element:[...]
<div style="text-align:center">x</div>
The validator is reporting nothing invalid about that for me...
Within the table cell, there is a FONT tag.
The HR and the CENTER tags were fully contained within the FONT container.
That's what the validator was complaining about.
Was (similar to):
<font size="2">Text<br />
More text.<br />
<hr size=1 noshade>
More text.<br />
<center>More text.</center><br />
More text.</font><br />
Now is (similar to):
<font size="2">Text<br />
More text.</font><br />
<hr size=1 noshade>
<font size="2">More text.</font><br />
<center>More text.</center><br />
<font size="2">More text.</font><br />
Wow. Much better. Problem solved, but I don't agree with the spec on this one.
I don't agree with the spec on this one.
And what I mean is:
FONT is an inline element, like SPAN or A.
HR is a block level element, like DIV or P.
Why insist on complete separation to meet the spec?
Consider:
<font ... > <div ... > </div> </font>?
<FONT> in effect until modified in a block way (positioning) by <DIV>, then <DIV> in effect until </DIV>, then <FONT> until</FONT>.
Parent=>child rules remain in effect, if you want to assign block level elements as parents. Or inline level elements. Or whatever.
Rendering instructions in the block level element override those in the inline element. Positioning instructions are limited to block level elements, anyway, so there's no conflict.
Really, why not? How hard is that?
Ah'm jest sayin' ... :)
