help with tables

Gnomo

Gnomo

Registered
I could use some help with a table rendering problem I'm having with IE 5 for mac (and probably IE for windows)

When I render the following table in mozilla or safari, it looks the way it is supposed to. The top cell is 89 pixels, the middle cell sizes depending on the content in it.

However, when I call up the page with IE for mac, the top cell does not stay at the 89 pixels that it is supposed to (the cell normally contains the site logo, which is about 89 pixels tall). So, you get this ugly white gap between the logo and the beginning of the content. This seems to be related to the image in the right sidebar. Unfortunately the site's webmaster designed this layout and changing the layout is not an option.

I've tried forcing the size with CSS and hard coding the value, but unless there is a substantial amount of text in one of the two cells in the second row, the top cell hogs the screen. The problem is that I cannot guarentee the amount of info on the screen. The content cell is going to contain material that is hidden (display: none) unless you expand it.

Any ideas for a work around?

Code: 
<table width="625" border="0" cellspacing="1" cellpadding="0">
  <tr>
    <td width="625" height="89" colspan="2">&nbsp;</td>
    <td width="24" rowspan="2">
      <img src="" width="18" height="500" />
    </td>
  </tr>
  <tr>
    <td width="150">&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td colspan="3">&nbsp;</td>
  </tr>
</table>
 
Try a nested table for the logo/content area, with the containing td set to valign top:

<table width="625" border="0" cellspacing="1" cellpadding="0">
<tr>
<td width="625" colspan="2" valign="top">

<table width="625" border="1" cellspacing="0" cellpadding="0">
<tr>
<td colspan="2">&nbsp;</td>
</tr>
<tr>
<td width="150">&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table></td>
<td width="24"> <img src="/images/spacer.gif" width="18" height="500">
</td>
</tr>
<tr>
<td colspan="3">&nbsp;</td>
</tr>
</table>
 
IE sucks, it has not a single redeeming quality, and this is an example of why web designers hate it like the plague. Hopefully you already knew that ;).

Anyway, I'm afraid I've never run into that problem before, and after three quarters of an hour tinkering and Googleing, I haven't been able to find a fix. It appears the in IE the cell widths are responding to the image dimensions for some reason. For me, at least, the logo image, when inserted, also stretches the cell below it.
One thing I did notice: your table width was 625. The logo cell was also 625, but the cell on the far right added 18 to that. Either the table needs to be 643, or the logo cell needs to be 603. Did you know about that?
 
Thanks for the quick replies.

I'll try using the nested tables that sonjay recommends. It will be a slight modification to the layout, but I think with CSS I can make it look the same, so the webmaster will be none the wiser (I don't think she ever really looks at the html, she prefers to remain in her wysiwyg world).

Dlloyd, thanks for pointing out the table width error. That would have probably come back to bite me at some point.
 
I tried the nested tables approach also; it'll only work if you don't need the logo and the side image to integrate seamlessly.
 
dlloyd said:
I tried the nested tables approach also; it'll only work if you don't need the logo and the side image to integrate seamlessly.
Click to expand...

They'll integrate seamlessly just fine if he sets cellspacing and borders to 0 on both tables.

If he needs some margins around the content, he can use css to apply padding to the content td, or wrap the content in a div and apply a margin to that.
 
dlloyd said:
Hmmm, maybe in an ideal world, but that's not how it always works, for me :(
Click to expand...

Yeah, don't we wish it were an ideal world, and that all browsers were fully standards compliant!

Nevertheless, if he explicitly sets borders, cellspacing and cellpadding to 0, it should work in virtually all browsers. He also needs to explicitly set the containing td for the nested table to have valign=top, and he might also need to explicitly set the align="left" for the td that holds that right-side image. If you don't set these things, but let the browsers use their defaults, that's when you run into problems -- because different browsers use different defaults.
 
Do you have an example of the whole page online anywhere? That or attach a full copy of the html source and related items (scripts, images, etc.) and we'll see what we can do.
 
I was going ask about that, but I eventually figured it wasn't really necessary. He described the problem, and the code he gave was enough to work with. The only help the full version would give is knowing what the page actually looks like, and I didn't think that was applicable to the problem :).
 
Sonjay,

Thanks for your help. The nested table fixed the problem I was having with IE. It took a little extra creative effort to get the entire page to finally render the way that I need it too. I wasn't too worried about the table cells matching up perfectly because the design of the site has the stupid black lines the separate the cells ::evil:: (Like I said before, I didn't design it).

I've included the final working version (I save the php to a txt file) of the template. If you would like to see what the page is supposed to look like (with graphics and all you can by going to www.greenville.edu ). The way the page is layed out there does not use proper CSS (for the black line crap) and has lots of spacer gifs and whatknot. So this version will be much lighter ... now if only I could convince them that it is ugly and needs to be changed?!? ::ha::
 

Attachments

  • test.txt
    1.3 KB · Views: 2
Gnomo said:
The way the page is layed out there does not use proper CSS (for the black line crap) and has lots of spacer gifs and whatknot. So this version will be much lighter ... now if only I could convince them that it is ugly and needs to be changed?!? ::ha::
Click to expand...

And whoever designed that is probably inordinately proud of their creation.... tread carefully!
 
You must log in or register to reply here.
Back
Top