Safari/Opera 6 poor rendering of simple table.

External Since: Aug 15, 2004 Posts: 7

I hope someone can help me with this. This page renders well in IE, NS &
Opera 7, however someone with a MAC reports trouble when viewing in Safari -
notably two broad white bands horizontally across the screen.

This can also be replicated in Opera 6.02 on my PC.

Effectively I have a 100%x100% three-rowed table with solid colour in top
and bottom cells. The middle cell has a background image (a 1x350px image
stretched to fit page width) and an image centred in that cell. The idea is
that, down to the size of the image in the centre, the page can be resized
to fit any resolution and fill the page without scroll bars.

I can specify the height of the centre cell in pixels, but not the top and
bottom as these should just fill out the outstanding height, shouldn't they?

Can anyone advise? Trouble with FTP at the moment, so I cannot show you in
the flesh but here is the body code:

<body leftmargin="0" topmargin="0" rightmargin="0" bottommargin="0"
marginwidth="0" marginheight="0"
onLoad="MM_preloadImages('images/click-here-on.gif')">

<table width="100%" height="100%" border="0" cellspacing="0"
cellpadding="0">
<tr>
<td width="100%" bgcolor="189EF4"></td>
</tr>
<tr>
<td height="350">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="350" background="images/gradiant.gif"><div
align="center"><img src="images/centre-image.gif" alt="bar.05 - about the
business of bars" width="267" height="350"></div></td>
</tr>
</table>
</td>
</tr>
<tr>
<td width="100%" bgcolor="#4FFFDB">
<div align="center">
<p><a href="#" onMouseOut="MM_swapImgRestore()"
onMouseOver="MM_swapImage('click2enter','','images/click-here-on.gif',1)"><i
mg src="images/click-here-off.gif" alt="Click to view" name="click2enter"
width="150" height="13" border="0"></a></p>
</div>
</td>
</tr>
</table>

External Since: Aug 24, 2004 Posts: 30

JustMe wrote:
>
> I hope someone can help me with this. This page renders well in IE, NS &
> Opera 7, however someone with a MAC reports trouble when viewing in Safari -
> notably two broad white bands horizontally across the screen.
>
> This can also be replicated in Opera 6.02 on my PC.
>
> Effectively I have a 100%x100% three-rowed table with solid colour in top
> and bottom cells. The middle cell has a background image (a 1x350px image
> stretched to fit page width) and an image centred in that cell. The idea is
> that, down to the size of the image in the centre, the page can be resized
> to fit any resolution and fill the page without scroll bars.
>
> I can specify the height of the centre cell in pixels, but not the top and
> bottom as these should just fill out the outstanding height, shouldn't they?
>
> Can anyone advise? Trouble with FTP at the moment, so I cannot show you in
> the flesh but here is the body code:

You can set the VALIGN="MIDDLE" ALIGN="CENTER" for the center table which would
place that table's alignment at the middle of the page. You also might wish to
use an absolute path in your image callout as in
BACKROUND="/images/gradiant.gif" This way you can use the same code in pages in
subdirectories without having to call a relative path.

If you are using php you can define a path like so.

ROOT_PATH="/your.user.directory/images"

For includes I like to use <?php include ("includes/top.inc"); ?> in the pages
and I place this in the file as well as other things Iwant called out.

INCLUDES_PATH="/your.user.directory/includes"

This defines the path for the variable $INCLUDES_PATH and I place this in the file
when I am calling out an include.

<?php include ("$INCLUDES_PATH"/include_html.file.inc"); ?>

I use this to call the includes and set the include path as an absolute so I don't
have to deal with writing the relative path. For menus I use a relative path so
each menu is relative to the URL that called it.

<table width="100%" border="0" cellspacing="0" cellpadding="0" VALIGN="MIDDLE" ALIGN="CENTER"><tr><td height="350" background="images/gradiant.gif">

<div align="center">

<img src="images/centre-image.gif" alt="bar.05 - about the business of bars" width="267" height="350">

</div>

</td></tr></table>

> <body leftmargin="0" topmargin="0" rightmargin="0" bottommargin="0"
> marginwidth="0" marginheight="0"
> onLoad="MM_preloadImages('images/click-here-on.gif')">
>
> <table width="100%" height="100%" border="0" cellspacing="0"
> cellpadding="0">
> <tr>
> <td width="100%" bgcolor="189EF4"></td>
> </tr>
> <tr>
> <td height="350">
> <table width="100%" border="0" cellspacing="0" cellpadding="0">
> <tr>
> <td height="350" background="images/gradiant.gif"><div
> align="center"><img src="images/centre-image.gif" alt="bar.05 - about the
> business of bars" width="267" height="350"></div></td>
> </tr>
> </table>
> </td>
> </tr>
> <tr>
> <td width="100%" bgcolor="#4FFFDB">
> <div align="center">
> <p><a href="#" onMouseOut="MM_swapImgRestore()"
> onMouseOver="MM_swapImage('click2enter','','images/click-here-on.gif',1)"><i
> mg src="images/click-here-off.gif" alt="Click to view" name="click2enter"
> width="150" height="13" border="0"></a></p>
> </div>
> </td>
> </tr>
> </table>

--
Mark Ferguson