Welcome to WebmasterWorld Guest from

Forum Moderators: incrediBILL

Message Too Old, No Replies

Div position rendering on IE and FF

Why IE renders badly?

9:22 pm on Apr 14, 2010 (gmt 0)

New User

5+ Year Member

joined:Feb 11, 2010
posts: 4
votes: 0

Hi there

Why absolutely positioned divs are rendered as wanted by Mozilla┤s Firefox, but not by MS Internet Explorer?

The main layout defined in the external CSS works as wanted in all 3 browsers (Firefox, IE6 and IE7) but the divs defined in the HTML only work fine in Firefox.. IE moves them out of place!

Here is the CSS, any other comments on my code would be appreciated, I┤ve thinned it out so it┤s not too long

margin: 0 auto;

the HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<meta http-equiv="Content-Type" content= "text/html; charset=us-ascii">
<link rel="stylesheet" href="theaboveCode.css" type="text/css">
<div id="container">
<div id="header"></div>
<div id="navigation">
<li><a href="homeAlt.htm"><img src="Pix/inicioBtt.gif" width="100" height="50" border="0" alt="Inicio" onmouseover="this.src='Pix/buttBuild/inicioAlt.gif';" onmouseout="this.src='Pix/inicioBtt.gif';"></a></li>
<li><a href="alojamientoAlt.htm"><img src="Pix/aloBtt.gif" width="100" height="50" border="0" alt="Alojamiento" onmouseover="this.src='Pix/buttBuild/alojAlt.gif';" onmouseout="this.src='Pix/aloBtt.gif';"></a></li>
<li><a href="entorno.htm"><img src="Pix/entornoBtt.gif" width="100" height="50" border="0" alt="Entorno" onmouseover="this.src='Pix/buttBuild/entornoAlt.gif';" onmouseout="this.src='Pix/entornoBtt.gif';"></a></li>
<li><a href="situacion.htm"><img src="Pix/situacionBtt.gif" width="100" height="50" border="0" alt="Situacion" onmouseover="this.src='Pix/buttBuild/situacionAlt.gif';" onmouseout="this.src='Pix/situacionBtt.gif';"></a></li>
<li><a href="contactar.htm"><img src="Pix/contactarBtt.gif" width="100" height="50" border="0" alt="Contactar" onmouseover="this.src='Pix/buttBuild/contactarAlt.gif';" onmouseout="this.src='Pix/contactarBtt.gif';"></a></li>
<div id="content">
<p>long text<p/><br><br>
<img class="marco" src="Pix/pe%F1aCuraSign.jpg" width="225" height="137" alt="Mirador La Pe&ntilde;a El Cura"><br><br><br><br>
<div id="miradorTxt" style="position:absolute; width:245px; height:137px; z-index:6; left: 268px; top: 330px">more text</div>
<div id="view" style="position:absolute; width:225px; height:137px; z-index:5; left: 520px; top:320px"><img class="marco" src="Pix/viewPe%F1aCura.jpg" width="225" height="137" alt="Vista desde Pe&ntilde;a El Cura"></div><br>
<p style=" width:245px;">more text<p/><br><br><br><br><br><br><br><br>
<div id="gr14Sign" style="position:absolute; width:225px; height:214px; z-index:8; left: 268px; top: 510px"><img class="marco" src="Pix/gr14Sign.jpg" width="225" height="214" alt="Cartel de la senda GR14"></div>
<div id="gr14Path" style="position:absolute; width:225px; height:214px; z-index:9; left: 513px; top: 510px"><img class="marco" src="Pix/gr14camino.jpg" width="225" height="214" alt="Senda GR14"></div>
<img class="marco" src="Pix/ermitaSign.jpg" width="225" height="221" alt="Ermita de San Miguel">
<div id="ermita" style="position:absolute; width:225px; height:221px; z-index:10; left: 268px; top: 790px"><img class="marco" src="Pix/ermita.jpg" width="225" height="221" alt="Ermita San Miguel"></div>
<div id="ermitaText" style="position:absolute; width:245px; height:137px; z-index:11; left: 513px; top: 840px">more text</div>
<p style=" width:245px;">more text<p/>
<p style=" width:245px;">another chunck of text<p/>
<p style=" width:245px;">and more text<p/>
<div id="mirandaBoat" style="position:absolute; width:225px; height:362px; z-index:10; left: 368px; top: 1050px"><img class="marco" src="Pix/mirandaBoat.jpg" width="225" height="362" alt="Cruceros fluviales"></div>
<div id="footer"><p>ęCompany Name 2010</p></div>


[edited by: tedster at 11:29 pm (utc) on Apr 14, 2010]
[edit reason] removed identifying information [/edit]

11:38 am on Apr 16, 2010 (gmt 0)

New User

5+ Year Member

joined:Apr 16, 2010
posts: 19
votes: 0

just as a side note, you may have to use a different CSS sheet for IE. Use the below in the head section of your page replacing <link rel="stylesheet" href="theaboveCode.css" type="text/css">:

<!--[if IE]>
<link rel="stylesheet" href="CSSForIE.css" type="text/css">
<![If !IE]>
<link rel="stylesheet" href="CSSForOtherBrowsers.css" type="text/css">

[edited by: tedster at 4:13 pm (utc) on Apr 17, 2010]