Previous Message
Next Message

Bullets/ Centering in tables

Sent by Peter Frederiksen on 27 September 2005 08:08


I'd like to have a standard box for framework and 'quicklinks'. Generally the information in the
boxes is going to be tabular, so not surprisingly I'm using tables.

In order to separate the rows in an orderly fashion I want to use bullets - which in other words
means inserting them into the <TD>s.

Unfortunately this causes a lot of problems, and after quite a few hours I'm wondering if anyone
could point me in the right direction? If you know of a failproof way of creating bullets in tables
with full crossbrowser compatibility the help would be greatly appreciated.

- If using regular bullets, they're almost invisible in Opera, and it's impossible for me to figure
out settings that give a reasonable crossbrowser result margin-wise.

- Inserting a div with black background solves the problem in every browser except IE, which decides
to ignore the predefined height and sets a height of 2-3 times what it should be. Neither padding
nor margin solves this issue. If it matters, it seems that the height-problem occurs when the width
is set.

- In order to account for the height problem I used a div without setting the width, and only
setting top and bottom borders (tried the top at first only, but IE messed that up too). This works
in all browsers except for one issue: IE doesn't center the div.

- Next I tried replacing the div with a <HR> with the wanted dimensions. In the win-versions of IE6,
FF, NN8 and Opera8 the problems seem *almost* solved, but now the <TD>s have absurd
height-properties in IE - and I can't find a way to change this.

- Even more ridiculous is the fact that if I try using a simple 4*4 jpeg with black background IE
aligns it slightly above the vertical center, while Firefox aligns it somewhat below.

The code has gotten to be extremely messy but here's the gist .... and it should copy/paste easily
into any doc.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

<html xmlns="">
        <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
                 table {margin: 0; padding: 0;}
                 td { margin: 0; padding: 0; horisontal-align: center;vertical-align: center;
                      text-align: center;}

                 a, a:visited {text-decoration: none;}

                 #FrameBox {float: right; margin: 0 0 10px 10px; padding: 2px 10px 10px;
                                   width: 250px; border: 2px solid #000;
                                   font:11px/11px verdana, arial, helvetica, sans-serif;
                                   display: inline;}

                 #FrameBox table {width: 100%;}
                          #FrameBox .td1 {width: 6px;}
                          #FrameBox .td2 {horisontal-align: left; text-align: left;}
                          #FrameBox .td3 {width: 40px;}
                          #FrameBox .td4 {width: 30px;}

                 #FrameBox HR {
                          margin: 1px 0 0;
                          padding: 0;
                          width: 5px;
                          height: 5px;
                          background-color: black;
                          color: black;}
                               body:last-child #FrameBox HR {width:5px; height: 6px;}
                              * html #FrameBox HR {width:5px; height: 5px;}

                 /* Just some colouring to accentuate the problem */
                          #FrameBox .td1 {background-color: magenta;}
                          #FrameBox .td2 {background-color: yellow;}
                          #FrameBox .td3 {background-color: green;}
                          #FrameBox .td4 {background-color: silver;}



<div id="FrameBox">
        <table><tr> <td class="td1"><HR></td>
                          <td class="td2"><A HREF="#">This link might stretch over several lines. So
we're just forcing it a bit. And some more until it gets there.</A></td>
         <table><tr> <td class="td1"><HR></td>
                          <td class="td2"><A HREF="#">Link to something</A></td>
         <table><tr> <td class="td1"><HR></td>
                          <td class="td2"><A HREF="#">Link to something else</A></td>
        <table><tr> <td class="td1"><HR></td>
                          <td class="td2"><A HREF="#">And yet another link</A></td>

        Another Header
        <table><tr> <td class="td1"><HR></td>
                          <td class="td2">Some item</td>
                          <td class="td3"><A HREF="#">html</A></td>
                          <td class="td4"><A HREF="#">pdf</A></td>
        <table><tr> <td class="td1"><HR></td>
                          <td class="td2">Another Item</td>
                          <td class="td3"><A HREF="#">html</A></td>
                          <td class="td4"><A HREF="#">pdf</A></td>
 </div><!-- End FrameBox -->


css-discuss [EMAIL-REMOVED]]
List wiki/FAQ --
Supported by --
Previous Message
Next Message

Message thread: