[thelist] some css issues
James Hardy
evolt at weeb.biz
Thu Dec 9 10:03:31 CST 2004
And lo; it came to pass that the great prophet, evolt at mccullough-net.com
spake. And the huddled masses rejoiced to hear:
> I'm having a bit of an issue with with one of my css sytles blowing out a
> table.
> The table should be height 22, and is until I put this one section.
>
> Before:
>
> ##############################################################################
> .logo {padding-left: 20px; vertical-align: middle;}
> .top {vertical-align: middle; align-text: right;}
> .topmenu {color: #FFF;font-family: "Trebuchet MS", Verdana, Arial,
> Helvetica;font-weight: bold;font-size: 14px;text-transform:
> uppercase;text-decoration: none;text-align: center;}
>
> ##############################################################################
>
> ##############################################################################
>
> <table width="750" cellspacing="0" cellpadding="0" border="1">
> <tr>
> <td class="logo"><img src="images/logo.gif" height="22" width="159"
> border="1"></td>
> <td class="top"><a href="#" class="topmenu">series</a><a href="#"
> class="topmenu">line</a><a href="#" class="topmenu">healer</a><a href="#"
> class="topmenu">order</a></td>
> </tr>
> </table>
>
> ##############################################################################
>
> After:
> ##############################################################################
> .big_dot {color: #C00;font-family: "Trebuchet MS", Verdana, Arial, Helvetica;
> font-size: 36px; padding-left: 20px; padding-right: 20px }
> .logo {padding-left: 20px; vertical-align: middle;}
> .top {vertical-align: middle; align-text: right;}
> .topmenu {color: #FFF;font-family: "Trebuchet MS", Verdana, Arial,
> Helvetica;font-weight: bold;font-size: 14px;text-transform:
> uppercase;text-decoration: none;text-align: center;}
>
> ##############################################################################
>
> ##############################################################################
>
> <table width="750" cellspacing="0" cellpadding="0" border="1">
> <tr>
> <td class="logo"><img src="images/logo.gif" height="22" width="159"
> border="1"></td>
> <td class="top"><a href="#" class="topmenu">series</a><font
> class="big_dot">.</font><a href="#" class="topmenu">line</a><font
> class="big_dot">.</font><a href="#" class="topmenu">healer</a><font
> class="big_dot">.</font><a href="#" class="topmenu">order</a></td>
> </tr>
> </table>
>
> ##############################################################################
>
> ----------------------------------------------------------------
> This message was sent using IMP, the Internet Messaging Program.
>
What this is caused by (I think) is that big dot. Because it is at 36pt,
the line height gets increased proportionally, I would guess that is
is rendering in quirks mode, which will overrides the height of tables.
when something is to overflow
There are a few possible solutions for you.
1) try setting the line-height property to something small
2) don't try and make a full-stop look big, replace it with either an
image or one of the appropriate entities; I would recomment either a
"Mid Dot" ( · / · / ·) or a "Black Circle" ( ●
/ ● )
3) trying to lay it out with floated and styled block elements rather
than applying styles to Tables and Fonts, both of which are depreciated
for layout purposes
4) Seeing if applying a standard doctype declaration, to push the page
into standards compliants mode.
let us know if you need any more info on any of these.
James
More information about the thelist
mailing list