View Full Version : Background problem in table(s) with mixture of absolute + relative sizes


Lackey
09-20-2005, 09:09 AM
I am building a custom 404 page for my site, but have run into problems.

To make it short, here's a screenshot:

Click (http://img383.imageshack.us/img383/2907/4043mv.jpg)

In the middle I have a centered table with the pictures, of course with absolute sizes, but to make it fit to any screen resolution my visitors might have, I built a table with the hight 100% and width 100& around it.

Then I tried to continue the grey thing at the bottom, on both sides, but the background won't repeat. :confused:

I have no idea why that is, but I think I have done something terribly wrong.

Here's the code:

<html>
<head>
<title>4042</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" href="style4.css" type="text/css">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" style="margin:0px; padding:0px;">

<table width="100%" height="100%" cellpadding="0" cellspacing="0">
<tr>

<td valign="bottom" align="right">
<table align=" right" cellpadding="0" cellspacing="0">
<tr>
<td><img src="spacer.jpg"></td>
</tr>

<tr>
<td height="71" background="spacer2.jpg"></td>
</tr>
</table>
</td>


<td valign="bottom" align="center">
<!-- ImageReady Slices (4042.psd) -->
<table width="672" height="553" align="center" valign="bottom" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="2">
<img src="Bilder/4045_01.jpg" width="672" height="155" alt=""></td>
</tr>
<tr>
<td rowspan="2">
<img src="Bilder/4045_02.jpg" width="494" height="77" alt=""></td>
<td>
<img src="Bilder/4045_03.jpg" width="178" height="38" alt=""></td>
</tr>
<tr>
<td>
<img src="Bilder/4045_04.jpg" width="178" height="39" alt=""></td>
</tr>
<tr>
<td colspan="2">
<img src="Bilder/4045_05.jpg" width="672" height="321" alt=""></td>
</tr>
</table>
<!-- End ImageReady Slices -->
</td>

<td valign="bottom" align="left">
<table align=" right" cellpadding="0" cellspacing="0">
<tr>
<td><img src="spacer.jpg"></td>
</tr>

<tr>
<td height="71" background="spacer2.jpg"></td>
</tr>
</table>
</td>

</tr>
</table>

</body>
</html>

"spacer2.jpg " is a one pixel wide and 71 pixel high grey graphic, the background to continue the grey thing.

"spacer1.jpg" is just a 5x5 px white graphic.

I cannot give the right and left sides absolute widths, because I need it to stretch as wide as the screen of the person looking at it might be.

Any idea how to solve this?

MaGiCSuN
09-20-2005, 10:27 AM
there's no content in it:

<td height="71" background="spacer2.jpg">&nbsp;</td>

try that ..

buuut, can you post an url to the actual 404 page? it's a bit hard to see it now ...

Love,
Mirna

Lackey
09-20-2005, 06:41 PM
Thanks for the suggestion, but that didn't help either...

I got it online, take a look at it here. (http://www.lassehallstrom.com/pages/4045.html)

Lackey
09-22-2005, 10:29 AM
Anyone? :(

MaGiCSuN
09-22-2005, 02:15 PM
your problem was your width of your middle cell of the table :)

it was too width, wich causes the "white parts" because there is no background image in the middle cell.

try this

<html>
<head>
<title>4042</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" href="style4.css" type="text/css">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" style="margin:0px; padding:0px;">

<table width="100%" height="100%" cellpadding="0" cellspacing="0" border="0">
<tr>

<td valign="bottom" align="right">
<table align=" right" cellpadding="0" cellspacing="0" width="100%" height="100%">
<tr>
<td><img src="spacer.jpg">&nbsp;</td>
</tr>

<tr>
<td height="71" background="spacer2.jpg">&nbsp;</td>
</tr>
</table>
</td>


<td valign="bottom" align="center" width="672">
<!-- ImageReady Slices (4042.psd) -->
<table width="672" height="553" align="center" valign="bottom" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="2">
<img src="Bilder/4045_01.jpg" width="672" height="155" alt=""></td>
</tr>
<tr>
<td rowspan="2">
<img src="Bilder/4045_02.jpg" width="494" height="77" alt=""></td>
<td>
<img src="Bilder/4045_03.jpg" width="178" height="38" alt=""></td>
</tr>
<tr>
<td>
<img src="Bilder/4045_04.jpg" width="178" height="39" alt=""></td>
</tr>
<tr>
<td colspan="2">
<img src="Bilder/4045_05.jpg" width="672" height="321" alt=""></td>
</tr>
</table>
<!-- End ImageReady Slices -->
</td>

<td valign="bottom" align="left">
<table align=" right" cellpadding="0" cellspacing="0" width="100%" height="100%">
<tr>
<td><img src="spacer.jpg">&nbsp;</td>
</tr>

<tr>
<td height="71" background="spacer2.jpg">&nbsp;</td>
</tr>
</table>
</td>

</tr>
</table>

</body>
</html>

a little trick to solve stuff like this is to turn ON the border of the main table. Then you could see that the middle cell is way bigger then the sides :)

Love,
Mirna

Lackey
09-22-2005, 03:59 PM
OMG thank you so much!!!

:bow: *hugs*

And thanks for the tip with the border, I am sure that will come in handy later!

MaGiCSuN
09-22-2005, 07:38 PM
no problem :)

Love,
mirna