wibbler
08-28-2006, 04:59 PM
I have a page here:
http://www.wibbler.com/glasswerk
The two left hand blocks ("Editorial" and "7 Day Spotlight") should be the same height. However, the bottom black border on each block are different sizes in IE and Firefox. Is there any way to get both table TD heights the same so the black borders don't expand in different browsers?
ronaldb66
08-29-2006, 09:41 AM
I strongly recommend cutting back on using tables for layout and presentation and turning to Cascading Style Sheets (CSS) a lot more; your markup is riddled with multiply nested tables and spacer gifs, deprecated presentational attributes, etc, which not only makes the markup much more bulky, slower to load and harder to render than needed, but also creates layout problems like the one you're experiencing.
I took out a snippet of the markup concerning these two blocks, with extensive indentation to properly show the structure--and the madness:
<td valign="top" bgcolor="#000000">
<table align="left" cellpadding="2" cellspacing="0">
<tr>
<td valign="top" bgcolor="#FFFF82" onMouseOver="this.style.backgroundColor='#FEFF5F'" onMouseOut="this.style.backgroundColor='#FFFF82'"><a href="band.php"><img src="images/7day_band.jpg" alt="" width="161" height="152" hspace="2" vspace="2" align="left" /></a>
</td>
<td bgcolor="#FFFF82"><img src="images/spacer.gif" alt="" width="1" height="1" />
</td>
<td valign="top" bgcolor="#FFFF82">
<table cellpadding="0" cellspacing="2">
<tr>
<td>
<div align="center">
<a href="band.php" class="editorialheader">
<h3>When will this be finished?</h3>
</a>
Jack Cook takes a look at timescales, and discovers CIA involvement. <img alt="" src="images/spacer.gif" width="130" height="1"><br />
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<td bgcolor="#FF9933"><img src="images/spacer.gif" alt="" width="15" height="1" /></td>
<td bgcolor="#000000" valign="top">
<table cellpadding="2" cellspacing="0">
<tr>
<td valign="top" bgcolor="#FFFF82"><a href="band.php"><img src="images/7day_band.jpg" alt="" width="115" height="108" hspace="2" vspace="2" /></a></td>
</tr>
<tr>
<td valign="middle" bgcolor="#FFFF82" align="center"><a href="band.php" class="7dayband">Aqualung</a><br /> </td>
</tr>
</table>
</td>
Basically, there are three table cells--presumably in a table of their own, one of which is a superfluous spacer cell, and the outer two contain the actual content.
Then, nested tables, and more nested tables, and a div, are piled on to somehow achieve the desired effect.
The slimmed down version could look something like this:
<td>
<h2>Editorial</h2>
<a href="band.php">
<img src="images/7day_band.jpg" alt="" width="161" height="152" />
</a>
<h3><a href="band.php">When will this be finished?</a></h3>
<p>Jack Cook takes a look at timescales, and discovers CIA involvement.</p>
</td>
<td>
<h2>7 day spotlight</h2>
<a href="band.php">
<img src="images/7day_band.jpg" alt="" width="115" height="108" hspace="2" vspace="2" />
</a>
<p><a href="band.php" class="7dayband">Aqualung</a></p>
</td>
All other things like borders, alignment, spacing, colors mouseover hovers, etc. can be done with CSS.
The border can be set on the table cells themselves, assuring a consistent border; same goes for the background color. The cells could be spaced out using cell spacing, or extra divs surrounding the contents of each table cell could be used; this will pose problems in getting the content blocks to have equal height, though.
The image in the left block can be floated; margins can be used to provide correct spacing.
vBulletin® v3.8.2, Copyright ©2000-2012, Jelsoft Enterprises Ltd.