Browsers: Browser response

started by Luke on Jul 19, 2004 — RSS Feed

Luke Luke
Posts: 5

Hi there
I insert 2 graphics on a web page, each in their own div with absolute position. The first one is width10px x height21px. The second one is 1 px square. In IE things are OK. In Netscape (6 and 7) the second graphic appears lower than it should be. Can anyone tell me why this is and how can I keep them in line as they are in IE?
Luke

Joe Gillespie Joe Gillespie
Posts: 528

It's impossibe to say without seeing it. Could be that the two divs in question are inheriting something from beyond that you are not aware of.

Luke Luke
Posts: 5

Hi Joe
From beyond?
There is nothing else on the page, which was opened in DW. There is no style sheet either. The first graphic is a simple bracket, nothing too fancy. The second graphic is supposed to align with the bracket.
Luke

Baxter Baxter
Posts: 157

Well, if there is no style sheet, then you can't exactly postion them absolutely, can you?

Seriously... post your code or something.

Luke Luke
Posts: 5

Here it is.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) {  //reloads the window if Nav4 resized
 if (init==true) with (navigator) {if ((appName=="Netscape"&&(parseInt(appVersion)==4)) {
   document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
 else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
//-->
</script>
</head>

<body>
<div id="Layer1" style="position:absolute; left:2px; top:2px; width:12px; height:20px; z-index:1"><img src="Graphics/footerl.gif" width="10" height="21"></div>
<div id="Layer2" style="position:absolute; left:36px; top:10px; width:10px; height:5px; z-index:2"><img src="Graphics/px.gif" width="1" height="1"></div>
</body>
</html>

Joe Gillespie Joe Gillespie
Posts: 528

If they are supposed to line up, shouldn't the tops be the same value or am I misunderstanding what you are trying to achieve?

One div has a top of 2px and the other 10px. You also have different z-indexes - why?

Inline styles are also not as well supported across browsers as ones specified in a style sheet. Only use inline if there is no other option.

Luke Luke
Posts: 5

Try this.
Make, say, a blue gif 20px x 20px. Place it at the top of your page.
Make a red gif 1px x 1px and place it at the top of your page next to the blue square. In IE, both gifs will appear at the top of the page with no margin. In Netscape, the blue square will be at the top with no margin, but the single pixel will appear 2/3 below the top of the blue square. Any explanation?

Joe Gillespie Joe Gillespie
Posts: 528

Sorry, when I do it, it works exactly as expected in all browsers. There is obviously something fundamentally wrong with your methodology.

You must login to reply