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!
Subscribe to HRA Now!
Are you a Google Analytics enthusiast?
Share and download Custom Google Analytics Reports, dashboards and advanced segments--for FREE!
www.CustomReportSharing.com
From the folks who brought you High Rankings!
More SEO Content
International SEM | Social Media | Search Friendly Design | SEO | Paid Search / PPC | Seminars | Forum Threads | Q&A | Copywriting | Keyword Research | Web Analytics / Conversions | Blogging | Dynamic Sites | Linking | SEO Services | Site Architecture | Search Engine Spam | Wrap-ups | Business Issues | HRA Questions | Online Courses
Sponsored Content
Browser Hell
Started by
Hans G.
, Oct 05 2007 12:46 AM
10 replies to this topic
#2
BBCoach
-
- Moderator
-
- 402 posts
HR 5
Posted 05 October 2007 - 12:39 PM
Without looking at your code it's impossible to make an evaluation. My recommendation is to build and test in either NS or FF. It it works properly in those, then it'll work in IE.
#3
Hans G.
-
- Members
-
- 99 posts
HR 3
Posted 05 October 2007 - 02:00 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.
CODE
<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>
<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>
Edited by Randy, 06 October 2007 - 08:37 AM.
Added code tags.
#4
Dimmerswitch
-
- Active Members
-
- 72 posts
HR 3
- Location:Madison, Wisconsin
Posted 05 October 2007 - 03:04 PM
QUOTE(Hans G. @ Oct 5 2007, 02:00 PM) 
Below is the code.
CODE
some placeholder markup
Still hard to help without the actual example, but one things that jumps out at me is that the document you've posted will be rendered in quirks mode by all the browsers you listed.
Quirks mode will almost always produce the least-consistent results.
Eric Meyer has a good writeup on rendering modes (and how to trigger standards-compliance mode) at http://www.ericmeyer...ender-mode.html
#5
maleman
-
- Active Members
-
- 677 posts
HR 6
Posted 05 October 2007 - 06:50 PM
I see you're using "height". height can get you into some juicy cross-browser situations faster than you can say "XHTML 1.0". 
As for getting CSS to work the same in all browsers, you'll probably have to use cough. sputter, hiccup, burp...excuse me! "CSS Hacks"
As for getting CSS to work the same in all browsers, you'll probably have to use cough. sputter, hiccup, burp...excuse me! "CSS Hacks"
Edited by maleman, 05 October 2007 - 06:59 PM.
#6
chrishirst
-
- Moderator
-
- 5,881 posts
A not so moderate moderator.
- Location:Blackpool UK
Posted 05 October 2007 - 06:56 PM
Hmm!
A single absolutely positioned div sitting over a table and using negative margins,
Recipe for disaster in every browser I'd say.
A single absolutely positioned div sitting over a table and using negative margins,
Recipe for disaster in every browser I'd say.
#7
Hans G.
-
- Members
-
- 99 posts
HR 3
Posted 05 October 2007 - 07:17 PM
Very informative link, Dimmerswitch. Thanks! I'm going to see if this helps.
#8
Hans G.
-
- Members
-
- 99 posts
HR 3
Posted 05 October 2007 - 07:21 PM
chrishirst, i read your post about your concerns relative to how i've built the page. what do you recommend i do to make this page look the same on every browser? i created the page as an example so to show the problem that i have been encountering.
#9
maleman
-
- Active Members
-
- 677 posts
HR 6
Posted 05 October 2007 - 08:36 PM
This does it for me in IE6 and FF2
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR...ml4/loose.dtd">
<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; top: 301px; left: 50%;
width: 100px;
margin-left: 15px;
text-align: left;
padding: 5px;
z-index:2;
}
h1 {
margin: 0;
padding: 0;
font-size: 12px;
}
p {
margin: 0;
padding: 0;
font-size: 10px;
}
</style>
</head>
<body>
<table width="801" height="558" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td bgcolor="#CCCCCC" height="301"> </td>
<td bgcolor="#CCCCCC"> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td bgcolor="#CCCCCC"> </td>
<td bgcolor="#CCCCCC"> </td>
</tr>
<tr>
<td bgcolor="#CCCCCC" height="55"> </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" height="201"> </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>
If you have cross browser trouble, usee CCS to set td height and hack it for the particular browser.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR...ml4/loose.dtd">
<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; top: 301px; left: 50%;
width: 100px;
margin-left: 15px;
text-align: left;
padding: 5px;
z-index:2;
}
h1 {
margin: 0;
padding: 0;
font-size: 12px;
}
p {
margin: 0;
padding: 0;
font-size: 10px;
}
</style>
</head>
<body>
<table width="801" height="558" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td bgcolor="#CCCCCC" height="301"> </td>
<td bgcolor="#CCCCCC"> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td bgcolor="#CCCCCC"> </td>
<td bgcolor="#CCCCCC"> </td>
</tr>
<tr>
<td bgcolor="#CCCCCC" height="55"> </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" height="201"> </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>
If you have cross browser trouble, usee CCS to set td height and hack it for the particular browser.
#10
chrishirst
-
- Moderator
-
- 5,881 posts
A not so moderate moderator.
- Location:Blackpool UK
Posted 06 October 2007 - 09:08 AM
Why do you have a table with nothing but spaces in it?
What I would recommend is to learn how to use CSS effectively. Tables and divisions (especially ones that are positioned absolute) are independent entities within the document flow so will NOT interact with each other.
Using this approach will always cause problems with positioning.
QUOTE
what do you recommend i do to make this page look the same on every browser? i created the page as an example so to show the problem that i have been encountering
What I would recommend is to learn how to use CSS effectively. Tables and divisions (especially ones that are positioned absolute) are independent entities within the document flow so will NOT interact with each other.
Using this approach will always cause problems with positioning.
#11
Hans G.
-
- Members
-
- 99 posts
HR 3
Posted 09 October 2007 - 04:46 PM
Thanks for everyone's help. As I wrote, I'm new to CSS so I'm learning as i go along - and appreciate all your help. I was able to get it working the same way in all browsers/platforms except for MAC Safari. Well, guess you can't win em all - or can you? Here's where I am now:
CODE
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<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: 1.0em;
z-index:2;
white-space: nowrap;
}
h1 {
font-size:12px; margin:0;
}
p {
font-size:10px; margin:0;
}
</style>
</head>
<body>
<table width="801" height="558" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td height="251" 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 height="252" 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><a href="http://www.test.com">Gray Box</a></h1>
<p>Bla, bla, bla</p>
<p><a href="http://www.test.com">Bla, bla, bla</a></p>
</div>
</body>
</html>
<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: 1.0em;
z-index:2;
white-space: nowrap;
}
h1 {
font-size:12px; margin:0;
}
p {
font-size:10px; margin:0;
}
</style>
</head>
<body>
<table width="801" height="558" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td height="251" 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 height="252" 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><a href="http://www.test.com">Gray Box</a></h1>
<p>Bla, bla, bla</p>
<p><a href="http://www.test.com">Bla, bla, bla</a></p>
</div>
</body>
</html>
0 user(s) are reading this topic
0 members, 0 guests, 0 anonymous users
