Space between banners within table

**erikdiamond** · 03-28-2012, 01:25 AM

Hi guys,

Please visit my site and take a look at the side bar on the right there there are several banners within a table. The problem is I tried to figure out why the web browser wont show space between banners.

I have tried <br /> (see codes below) and <td> or <tr> height space &nsp. Still does not work. It looks fine on dreamweaver but does not work on chrome, IE, and firefox. So I wondering if you can help correct the following codes that I might overlooked:

Code:

 <table width="250" border="0" cellspacing="0" cellpadding="0" bgcolor="#f0eddc" align="center">
<tr>
<td>              
<table width="100%" border="0" cellspacing="0" cellpadding="5" bgcolor="#373737">
 <tr>
<td align="center" style="font-family: Helvetica, sans-serif; font-size: 11px; color: #373737; line-height: 10px;">
 <img src="http://www.tribulationsigns.com/usana/img/healthaa.jpg" width="248" height="70" alt="banner1" />
 <br />
 <img src="http://www.tribulationsigns.com/usana/img/resetbanner.png" width="248" height="70" alt="banner1" />
 <br />
 <img src="http://www.tribulationsigns.com/usana/img/diet.png" width="248" height="70" alt="banner1">
 <br />
 <img src="http://www.tribulationsigns.com/usana/img/sense.png" width="248" height="70" alt="banner1" />
 <br />
 <img src="http://www.tribulationsigns.com/usana/img/discount248x190.png" width="248" height="190" alt="banner1" />
 <br />
<img src="http://www.tribulationsigns.com/usana/img/opp248x190.png" width="248" height="190" alt="banner1">
 </td>
 
  </tr>
  </table>
           
  </td>
  </tr>
  </table>
          <!-- END OF sidebar Table -->

Thank you!

**jedaisoul** · 03-28-2012, 06:34 AM

Tables should not be used for markup. Use DIVs.

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Test</title>
<link href="Dstyle.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="sidebar">
<div class="sidebox1">
<img src="" width="248" height="70" alt="banner1">
</div>
<div class="sidebox1">
<img src="" width="248" height="70" alt="banner1">
</div>
<div class="sidebox1">
<img src="" width="248" height="70" alt="banner1">
</div>
<div class="sidebox1">
<img src="" width="248" height="70" alt="banner1">
</div>
<div class="sidebox2">
<img src="" width="248" height="190" alt="banner1">
</div>
<div class="sidebox2">
<img src="" width="248" height="190" alt="banner1">
</div>
</div>
</body>
</html>

CSS:

/* CSS Document */
body {
font-family: "Arial", "Helvetica", sans-serif;
margin: 0px;
background-color: #DFEFFE;
}
#sidebar {
width: 250px;
float: left;
background-color: #f0eddc;
}
.sidebox1 {
width: 100%;
margin-top: 8px;
margin-bottom: 8px;
border: thin solid black;
}
.sidebox2 {
width: 100%;
margin-top: 8px;
margin-bottom: 8px;
border: thin solid black;
}

**erikdiamond** · 03-28-2012, 11:05 AM

Jedaisoul,

Thank you very much. I borrowed a html email template that come with table tags which probably explain why I was having some issues. I should have start using div tags instead!

Once again, thanks!

Erik

Thread: Space between banners within table

Thread Tools

Display

Space between banners within table

Thank you

Thread Information

Users Browsing this Thread

Tags for this Thread

Bookmarks

Bookmarks

Posting Permissions