Safari Background image rendering problem

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
pickle
Briney Mod
Posts: 6445
Joined: Mon Jan 19, 2004 6:11 pm
Location: 53.01N x 112.48W
Contact:

Safari Background image rendering problem

Post by pickle »

Hi all,

I've got a problem with Safari not properly displaying the background image for a table cell.

This is what I want the page to look like:
Image


This is what Safari does with it:
Image


As you can see, Safari only renders the background image as far as the form goes. Other pages have the same result - the background image only being rendered as far as the text goes.

Below is the relevant CSS:

Code: Select all

.body{
	height:100%;
	width:100%;
	padding:5px;
	background: white url("images/rose_background.jpg");
  	background-repeat: repeat;
  	background-position: left;
	vertical-align:top;
	font-size:10pt;
	text-indent:20px;	
}
Does anyone have any ideas? Both the CSS and HTMl of the page validate properly, so I think it's just a bug/gimmick of Safari. Thanks.
Last edited by pickle on Thu Feb 24, 2005 12:19 am, edited 1 time in total.
Real programmers don't comment their code. If it was hard to write, it should be hard to understand.
User avatar
feyd
Neighborhood Spidermoddy
Posts: 31559
Joined: Mon Mar 29, 2004 3:24 pm
Location: Bothell, Washington, USA

Post by feyd »

can you post the code to the page? Or post a link to this?
User avatar
pickle
Briney Mod
Posts: 6445
Joined: Mon Jan 19, 2004 6:11 pm
Location: 53.01N x 112.48W
Contact:

Post by pickle »

The code is split up into 3 different files: page_head.inc, contact_us.php, and page_foot.inc:

page_head.inc:

Code: Select all

<?PHP
$file = basename($PHP_SELF);
$spacer = '<strong>&middot;</strong>&nbsp;&nbsp;';
switch($file)
&#123;
	case 'index.php':
		$title = '';
		$index_spacer = $spacer;
		break;
	case 'stallion.php':
		$title = ": Stallions";
		$stallion_spacer = $spacer;
		break;
	case 'mares.php':
		$title = ": Mares";
		$mare_spacer = $spacer;
		break;
	case 'for_sale.php':
		$title = ": For Sale";
		$sale_spacer = $spacer;
		break;
	case 'contact_us.php':
		$title = ": Contact Us";
		$contact_spacer = $spacer;
		break;
	default:
		$title = '';
&#125;
?>


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
	<head>
		<title>
			Welcome to Alberta Andelusians!
		</title>
		<link rel = "stylesheet" type = "text/css" href = "style.css" />
		<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
	</head>
	<body>
		<table align = "center" class = "page_table" cellspacing = "1" cellpadding = "0">
			<tr>
				<td colspan = "2" class = "head_cell">
					<img src = "images/logo.gif" align = "middle" alt = "Logo" />
					Welcome to Alberta Andelusians<?PHP echo $title; ?>
				</td>
			</tr>
			<tr>
				<td class = "menu" width = "100">
					<a href = "index.php">
						<?PHP echo $index_spacer ?>Home
					</a>
					<a href = "stallion.php">
						<?PHP echo $stallion_spacer ?>Stallion
					</a>
					<a href = "mares.php">
						<?PHP echo $mare_spacer ?>Mares
					</a>
					<a href = "for_sale.php">
						<?PHP echo $sale_spacer ?>Horses for sale
					</a>
					<a href = "contact_us.php">
						<?PHP echo $contact_spacer ?>Contact Us!
					</a>
				</td>
				<td class = "body">
					<div style = "height:100%;">

contact_us.php:

Code: Select all

<?PHP
require_once('page_head.inc');
echo <<<PAGE
<form name = "contact_form" method = "POST" action = "$PHP_SELF">
<table>
	<tr>
		<td align = "right">
			Name:
		</td>
		<td align = "left">
			<input type = 'text' name = 'name'>
		</td>
	</tr>
	<tr>
		<td align = "right">
			Email:
		</td>
		<td align = 'left'>
			<input type = 'text' name = 'email'>
		</td>
	</tr>
	<tr>
		<td align = "right" valign = "top">
			Comments:
		</td>
		<td align = "left">
			<textarea rows = "5" cols = "20"></textarea>
		</td>
	</tr>
	<tr>
		<td colspan = "2" align = "center">
			<input type = "submit" name = "submit" value = "Send comments">
		</td>
	</tr>
</table>
</form>
PAGE;
			
require_once('page_foot.inc');

?>

page_foot.inc

Code: Select all

</div>
				</td>
			</tr>
		</table>
	</body>
</html>
The resulting generated HTML code is:

Code: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
  <head>
    <title>
      Welcome to Alberta Andelusians!
    </title>
    <link rel ="stylesheet" type ="text/css" href ="style.css" />
      <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
  </head>
  <body>
    <table align ="center" class ="page_table" cellspacing ="1" cellpadding ="0">
      <tr>
	<td colspan ="2" class ="head_cell">
	  <img src ="images/logo.gif" align ="middle" alt ="Logo" />
	    Welcome to Alberta Andelusians: Contact Us				
	</td>
      </tr>
      <tr>
	<td class = "menu" width ="100">
	  <a href ="index.php">
	    Home
	  </a>
	  <a href ="stallion.php">
	    Stallion
	  </a>
	  <a href ="mares.php">
	    Mares
	  </a>
	  <a href ="for_sale.php">
	    Horses for sale
	  </a>
	  <a href ="contact_us.php">
	    <strong>&middot;</strong>&nbsp;&nbsp;Contact Us!
	  </a>
	</td>
	<td class =" body">
	  <div style ="height:100%;"><form name ="contact_form" method ="POST" action ="/andelusians/contact_us.php">
	      <table>
		
		<tr>
		  <td align ="right">
		    Name:
		  </td>
		<td align ="left">
		    <input type =' text' name =' name'>
		  </td>
		</tr>
		<tr>
		  <td align ="right">
		    Email:
		  </td>
		  <td align ='left'>
		    <input type =' text' name =' email'>
		  </td>
		</tr>
		<tr>
		  <td align ="right" valign ="top">
		    Comments:
		  </td>
		  <td align ="left">
		    <textarea rows ="5" cols ="20"></textarea>
		  </td>
		</tr>
		<tr>
		  <td colspan ="2" align ="center">
		    <input type ="submit" name ="submit" value ="Send comments">
		  </td>
		</tr>
	      </table>
	    </form>
	  </div>
	</td>
      </tr>
    </table>
  </body>
</html>
Real programmers don't comment their code. If it was hard to write, it should be hard to understand.
User avatar
feyd
Neighborhood Spidermoddy
Posts: 31559
Joined: Mon Mar 29, 2004 3:24 pm
Location: Bothell, Washington, USA

Post by feyd »

it would seem that Safari does not support height being 100% .. have you tried adding a div:clear after the body div?

Code: Select all

<div style="clear:both"></div>
it may need a spacer in that..

might need re-engineering the page to be all div/span types, with a div:clear after the two content divs. Here's an example of code and views: http://nemesis1.f2o.org/aarchive?id=7

Is that more what you are trying to do? It appears that way..
User avatar
pickle
Briney Mod
Posts: 6445
Joined: Mon Jan 19, 2004 6:11 pm
Location: 53.01N x 112.48W
Contact:

Post by pickle »

Thanks for the info, but it didn't work. I put that second DIV in, and it did nothing. So... I took out the DIV surrounding the contents of the page and something strange happens. A page with a form renders right to the bottom. Pages with just text however, don't. Below is code from a working page with a form (first) and a non-working page with just text (second).

In regards to the link - my problem isn't getting the layout set up, nor even with putting the image in the correct place, just with getting Safari to render it properly. Every other browser I've tried (Firefox PC/Mac, IE PC) works just fine, but not Safari.

Thanks for your help so far.

working page code:

Code: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
  <head>
    <title>
      Welcome to Alberta Andelusians!
    </title>
    <link rel =" stylesheet" type =" text/css" href =" style.css" />
      <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
  </head>
  
  <body>
    <table align =" center" class =" page_table" cellspacing =" 1" cellpadding =" 0">
      <tr>
	<td colspan =" 2" class =" head_cell">
	  <img src =" images/logo.gif" align =" middle" alt =" Logo" />
	    Welcome to Alberta Andelusians: Contact Us
	</td>
      </tr>
      <tr>
	<td class =" menu" width =" 100">
	  <a href =" index.php">
	    Home
	  </a>
	  <a href =" stallion.php">
	    Stallion
	  </a>
	  <a href =" mares.php">
	    Mares
	  </a>
	  <a href =" for_sale.php">
	    Horses for sale
	  </a>
	  <a href =" contact_us.php">
	    <strong>&middot;</strong>&nbsp;&nbsp;Contact Us!
	  </a>
	</td>
	<td class =" body">
	  <form name =" contact_form" method =" post" action =" /andelusians/contact_us.php">
	    <table>
	      <tr>
		<td align =" right">
		  Name:
		</td>
		<td align =" left">
		  <input type =' text' name =' name' />
		</td>
	      </tr>
	      <tr>
		<td align =" right">
		  Email:
		</td>
		<td align =' left'>
		  <input type =' text' name =' email' />
		</td>
	      </tr>
	      <tr>
		<td align =" right" valign =" top">
		  Comments:
		</td>
		<td align =" left">
		  <textarea rows =" 5" cols =" 20"></textarea>
		</td>
	      </tr>
	      <tr>
		<td colspan =" 2" align =" center">
		  <input type =" submit" name =" submit" value =" Send comments" />
		</td>
	      </tr>
	    </table>
	  </form>
	</td>
      </tr>
    </table>
  </body>
</html>

non-working page code:

Code: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
  <head>
    <title>
      Welcome to Alberta Andelusians!
    </title>
    <link rel =" stylesheet" type =" text/css" href =" style.css" />
      <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
  </head>
  <body>
    <table align =" center" class =" page_table" cellspacing =" 1" cellpadding =" 0">
      <tr>
	<td colspan =" 2" class =" head_cell">
	  <img src =" images/logo.gif" align =" middle" alt =" Logo" />
	    Welcome to Alberta Andelusians: Stallions
	</td>
      </tr>
      <tr>
	<td class =" menu" width =" 100">
	  <a href =" index.php">
	    Home
	  </a>
	  <a href =" stallion.php">
	    <strong>&middot;</strong>&nbsp;&nbsp;Stallion
	  </a>
	  <a href =" mares.php">
	    Mares
	  </a>
	  <a href =" for_sale.php">
	    Horses for sale
	  </a>
	  <a href =" contact_us.php">
	    Contact Us!
	  </a>
	</td>
	<td class =" body">
	  This is the page that will showcase the stallion.  I'll need lots of information and pictures
	</td>
      </tr>
    </table>
  </body>
</html>
Real programmers don't comment their code. If it was hard to write, it should be hard to understand.
User avatar
feyd
Neighborhood Spidermoddy
Posts: 31559
Joined: Mon Mar 29, 2004 3:24 pm
Location: Bothell, Washington, USA

Post by feyd »

I'm going to guess that adding the div:clear into the text only one doesn't do anything... well nuts.. I can't test it without a Mac, so that's as far as I can go.. sorry. :(
User avatar
pickle
Briney Mod
Posts: 6445
Joined: Mon Jan 19, 2004 6:11 pm
Location: 53.01N x 112.48W
Contact:

Post by pickle »

feyd wrote:that's as far as I can go.. sorry. :(
When that comes from feyd, that's not a good sign :) Thanks anyway. I can hang my head high that at least I found something to stump you with
Real programmers don't comment their code. If it was hard to write, it should be hard to understand.
User avatar
feyd
Neighborhood Spidermoddy
Posts: 31559
Joined: Mon Mar 29, 2004 3:24 pm
Location: Bothell, Washington, USA

Post by feyd »

only because I don't have a Mac ;) :P
Post Reply