Web Hosting Talk






PDA

View Full Version : Please Help (HTML Tables)

TrialityInc
01-25-2005, 03:16 PM
Hello,

I have recently started coding my new site http://www.caraudioportal.com/index2.php but I have run into a problem that I can't seem to figure out. The td background seems to go one pixel above the images and below them. There also seems to be a one pixel border of the td background that goes around them as well. I have created an image that should clear things up as this is kind of hard to explain (http://www.caraudioportal.com/images/problemtable.gif). Please take a look at the image and let me know if you still dont understand my problem. Here is how it is coded so far:




<html>
<head>
<title>Car Audio Portal - The Largest Car Audio Directory on the Internet!</title>
</head>
<body bgcolor="#ffffff" topmargin="0" leftmargin="0" rightmargin="0" bottommargin="0">
<table width="780" bgcolor="#ffffff" valign="top" align="center">
<tr>
<td>
<img src="/images/topbar.jpg" width="780"><br><img src="/images/logo.jpg"><img src="/images/headerright.jpg"><br><img src="/images/navbarleft.jpg" width="26"><img src="/images/home.jpg"><img src="/images/toprated.jpg"><img src="/images/newlistings.jpg"><img src="/images/myaccount.jpg"><img src="/images/accountsignup.jpg"><img src="/images/navbarright.jpg"><br><img src="/images/bottombar.jpg">
</td>
</tr>
</table>
<table width="780" cellspacing="0" cellpading="0" bgcolor="#ffffff" align="center">
<tr bgcolor="#ffffff">
<td background="/images/leftbg.jpg" width="171" valign="top"><img src="/images/quicksearch.jpg"><br>Test Test<br><img src="/images/bottomleft.jpg"></td>
<td bgcolor="#ffffff" width="7"></td>
<td background="/images/contentbg.jpg" width="425" valign="top"><img src="/images/contenttop.jpg"><br>Test Test<br><img src="/images/contentbottom.jpg"></td>
<td bgcolor="#ffffff" width="7"></td>
<td background="/images/rightbg.jpg" width="171" valign="top"><img src="/images/login.jpg"><br>Test Test<br><img src="/images/bottomright.jpg"></td>
</tr>
</table>
</body>
</html>


Thanks for everyone's time, I really appreciate it!
Jordan Blackburn
the_pm
01-25-2005, 03:50 PM
Seems to me the issue has to do with your use of the <br> tag. When you insert a non-breaking space into your code, the browser automatically makes room not only for characters and other inline content (like images), it also accounts for the space necessary to display letter descenders (found on letters like j, g, y, q, etc.), hence the few pixels of space you see.

Instead of placing breaks between your images, try wrapping them in <div>s. I'll assume you're not familiar with CSS, but if you were, I'd suggest giving the table a class or an id, and making a declaration for all images to be display:block, which would be an even more elegant solution. You may want to consider learning CSS regardless, as the method you're using to display your background images is not recognized by any standard used in browser production, and while most browsers are kind enough to support this method today, they are not obligated to do so, and it is very likely they will not in the future.