Jump to content


Photo

How to fix a gab between picture and cell


  • Please log in to reply
11 replies to this topic

#1 Wuhtzu

Wuhtzu
  • Members
  • PipPipPip
  • Advanced Member
  • 702 posts
  • LocationDenmark -> Fyn -> Aarup

Posted 09 October 2006 - 02:01 PM

Hey guys

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

http://wuhtzu.dk/ran...estion/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.

drm.html:
<!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>

main.css:
/*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;
	}


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....estion/drm.html
http://jigsaw.w3.org...&usermedium=all

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

Wuhtzu
Feel free to correct me if I'm wrong.

Servage.net: Get 25 Gb of extra storeage by using this coupon code when buying their hosting service - http://www.servage.n...oupon=cust42005

#2 Wuhtzu

Wuhtzu
  • Members
  • PipPipPip
  • Advanced Member
  • 702 posts
  • LocationDenmark -&gt; Fyn -&gt; Aarup

Posted 09 October 2006 - 02:11 PM

Changing

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

into

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

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?
Feel free to correct me if I'm wrong.

Servage.net: Get 25 Gb of extra storeage by using this coupon code when buying their hosting service - http://www.servage.n...oupon=cust42005

#3 Daniel0

Daniel0
  • Staff Alumni
  • Advanced Member
  • 11,956 posts

Posted 09 October 2006 - 02:12 PM

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

#4 Wuhtzu

Wuhtzu
  • Members
  • PipPipPip
  • Advanced Member
  • 702 posts
  • LocationDenmark -&gt; Fyn -&gt; Aarup

Posted 09 October 2006 - 02:22 PM

I knew someone would say that I should get rid of the tables :)
Feel free to correct me if I'm wrong.

Servage.net: Get 25 Gb of extra storeage by using this coupon code when buying their hosting service - http://www.servage.n...oupon=cust42005

#5 fenway

fenway
  • Staff Alumni
  • MySQL Si-Fu / PHP Resident Alien
  • 16,199 posts
  • LocationToronto, ON

Posted 10 October 2006 - 03:42 PM

I might have been the extra CR/LF.
Seriously... if people don't start reading this before posting, I'm going to consider not answering at all.

#6 Wuhtzu

Wuhtzu
  • Members
  • PipPipPip
  • Advanced Member
  • 702 posts
  • LocationDenmark -&gt; Fyn -&gt; Aarup

Posted 11 October 2006 - 01:47 AM

fenway, would be so kind to explain your self a little more?
Feel free to correct me if I'm wrong.

Servage.net: Get 25 Gb of extra storeage by using this coupon code when buying their hosting service - http://www.servage.n...oupon=cust42005

#7 fenway

fenway
  • Staff Alumni
  • MySQL Si-Fu / PHP Resident Alien
  • 16,199 posts
  • LocationToronto, ON

Posted 11 October 2006 - 10:52 PM

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.
Seriously... if people don't start reading this before posting, I'm going to consider not answering at all.

#8 Wuhtzu

Wuhtzu
  • Members
  • PipPipPip
  • Advanced Member
  • 702 posts
  • LocationDenmark -&gt; Fyn -&gt; Aarup

Posted 12 October 2006 - 01:46 AM

Thanks Fenway -> it actually worked:

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

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

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

Daniel0:
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...csstry/drm.html but I can't get it to work properly....


Feel free to correct me if I'm wrong.

Servage.net: Get 25 Gb of extra storeage by using this coupon code when buying their hosting service - http://www.servage.n...oupon=cust42005

#9 fenway

fenway
  • Staff Alumni
  • MySQL Si-Fu / PHP Resident Alien
  • 16,199 posts
  • LocationToronto, ON

Posted 12 October 2006 - 03:33 PM

It's up to the browser to decide what it wants to do with extra whitespace characters like this, I guess.
Seriously... if people don't start reading this before posting, I'm going to consider not answering at all.

#10 Wuhtzu

Wuhtzu
  • Members
  • PipPipPip
  • Advanced Member
  • 702 posts
  • LocationDenmark -&gt; Fyn -&gt; Aarup

Posted 12 October 2006 - 06:10 PM

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

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

should give the same output as

<html>

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

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

</html>


Feel free to correct me if I'm wrong.

Servage.net: Get 25 Gb of extra storeage by using this coupon code when buying their hosting service - http://www.servage.n...oupon=cust42005

#11 fenway

fenway
  • Staff Alumni
  • MySQL Si-Fu / PHP Resident Alien
  • 16,199 posts
  • LocationToronto, ON

Posted 12 October 2006 - 06:28 PM

It should matter... it depends on the tag.  Sometimes you just don't see any difference.
Seriously... if people don't start reading this before posting, I'm going to consider not answering at all.

#12 anatak

anatak
  • Members
  • PipPipPip
  • Advanced Member
  • 407 posts
  • LocationJapan, Fukuoka prefecture, Kitakyushu City

Posted 19 October 2006 - 06:26 AM

to get rid of tables you can look at
http://css.maxdesign...u/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
takasi.8008@docomo.ne.jp
tourokum@0508.jp




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users