HTML Forum

**Hans G.** · 10-05-2007, 01:47 AM

So I created this page that I'm happy with. Images in the background in tables, with CSS images super-imposed perfectly over them. In IE for PC everything looks fine. But whenever I view it in every other browser, the CSS image appears a bit higher on the page. Why is this happening?! And what do I do so that the CSS images appears in the same position for alll browsers? Help!

**chrishirst** · 10-05-2007, 04:34 AM

I'd suggest you work the other way around and design and test in A.N. Other browser THEN tweak for IE with conditional comments

**soap** · 10-05-2007, 02:09 PM

Multiple style sheets.


Change whatever you need to change for that specific browser in the stylesheet that goes with it.

**Hans G.** · 10-05-2007, 02:43 PM

so would the following work for firefox?

**LadynRed** · 10-05-2007, 02:50 PM

No, you don't need conditional comments for Firefox - or Opera - or Safari (or any other standards-compliant browser), you ONLY need separate stylesheets to kick IE into doing what they others do correctly !

Like Chris said, do not design with IE as your guide, it will lie to you - design so it's right in FF, or Opera FIRST, then wrangle with IE - it'll get you out of browser hell a lot faster !

**Hans G.** · 10-05-2007, 02:59 PM

Below is the code. Each of these browsers interpret the code differently: IE for PC, FF for PC, IE for MAC, Netscape for MAC, Opera for MAC,Safari for MAC.

<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css" media="screen">
body {font-family: Arial, Helvetica, sans-serif; color: #000; margin:0px; padding:0px;}
#Content {
position:absolute;
left:50%;
width:100px;
margin-top:-303px;
margin-left:15px;
text-align:left;
padding:5px;
line-height: 0.0em;
z-index:2
}
h1 {
font-size:12px
}
p {
font-size:10px
}
</style>
</head>
<body>
<table width="801" height="558" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td bgcolor="#CCCCCC"> </td>
<td bgcolor="#CCCCCC"> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td bgcolor="#CCCCCC"> </td>
<td bgcolor="#CCCCCC"> </td>
</tr>
<tr>
<td height="55" bgcolor="#CCCCCC"> </td>
<td bgcolor="#CCCCCC"> </td>
<td> </td>
<td> </td>
<td bgcolor="#CCCCCC"> </td>
<td> </td>
<td bgcolor="#CCCCCC"> </td>
<td bgcolor="#CCCCCC"> </td>
</tr>
<tr>
<td bgcolor="#CCCCCC"> </td>
<td bgcolor="#CCCCCC"> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td bgcolor="#CCCCCC"> </td>
<td bgcolor="#CCCCCC"> </td>
</tr>
</table>
<div id="Content">
<h1>Gray Box</h1>
<p>Bla, bla, bla</p>
<p>Bla, bla, bla</p>
</div>
</body>
</html>

**LadynRed** · 10-05-2007, 04:25 PM

Don't even worry about IE for MAC, it's a D-E-A-D browser and most MAC users will have left it in the dust a long time ago now that MS has abandoned it.

You are never going to get pixel-prefect rendering across all browsers, not happening. One of your first mistakes is in using position:absolute, you're better off using the normal document flow and floats than trying nail things in place.

I can pick this apart later after work, but it would help to see have the images, or see the images for the effect you're after.

**Hans G.** · 10-05-2007, 06:02 PM

thanks, does my doc type have anything to do with this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

HTML Forum

Find a Professional HTML Freelancer!

FREE Outsourcing eBook!