Jump to content

Archived

This topic is now archived and is closed to further replies.

Wuhtzu

How to fix a gab between picture and cell

Recommended Posts

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">&nbsp;&nbsp;&nbsp;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&nbsp;&nbsp;&nbsp;</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

Share this post


Link to post
Share on other sites
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?

Share this post


Link to post
Share on other sites
In my opinion you shouldn't even use tables for this purpose as tables are for tabular data.

Share this post


Link to post
Share on other sites
I knew someone would say that I should get rid of the tables :)

Share this post


Link to post
Share on other sites
I might have been the extra CR/LF.

Share this post


Link to post
Share on other sites
fenway, would be so kind to explain your self a little more?

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites
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....

Share this post


Link to post
Share on other sites
It's up to the browser to decide what it wants to do with extra whitespace characters like this, I guess.

Share this post


Link to post
Share on other sites
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]

Share this post


Link to post
Share on other sites
It should matter... it depends on the tag.  Sometimes you just don't see any difference.

Share this post


Link to post
Share on other sites
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

Share this post


Link to post
Share on other sites

×

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.