|
|
Posted by Martin Jay on 05/11/06 08:47
In message <1147319846.805763.29750@u72g2000cwu.googlegroups.com>,
kemton@kemton.com writes
>I have a table in which I'm using css to set up the options of the
>page, and I cannot get the spacing to do what I want.
>
>In the following html page, I would like for the table with Sublink1,
>2, and 3 to be directly against Link 3. Right now there is a gap of
>about 5 pixels. I would appreciate any suggestions on how to resolve
>this:
Your problem is that by default your "tb_lb" main table has the
attribute:
border-collapse: separate;
This is what gives you the white boarder around each box and, of course,
you also get an unwanted border at the bottom of the first three boxes.
Changing it to:
border-collapse: collapse;
would simply bunch all of the boxes together.
Why don't you use everyone's friend: the unordered list? Something like
the example I've pasted below gives you the same effect as your table
design. I've kept the general layout similar to yours so that you can
understand the modifications. I've also changed the font sizes from px
to em to avoid text sizing problems with everyone's favourite browser.
:)
<html>
<head>
<title></title>
<style type="text/css">
body {
margin-top: 30px;
font-family: Arial, sans-serif;
}
ul.tb_lb {
margin: 0;
padding: 0;
list-style-type: none;
}
ul.tb_internal_lb {
margin: 0;
padding: 0;
list-style-type: none;
}
li.lb_ml {
width: 104px;
border: 1px black solid;
background: #D0D0D0;
padding-left: 5px;
font-weight: bold;
font-size: 1em;
margin-top: 3px;
text-align: left;
}
li.lb_sl {
width: 86px;
border: 1px black solid;
background: #B0B0B0;
padding: 2px 0px 2px 15px;
font-weight: bold;
font-size: .8em;
margin: 0;
text-align: left;
}
</style>
</head>
<body>
<center>
<ul class=tb_lb>
<li class=lb_ml>Link 1<//li>
<li class=lb_ml>Link 2</li>
<li class=lb_ml>Link 3</li>
</ul>
<ul class=tb_internal_lb>
<li class=lb_sl>Sublink1
<li class=lb_sl>Sublink2
<li class=lb_sl>Sublink3
</ul>
<ul class=tb_lb>
<li class=lb_ml>Link 4</li>
<li class=lb_ml>Link 5</li>
<li class=lb_ml>Link 6</li>
</ul>
</center>
</body>
</html>
--
Martin Jay
[Back to original message]
|