How to fix a gab between picture and cell

Wuhtzu · October 9, 2006

Hey guys

I have this gab just beneath my banner and I can't locate my mistake.
The site:

http://wuhtzu.dk/random/denrigtigemening/phpfreaksquestion/drm.html

If you try clicking on the banner you'll see the dotted border (which appears when you press a picture-link) i around both the image and the gab -> I simply does not understand.

[b]drm.html:[/b]
[code]
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>

<head>
<title>denRIGTIGEmening.dk</title>
<link rel="stylesheet" type="text/css" href="style/main.css">
</head>

<body>

<table class="maintable" cellpadding="0" cellspacing="0">
<tr>
<td class="leftshadowsite"></td>
<td class="contentcell">

<table class="contenttable" cellpadding="0" cellspacing="0">
<tr>
<td class="banner" colspan="2"><a class="bannerlink" href="drm.php"><img alt="denRIGTIGEmening.dk" src="gfx/banner800x98.png"></a>
</td>
</tr>
<tr>
<td class="menucontainer" colspan="2">

<table class="menutable" cellpadding="0" cellspacing="0">
<tr>
<td align="center"><a class="menu" href="drm.php">   Blog</a></td>
<td align="center"><a class="menu" href="drm.php">Meninger</a></td>
<td align="center"><a class="menu" href="drm.php">Artikler</a></td>
<td align="center"><a class="menu" href="forum">Forum</a></td>
<td align="center"><a class="menu" href="drm.php">Om os   </a></td>
</tr>
</table>

</td>
</tr>
<tr>
<td class=dropshadow colspan="2" >
</td>
</tr>
<tr>
<td class="maincontent" valign="top">
</td>
<td class="rightcontent">

<table class="rightcontenttable" cellspacing="0" cellpadding="0">
<tr>
<td class="topdose" colspan="3">
</td>
</tr>
<tr>
<td class="leftdose">
</td>
<td class="centerdose">
</td>
<td class="rightdose">
</td>
</tr>
</table>

</td>
</tr>
</table>

</td>
<td class="rightshadowsite"></td>
</tr>
</table>

</body>

</html>
[/code]

[b]main.css:[/b]
[code]
/*Stylesheet for denRIGTIGEmening.dk*/

/* Main Layout */
html{
height: 100%;
margin: 0px 0px 0px 0px;
}

body{
margin: 0px 0px 0px 0px;
background-color: #727272;
height: 100%;
font-family: verdana;
}

img{
border: 0px;
}

table.maintable{
width: 866px;
height: 100%;
margin: 0px auto 0px auto;
}

table.contenttable{
width: 100%;
height: 100%;
}

td.contentcell{
width: 800px;
}

td.banner{
height: 98px;
}

td.menucontainer{
height: 30px;

}

table.menutable{
width: 800px;
height: 30px;
background-image: url(../gfx/menudrop800x30.png);
background-repeat: repeat-x;
}

td.dropshadow{
height: 16px;
background-image: url(../gfx/dropshadow800x16.png);
background-repeat: repeat-x;
}

td.maincontent{
width: 536px;
background-color: #C95F29;
}

td.rightcontent{
width: 264px;
background-color: #aa3e1c;
}

td.topdose{
height: 10px;
background-image: url(../gfx/topdose264x10.png);
background-repeat: repeat-x;
}

td.rightdose{
width: 9px;
background-image: url(../gfx/rightdose42x9.png);
background-repeat: repeat-y;
height: 100%;
}

td.leftdose{
width: 13px;
background-image: url(../gfx/leftdose42x13.png);
background-repeat: repeat-y;
height: 100%;
}

td.leftshadowsite{
background-image: url(../gfx/leftshadowsite420x33.png);
background-repeat: repeat-y;
width: 33px;
}

td.centerdose{
width: 242px;
height: 100%;
}

td.rightshadowsite{
background-image: url(../gfx/rightshadowsite420x33.png);
background-repeat: repeat-y;
width: 33px;
}

table.rightcontenttable{
width: 264px;
height: 100%;
}

/*LINKS*/
a{
text-decoration: none;
font-family: verdana;
}

a:link{
color: #000000;
}

a:visited{
color: #000000;
}

a:hover{
color: #FFFFFF;
}

a:active{
color: #FFFFFF;
}

a.menu{
text-decoration: none;
font-weight: bold;
}

[/code]

If I remove the doctype everything is fine, so I must be doing something which is not allowed in the HTML 4.01 Strict standard.
Suprisingly both my css and html validates perfectly in the w3 validator:

http://validator.w3.org/check?uri=http%3A%2F%2Fwuhtzu.dk%2Frandom%2Fdenrigtigemening%2Fphpfreaksquestion%2Fdrm.html
http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fwuhtzu.dk%2Frandom%2Fdenrigtigemening%2Fphpfreaksquestion%2Fstyle%2Fmain.css&usermedium=all

Please have a look at my code and tell me what I am not seeing!

Wuhtzu

Wuhtzu · October 9, 2006

Changing

[code]<a class="bannerlink" href="drm.php"><img alt="denRIGTIGEmening.dk" src="gfx/banner800x98.png"></a> [/code]

into

[code]<div class="banner"><a class="bannerlink" href="drm.php"><img alt="denRIGTIGEmening.dk" src="gfx/banner800x98.png"></a></div>[/code]

solved the problem, but I do not understand why there has to be a <div> there? Why can't <td> hold the image/link properly?

Daniel0 · October 9, 2006

In my opinion you shouldn't even use tables for this purpose as tables are for tabular data.

Wuhtzu · October 9, 2006

I knew someone would say that I should get rid of the tables :)

fenway · October 10, 2006

I might have been the extra CR/LF.

Wuhtzu · October 11, 2006

fenway, would be so kind to explain your self a little more?

fenway · October 11, 2006

Sometimes, when you have a hard-return in the HTML itself, you can extra spaces... this is very common when placing an IMG tag inside a A tag, but having each on its own line.

Wuhtzu · October 12, 2006

Thanks Fenway -> it actually worked:

I changed this:
[code]
<td class="banner" colspan="2"><a class="bannerlink" href="drm.php"><img alt="denRIGTIGEmening.dk" src="gfx/banner800x98.png"></a>
</td>
[/code]

into:
[code]
<td class="banner" colspan="2"><a class="bannerlink" href="drm.php"><img alt="denRIGTIGEmening.dk" src="gfx/banner800x98.png"></a></td>
[/code]

Of course it was IE showing it improperly -> I tested it using browsershots and all browsers, except IE, showed it without the gab... strange :S

[b]Daniel0:[/b]
If you have 20 minutes to spare of your life I would be more than happy to have you help me build the "layout" using css... I have tryed this; http://www.wuhtzu.dk/random/denrigtigemening/csstry/drm.html but I can't get it to work properly....

fenway · October 12, 2006

It's up to the browser to decide what it wants to do with extra whitespace characters like this, I guess.

Wuhtzu · October 12, 2006

But am I not corrent when i say it should not matter how you
HTML wrote?

[code]
<html><head><title>Somepage</title></head><body><a href="somewhere"><img src="image.gif"></a></body></html>
[/code]

should give the same output as

[code]
<html>

<head>
<title>Somepage</title>
</head>

<body>
<a href="somewhere"><img src="image.gif"></a>
</body>

</html>
[/code]

fenway · October 12, 2006

It should matter... it depends on the tag. Sometimes you just don't see any difference.

anatak · October 19, 2006

to get rid of tables you can look at
http://css.maxdesign.com.au/floatutorial/
tutorial 9 is the one you might be most interessted in

I did not try it myself (too busy at the moment)

good luck
anatak

Sign In

How to fix a gab between picture and cell

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Archived

Important Information