Another SideBar Question - CSS forum at WebmasterWorld - WebmasterWorld

Forum Moderators: not2easy

Message Too Old, No Replies

Another SideBar Question

Invisable Margin

SynergyWD

6:12 pm on Aug 16, 2004 (gmt 0)

10+ Year Member

In the code below, there are eight cells within a bar. What I need is for the top cell to touch the top of the bar. (There is another bar above it and I don't want a double border, it looks un-professional. ) I can't seem to find what is holding the cells away from the bar. Can someone help me!

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">

<html>
<head>
<meta name="generator" content="HTML Tidy for Windows (vers 1st February 2004), see www.w3.org">

<title>Sean's Live > Home</title>
<link rel="stylesheet" type="text/css" href="Styles.css">
</head>

<body bgcolor="#A5B7DA">
<table class="sidebar">
<tr>
<td class="baritem">My Family</td>
</tr>
<tr>
<td class="baritem">My Friends</td>
</tr>

<tr>
<td class="baritem">News</td>
</tr>

<tr>
<td class="baritem">Aviation</td>
</tr>

<tr>
<td class="baritem">Music</td>
</tr>

<tr>
<td class="baritem">Web Design</td>
</tr>

<tr>
<td class="baritem">Gallery</td>
</tr>

<tr>
<td class="baritem">Fun Junk</td>
</tr>
</table>
</body>
</html>

CSS:

.baritem
{
font-size: 14px;
text-align: center;
float: center;
font-weight: bold;
background-color: #A5B7DA;
color: #19253C;
width: 16.8%;
}

.sidebar
{
font-size: 14px;
text-align: center;
float: left;
width: 16.8%;
font-weight: bold;
background-color: #6986C1;
color: #19253C;
}

createErrorMsg

7:12 pm on Aug 16, 2004 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

1.

float: center;

This is not actually a value for float. Floats can be left, right, or none. To center something with CSS you can use margin: 0 auto; and/or text-align: center;. (Just for kicks, try switching float:center; to float:left; and see what happens to the space you mentioned.)

2. Try setting margin and padding on both elements to 0. More than likely, there is a default margin getting in the way.

3.You've set that table to float, which is something I've never seen before. I imagine it will work fine, but you might consider switching to <div>s if floating the table causes problems.

DrDoc

8:37 pm on Aug 16, 2004 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

By default, most browsers give table cells a padding of 2 pixels, and applies a 2px gap between the cells. Something like this should take care of that.

table {
border-collapse: collapse;
}
td {
margin: 0;
padding: 0;
}

SynergyWD

8:55 pm on Aug 16, 2004 (gmt 0)

10+ Year Member

Thanks for the tips, I finally got the margin set to null. It took an entire redesign of the sidebar but it was well worth it! Thanks again.