CSS and tables

lenora

I would like to create a block in which to display my links like this this one is done using a table and the cell have a white border but I would like to scrap the table and use CSS instead I have tried playing around with different things I currently have:

#nav !!
position: absolute;
top: 170px;
left: 648px;
width: 158px;
}

#nav a !!
font-family: Arial,Helvetica,sans-serif;
display: block;
padding: 8px;
color: white;
background: red;
border-bottom: 1px solid white;
border-top: 1px solid white;
border-left: 1px solid white;
border-right: 1px solid white;
text-decoration: none;
font-size:12px;
}

This places a white line around each link but you cant see the left and right border as the page background is white, anyone have any ideas

OldBear

Add some padding to #nav. e.g

#nav !!
position: absolute;
top: 170px;
left: 648px;
width: 148px;
padding: 5px
}

***Don't forget if you need a width of 158px to take the left and right padding off the width, in this case make it 148px.***

You can then add a margin-top and margin-bottom to '#nav a' to spread out your links boxes.

HTH

Bear

Edit: Not sure what the deal is on this site, outputting !! instead of the opening curly brace, but I'm sure you'd already spotted that.