layout problems in IE6

[PunkSktBrdr01]

I'm making a site for someone, and I used tables for the layout. I'm assuming this is the problem, because the site displays perfectly in the latest versions of Mozilla Firebird and Opera. Strangely, though, IE6 is adding space under some images. Here're links to the screen shots:

http://www.radioactiverabbit.com/dbaudio/images/screen_ie.jpg
http://www.radioactiverabbit.com/dbaudio/images/screen_mf.jpg
http://www.radioactiverabbit.com/dbaudio/images/screen_op.jpg

Please help. Also, if you have any other suggestions regarding the layout, please tell me. Thanks so much!

[PeOfEo]

I would help you but I am going to need a link or I will need to see some source code. I cant work on screen shots alone.

[PunkSktBrdr01]

Oh, sorry, I forgot to include that stuff. Here's a link to the site:

http://www.radioactiverabbit.com/dbaudio

Thanks!

[PeOfEo]

Well for the bottum one you will need to make an image that spans across the whole cell and then change the cell back color, or you can use the css margin property.
<img src="" style="margin-bottom: -1px;"> you will need to play with the value, by using a - number it creates some overlap so that will get rid of any gap I would assume. The top problem looks like its in your css, and as we all know mozilla reads css far better then ie so it will read the code properly, you might need to dumb down your css. Woul you please post your css code, well maybe Ill just get it, I was just too lazy to type the url for it and download the file.

[PeOfEo]

Um, I was looking at your css file, whats with all of the foriegn characters? A lot of these the little boxes where a character cant be displayed and its real hard to read. Would you please post the css you wrote so people can read it?

[PunkSktBrdr01]

Here's my CSS:


A {
font-family:Times New Roman, Times, serif;
font-size:12px;
cursor:pointer;
color:#6C2B29;
background-color:transparent;
}
A:link {
text-decoration:none;
}
A:visited {
text-decoration:none;
}
A:hover {
text-decoration:underline;
}
body {
margin:0;
color:#000000;
background-color:#6C2B29;
font-family:Times New Roman, Times, serif;
font-size:12px;
}
td#top {
background-image:url("images/toplines.gif");
background-repeat:repeat-x;
background-color:#6C2B29;
width:100%;
height:16px;
}
td#leftbar {
background-color:#6C2B29;
width:140px;
vertical-align:top;
}
div#leftnav {
background-color:#000000;
width:100%;
text-align:center;
vertical-align:top;
font-size:24px;
}
td#titlebar {
background-color:#6C2B29;
width:100%;
height:36px;
vertical-align:top;
}
td#titleunder {
background-color:#000000;
height:22px;
}
td#titlefull {
background-color:#FFFFFF;
width:100%;
height:30px;
vertical-align:middle;
}
td#content {
background-color:#FFFFFF;
vertical-align:top;
}
td#lct {
background-color:#FFFFFF;
vertical-align:top;
}
td#lcb {
background-color:#FFFFFF;
vertical-align:bottom;
}
td#footer {
background-color:#6C2B29;
vertical-align:middle;
}
img {
border:0;
}
table {
background-color:transparent;
border:0;
}
table#main {
background-color:#FFFFFF;
border:0;
}
tr {
border:0;
}
td {
font-size:12px;
spacing:0;
padding:0;
}
hr {
background-color:#000000;
color:#000000;
}
.left {
text-align:left;
}
.center {
text-align:center;
}
.right {
text-align:right;
}
.justify {
text-align:justify;
}
.header {
font-size:20pt;
}


Thanks again!

[Ricardo Celma]

ok, the problem in IE6 is that it gets the spaces between your tags, so you can eliminate that by eliminating the spaces, for example, if you have:
<td>
<img src="#">
</td>
it will give you a space, but if you put it like this:
<td><img src"#"></td>
you will not get any gaps