table with extra bit on bottom

**djr33** · 03-01-2007, 10:32 AM

This page is php generated, with the same html for each table, just different data.

For some odd reason in IE (and Dreamweaver preview, though, don't worry, I coded by hand) displays it correctly, but FF is weird. In FF 1.5 PC there's an extra few pixels at the bottom of the right cell. Ugly!

http://truthandliesmovie.com/castcrew.php

Any ideas?

I'm tired... it's a bit of a mix of css/html, just using the css I know.

Also, yes... based on tables. But I think this makes more sense than divs.

**codeexploiter** · 03-01-2007, 11:01 AM

Please change the following two lines in your source

Code:

<td rowspan="2" style="vertical-align: middle;" width="1"><img src="castcrewimages/mariehumble.jpg" height="200" width="200"></td>

Code:

<td rowspan="2" style="vertical-align: middle;" width="1"><img src="castcrewimages/lenpettigrew.jpg" height="200" width="200"></td>

to the following two lines respectively

Code:

<td rowspan="2" style="vertical-align: middle;"><img src="castcrewimages/mariehumble.jpg" height="200" width="200" align="absmiddle"></td>

Code:

<td rowspan="2" style="vertical-align: middle;"><img src="castcrewimages/lenpettigrew.jpg" height="200" width="200" align="absmiddle"></td>

it works in Firefox

**djr33** · 03-01-2007, 10:16 PM

Since the size of the image can vary, and that will force the cell to expand, but only the amount needed, that width="1" should hold it so that it doesn't decide to split the width 50-50.

I removed the line and it doesn't seem to change anything, so that was extra, I guess, but doesn't fix the problem.

I'm stumped.

**codeexploiter** · 03-02-2007, 03:24 AM

But I think you haven't used the next change I've suggested on the <img> tag set its align to absmiddle and see.

I've mentioned that in my first posting I can see that you've removed the width="1" from your code but you need to set the align attribute of <img> to absmiddle to make this work.

I've attached a screenshot of the page in my PC with my changes and there was no display problem in my PC.

Following is the HTML code of your page saved into my PC with my modifications in place

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head>


<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><title>Cast and Crew - Truth and Lies</title></head><body style="background-color: rgb(0, 0, 0);">
<div style="text-align: center;">
<h2 style="color: rgb(0, 204, 204);">Truth and Lies</h2>
<h1 style="color: rgb(0, 204, 204);">CAST AND CREW</h1>
<table align="center" border="0" cellpadding="0" cellspacing="0" width="600">
<tbody><tr>
<td rowspan="2" style="vertical-align: middle;"><img src="castcrew.php_files/noimage.jpg" align="absmiddle"></td>
<td style="text-align: center; background-color: rgb(0, 204, 204);" height="1"><span style="color: rgb(0, 0, 0); font-weight: bold;">Daniel Ross - "Director, Producer, Editor"</span></td>
</tr>
<tr>
<td style="vertical-align: middle; text-align: left; background-color: rgb(0, 153, 153);">Daniel put together this project based on the story written by Kelsey Dunlop.<br>After casting and rehearsals, he organized and directed the production.<br>For post production, Daniel is editor and FX supervisor.</td>
</tr>
</tbody></table>
<br><table align="center" border="0" cellpadding="0" cellspacing="0" width="600">
<tbody><tr>
<td rowspan="2" style="vertical-align: middle;"><img src="castcrew.php_files/mariehumble.jpg" align="absmiddle"></td>
<td style="text-align: center; background-color: rgb(0, 204, 204);" height="1"><span style="color: rgb(0, 0, 0); font-weight: bold;">Marie Humble - "Aislin"</span></td>
</tr>
<tr>
<td style="vertical-align: middle; text-align: left; background-color: rgb(0, 153, 153);">Marie, previously a model, and thirteen at the time of her performance, plays Aislin, a first-time prophet.</td>
</tr>
</tbody></table>
<br><table align="center" border="0" cellpadding="0" cellspacing="0" width="600">
<tbody><tr>
<td rowspan="2" style="vertical-align: middle;"><img src="castcrew.php_files/lenpettigrew.jpg" align="absmiddle"></td>
<td style="text-align: center; background-color: rgb(0, 204, 204);" height="1"><span style="color: rgb(0, 0, 0); font-weight: bold;">Len Pettigrew - "Apollo"</span></td>
</tr>
<tr>
<td style="vertical-align: middle; text-align: left; background-color: rgb(0, 153, 153);">Len has previously been in 8 seasons of Shakespeare productions and has experience as a professional football player.<br>He plays Apollo, a long-time prophet.</td>
</tr>
</tbody></table>
<br></div>
</body></html>

*Check the align attribute of <img> tags in the above source code.

**djr33** · 03-02-2007, 05:22 AM

Oh, my fault.
Thanks.

I didn't scroll over to notice the absmiddle, as I saw the change in red first.
Sorry.

It's updated, and works.

I just changed it back to a strict doc type, and it's still right.

Awesome.

Thread: table with extra bit on bottom

Thread Tools

Search Thread

table with extra bit on bottom

Bookmarks

Bookmarks

Posting Permissions