Jump to content

How to fix a gab between picture and cell


Wuhtzu

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
Link to comment
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?
Link to comment
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....

Link to comment
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]

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

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.