[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" ( &middot; / &#x00B7; / &#183;) or a "Black Circle" ( &#x25CF 
/ &#9679; )
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