Webmaster Forum / HTML, CSS, Scripts / CSS / June 2006

I think you're asking for trouble using floats inside a table and mixing
% and em values in that way.  Try re-sizing the font in your browser
window and see how it all breaks.

Anyway, if you still want to go down that route, this will give the same
effect in both IE and Firefox:

CSS:

td.hrs {text-align:center}
.hr {float:left; width:45%; display:block;}
.a {display:block; margin-left: 1em; margin-right: 1em; float:left}

HTML:

<td colspan="4" class="hrs">
       <div class="hr"><hr /></div>
       <div class="a"><a href="#content">Top</a></div>
       <div class="hr"><hr /></div>
</td>

I've basically just put the three elements inside their own float.

Perhaps a slightly better ways to achieve this effect is to give the
<td> a background image containing a line, and then place the text over
in a <span> with a 1em border left and right:

CSS:

td{
       width: 200px;
       background: (url: image name) no-repeat;
       text-align: center;
}
span{
       background-color: White;
       border-left: 1em White solid;
       border-right: 1em White solid;
}

HTML:

<td><span>Hello</span></td>