formatting table using CSS with top and bottom border

Question

  <html xmlns="http://www.w3.org/1999/xhtml">
   <head>
   <title></title>
    <style type="text/css">
   li {
      display:inline;
      list-style-type:none; 
      padding-left:1em;
      margin-left:1em;
      border-left:1px solid #ccc;
      }
   li:first-child {
     border-left:none
   }


  </style>
 </head>
 <body>

<table  cellspacing="0px;" style="border-top-width:0.1px; 
 border-top-style:solid;border-top-color:#ccc; border-bottom-color:#ccc; 
  border-bottom-style:solid; border-bottom-width:0.1px;">
 <tr>
    <td>
          <ul>
           <li><a href="#">Item one</a></li>
            <li><a href="#">Item two</a></li>
            <li><a href="#">Item three</a></li>
             <li><a href="#">Item four</a></li>
          </ul>
    </td>
    </tr>
</table>
</body>

When i am runnning the code in google chrome top and bottom borders are not displayed while in IE they are. I also want to increase the line seperator height between li tags Am I following the right approach.Can anyone help

In firefox they are shown, too (tried via JSFiddle, but there's maintainance work going on, so no link. Copy/paste yourself.) — Martin Hennings, Feb 09 '12 at 15:43

score 1 · Answer 1 · answered Feb 09 '12 at 15:46

1

Change 0.1px to 1px One pixel is the smallest screen unit, you can't show .5 or .1 of a pixel :) In IE the border is shown because it rounds up to 1px and other browsers floor it down to 0px

answered Feb 09 '12 at 15:46

Zoltan Toth

46,981
12
120
134

how to increase the height of separator between li tags – coder25 Feb 09 '12 at 16:53

score 1 · Accepted Answer · answered Feb 09 '12 at 15:46

1

Use

border-top-width:1px;

and not

border-top-width:0.1px;

Your measurement is pixels, but your syntax is as if you are using em's.

This issue is also evident in your cellspacing tag.

answered Feb 09 '12 at 15:46

mmcglynn

7,668
16
52
76

if i want to increase the hight of separator between li tags...can u help – coder25 Feb 09 '12 at 15:54
To increase the height of separator between li tags. Add the border to the A tag and NOT the LI tag. Set the LI tag to display:block and height: 100%; – mmcglynn Feb 09 '12 at 15:59
@prerna I found this answer in the following post http://www.webdeveloper.com/forum/showthread.php?t=169547 - Using bottom padding on the
s works fine in FF, but IE6 doesn't like it for some reason. However, setting a bottom margin on the s (as well as setting them to block display to accept the margin) works fine for both browsers : Code: #thumbnails a {margin-bottom: 20px; display: block;}

Thilanka

Feb 09 '12 at 16:12

It is not increasing the height – coder25 Feb 09 '12 at 16:18

prerna, maybe post the height issue above to a new question? – mmcglynn Feb 09 '12 at 16:44

score 0 · Answer 3 · answered Feb 09 '12 at 15:45

0

Pixels are the smallest unit of visual display. There's no such thing as 0.1px;. While this may work in some situations, it's completely non-standard so don't depend on it.

answered Feb 09 '12 at 15:45

Diodeus - James MacFarlane

112,730
33
157
176

score 0 · Answer 4 · edited May 23 '17 at 12:03

0

The decimal value for the px (pixel) unit of measure is not allowed. You cannot use 0.1 value for px.

If you want to reach smaller width than a pixel (practice that i firmly discourage) use the unit of measure em

To understand the different behaviours I suggest this reply: Are the decimal places in a CSS width respected?

HERE you can find some nice tests.

edited May 23 '17 at 12:03

Community

1
1

answered Feb 09 '12 at 15:47

VAShhh

3,494
2
24
37

formatting table using CSS with top and bottom border

4 Answers4