Different results for different browsers

Forum Moderators: open

Message Too Old, No Replies

Different results for different browsers

hgerman

6:41 pm on Nov 3, 2007 (gmt 0)

Hi all, I'm trying to place a header image (myimage.jpg) behind the intro content of my page, and have encountered some difficulty. As an example of what I'm running into, I paste the code below, open it in IE and it works fine. In FF, the image beneath the text is invisible. I want it to show up in both browsers. Can someone help?

<html>
<head>
<title>test page</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css" media="screen">
body {margin:0px; padding:0px;}
img.a
{
position:absolute;
left:50%;
margin-top:-28px;
margin-left:-450px;
padding:0px;
z-index:-1
}
</style>
</head>

<body>
<div align="center"><font face="Arial" size="3" color="#999999">ABC Company</font>  <font face="Arial, Helvetica, sans-serif" size="2">The best company for ABC sales on the World Wide Web.</font>
</div>
<img class="a" src="/images/myimage.jpg" width="900" height="44" border="0">
</body>
</html>

encyclo

7:18 pm on Nov 3, 2007 (gmt 0)

Fighting with percentages and negative margins is troublesome, so rather than attempting to correct your example, here's an alternative approach.

Basically, the image in question appears to be a background element. As such, you can define it in CSS and not in the HTML. I've added an appropriate doctype [webmasterworld.com] too:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>test page</title>
<style type="text/css" media="screen">
body {margin:0px; padding:0px;}
#toplogo {
margin:0 auto;
text-align:center;
background:#fff url(/images/myimage.jpg) no-repeat center center;
width:900px;
height:44px;
}
</style>
</head>
<body>
<div id="toplogo">
<font face="Arial" size="3" color="#999999">ABC Company</font> &#151; <font face="Arial, Helvetica, sans-serif" size="2">The best company for ABC sales on the World Wide Web.</font>
</div>
</body>
</html>

Basically, you define a

div

with the same width and height as the image, and place the graphic as a background within its center.

PS. Next step is to get rid of the <font> tags!

hgerman

5:10 pm on Nov 8, 2007 (gmt 0)

Thank you very much for your help!