Welcome to the MacNN Forums.

simonmartin · May 25, 2003, 03:52 PM

Hi,

I'm trying to roll my own website and I'm having some trouble with this page: <http://homepage.ntlworld.com/mailoni...leryindex.html>

In Mozilla the page renders the way I want it to, namely the space between the first and second *rows* of thumbnails is the same as the space between the first and second thumbnails.

In Safari and Omniweb the space between the first and second rows is way more, maybe three times more, than the space between the thumbnails themselves. The same goes for the space between the second and third rows, also way to large. Everything should be symetrical on this page. The nine squares in the middle should form a neat square and have a smaller square to each side, the 'p/Monitor setup" and the 'Pixel'.

I'm doing this in dreamweaver but don't know enough html to find and correct the problem.

Hope you guys can help me out as to what's going wrong... :-)

Thanks in advance!

Simon
London Uk

megus · May 25, 2003, 06:03 PM

Looks to me as rendering bug in Safari when setting the height of a table to 100%.

You could use this as a work-around:

[php]
<body bgcolor="#000000" marginwidth="20px" marginheight="20px" onLoad="MM_preloadImages('../Images/nav_buttons/greensq_01-over.gif','../Images/nav_buttons/bluesq_01-over.gif')">
<table width="100%" height="100%" border="0" align="center" cellpadding="0" cellspacing="0" bordercolor="#000000" bgcolor="#FFFFFF">
<tr>
<td align="center" valign="middle">
<table cellspacing="5" cellpadding="0" border="0">
<tr>
<td height="109" bgcolor="#FFFFFF"> </td>
<td width="109"><div align="center"><a href="shark.html"><img src="../Images/images/thumbs/Thumbs100/sharkafttn.jpg" width="109" height="109" border="0"></a></div></td>
<td width="109"><div align="center"><a href="ellesseblue.html"><img src="../Images/images/thumbs/Thumbs100/ellesseblueaft.jpg" width="109" height="109" border="0"></a></div></td>
<td width="109"><div align="center"><a href="nudehs.html"><img src="../Images/images/thumbs/Thumbs100/nudehsafttn.jpg" width="109" height="109" border="0"></a></div></td>
<td bgcolor="#FFFFFF"> </td>
</tr>
<tr>
<td height="109"><div align="right"><a href="monitor.html"><img src="../Images/nav_buttons/pmonitanim.gif" width="109" height="109" border="0"></a></div></td>
<td><div align="center"><a href="stimesmulti.html"><img src="../Images/images/thumbs/Thumbs100/stimesmultiafttn.jpg" width="109" height="109" border="0"></a></div></td>
<td><div align="center"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image12','','../Images/nav_buttons/greensq_01-over.gif',1)"><img src="../Images/nav_buttons/greensq_01.gif" name="Image12" width="109" height="109" border="0"></a></div></td>
<td width="109"><div align="center"><a href="crawl.html"><img src="../Images/images/thumbs/Thumbs100/crawlafttn.jpg" width="109" height="109" border="0"></a></div></td>
<td><div align="left"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('gallindexblue','','../Images/nav_buttons/bluesq_01-over.gif',1)"><img src="../Images/nav_buttons/bluesq_01.gif" name="gallindexblue" width="109" height="109" hspace="0" vspace="0" border="0"></a></div></td>
</tr>
<tr>
<td height="109" bgcolor="#FFFFFF"> </td>
<td><div align="center"><img src="../Images/images/thumbs/Thumbs100/ellesseblueaft.jpg" width="109" height="109"></div></td>
<td><div align="center"><img src="../Images/images/thumbs/Thumbs100/ellesseblueaft.jpg" width="109" height="109"></div></td>
<td><div align="center"><img src="../Images/images/thumbs/Thumbs100/ellesseblueaft.jpg" width="109" height="109"></div></td>
<td bgcolor="#FFFFFF"> </td>
</tr>
</table>
</td>
</tr>
</table>
</body>
[/php]

This modification will create a table with the height set to 100% and then insert another table into its only cell with align set to center and valign set to middle.

//megus

Synotic · May 25, 2003, 07:58 PM

Simon, have you considered using CSS to add the padding to the images? This eliminates the need for the majority of the overhead table code. I created a quick example here. I didn't add the rollover code or the links on the images but it gives you an idea. If you see the code, the images are just placed right next to each other with a break return between each row of images. This makes it really easy to work with if you ever decide you want to work with the code. HTH

Preview:

<div style="width: 30%" align="center">
<img src="http://homepage.ntlworld.com/mailonix/p4pixel/Images/images/thumbs/Thumbs100/sharkafttn.jpg" style="padding: 4px" alt=""><br>
<img src="http://homepage.ntlworld.com/mailonix/p4pixel/Images/nav_buttons/pmonitanim.gif" style="padding: 4px" alt=""><img src="http://homepage.ntlworld.com/mailonix/p4pixel/Images/images/thumbs/Thumbs100/stimesmultiafttn.jpg" style="padding: 4px" alt=""><br>
<img src="http://homepage.ntlworld.com/mailonix/p4pixel/Images/images/thumbs/Thumbs100/ellesseblueaft.jpg" style="padding: 4px" alt="">
</div>

simonmartin · May 26, 2003, 04:38 AM

Originally posted by megus:
Looks to me as rendering bug in Safari when setting the height of a table to 100%.

You could use this as a work-around:
//megus

megus,

Thanks for that. I created a nested table the way you described and it did the trick, for Safari anyway. Well done.

Omni now shows the thumbnails correctly but doesn't show me the top and bottom of the page at the same time, I have to scroll the page.

Oh, well...

Thanks a lot for your help.

Simon

simonmartin · May 26, 2003, 04:44 AM

Originally posted by Synotic:
Simon, have you considered using CSS to add the padding to the images? This eliminates the need for the majority of the overhead table code. I created a quick example here. I didn't add the rollover code or the links on the images but it gives you an idea. If you see the code, the images are just placed right next to each other with a break return between each row of images. This makes it really easy to work with if you ever decide you want to work with the code. HTH

Synotic,

CSS is a bit over my head just yet... I didn't actually realise that they could be used for anything other than design of pages, as opposed to layout.

I'll try to get to grips with them. It looks as if your example page needs a lot less code than my original page, which has to be a good thing.

Can you keep that page up for me to refer to for a while? :-)

It's a mess in omniweb though...

Any good tutorials for CSS you can point me to?

Thanks a lot! :-)

Simon

Synotic · May 26, 2003, 09:45 AM

Originally posted by simonmartin:
Synotic,

CSS is a bit over my head just yet... I didn't actually realise that they could be used for anything other than design of pages, as opposed to layout.

I'll try to get to grips with them. It looks as if your example page needs a lot less code than my original page, which has to be a good thing.

Can you keep that page up for me to refer to for a while? :-)

It's a mess in omniweb though...

Any good tutorials for CSS you can point me to?

Thanks a lot! :-)

Simon

This is what I personally used as per suggestion of a friend. I found it to be pretty good to simply understand how CSS works and then it goes through every aspect of CSS1 & 2. The only complaint I have is that he goes over everything and doesn't mention that certain features, no browser to date supports... You'll have to follow along with the included browser compatibility charts on a separate window/tab. Also, there really aren't that many tutorials but it's fun to mess around with.

As for OmniWeb, I personally wouldn't care about it because it has already switched to a modified version of WebCore, which is the same rendering engine that Safari is currently using.

Good luck

P.S. It's hosted on my laptop which doesn't have the greatest reliability, but whenever I am on, the site will be up. Here's the code for future reference so you can host it if you want.

[php]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<title>P4Pixel Digital Manipulation</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">
body { background-color: black; margin: 20px; }
img { padding: 4px; }
#content { height: 100%; width: 100%; background-color: white; }
</style>
</head>
<body>
<table id="content" cellspacing="0" cellpadding="0" border="0">
<tr>
<td align="center" valign="middle" nowrap>
<img src="http://homepage.ntlworld.com/mailonix/p4pixel/Images/images/thumbs/Thumbs100/sharkafttn.jpg" alt=""><img src="http://homepage.ntlworld.com/mailonix/p4pixel/Images/images/thumbs/Thumbs100/ellesseblueaft.jpg" alt=""><img src="http://homepage.ntlworld.com/mailonix/p4pixel/Images/images/thumbs/Thumbs100/sharkafttn.jpg" alt=""><br>
<img src="http://homepage.ntlworld.com/mailonix/p4pixel/Images/nav_buttons/pmonitanim.gif" alt=""><img src="http://homepage.ntlworld.com/mailonix/p4pixel/Images/images/thumbs/Thumbs100/stimesmultiafttn.jpg" alt=""><img src="http://homepage.ntlworld.com/mailonix/p4pixel/Images/nav_buttons/greensq_01-over.gif" alt=""><img src="http://homepage.ntlworld.com/mailonix/p4pixel/Images/images/thumbs/Thumbs100/crawlafttn.jpg" alt=""><img src="http://homepage.ntlworld.com/mailonix/p4pixel/Images/nav_buttons/bluesq_01-over.gif" alt=""><br>
<img src="http://homepage.ntlworld.com/mailonix/p4pixel/Images/images/thumbs/Thumbs100/ellesseblueaft.jpg" alt=""><img src="http://homepage.ntlworld.com/mailonix/p4pixel/Images/images/thumbs/Thumbs100/ellesseblueaft.jpg" alt=""><img src="http://homepage.ntlworld.com/mailonix/p4pixel/Images/images/thumbs/Thumbs100/ellesseblueaft.jpg" alt="">
</td>
</tr>
</table>
</body>
</html>[/php]

simonmartin · May 26, 2003, 10:34 AM

Originally posted by Synotic:
This is what I personally used as per suggestion of a friend.

Synotic,

Thanks for that mate. I'll try to get my tiny mind around it... :-)

Looks like a good way to work.

Simon