Web Hosting Talk







View Full Version : Small Gap after images (using html and css)


Goldfiles
01-02-2006, 04:04 PM
Take a look at: http://www.goldfiles.com/css/layout.html

There is a small white gap right after the logo that is messing up all of the tables. I am using HTML with CSS for text and table formatting. Here is my code:

HTML:
<td class="topleft">
<table class="topleft">
<tr>
<td class="topleft1">

</td>
</tr>

<tr>
<td class="topleft2">
<img src="logo.png" />
</td>
</tr>

<tr>
<td class="topleft3">
<span class="span2">^ Part of the Digital Download Network</span>
</td>
</tr>
</table>
</td>


CSS:

.table2
{
width: 829px;
height: 113px;
margin: auto;
border-collapse: collapse;
vertical-align: top;

}

.topleft
{
width: 330px;
border-style: none;
border-width: 0px;
border-collapse: collapse;
padding: 0px;
}

.topleft1
{
background-image: url('l_abovelogo.png');
height: 27px;
}

.topleft2
{
height: 40px;
padding: 0px;
vertical-align: top;
border-spacing: 0px;
}

.topleft3
{
background-image: url('l_belowlogo.png');
padding: 0px;
height: 46px;
border-spacing: 0px;
}


Table2 is the table, topleft1,2,3 are the rows in the table.

How can I remove that white gap after my images?

Goldfiles
01-02-2006, 04:06 PM
It works just fine in FireFox, but IE is causing the white gap problem. Ideas?

emevas1977
01-02-2006, 04:29 PM
Try having it all one line

<td class="topleft2"><img src="logo.png" /></td>

emevas1977
01-02-2006, 04:31 PM
also, this is a fairly simple layout that can be done without tables. Have u tried that also.

Just a suggestion

Goldfiles
01-02-2006, 04:43 PM
ah great!! Thanks a bunch! I put it all on one line

<td class="topleft2"><img src="logo.png" /></td>

and that did the trick. thanks again!

emevas1977
01-02-2006, 04:46 PM
no problem, i had that problem a ton of times before