homepage Welcome to WebmasterWorld Guest from 184.73.40.21
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / HTML
Forum Library, Charter, Moderators: incrediBILL

HTML Forum

    
Div position rendering on IE and FF
Why IE renders badly?
lamorales



 
Msg#: 4115996 posted 9:22 pm on Apr 14, 2010 (gmt 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


#container
{
position:relative;
margin: 0 auto;
width:777px;
}
#header
{
background:url(Pix/bannerGold.jpg);
height:108px;
}
#navigation
{
float:left;
width:777px;
}
#contents
{
clear:left;
padding:20px;
}
#footer
{
padding:0px;
height:1%;
}

the HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>text</title>
<meta http-equiv="Content-Type" content= "text/html; charset=us-ascii">
<link rel="stylesheet" href="theaboveCode.css" type="text/css">
</head>
<body>
<div id="container">
<div id="header"></div>
<div id="navigation">
<ul>
<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>
</ul>
</div>
<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>
<br><br><br>
<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>
<div id="footer"><p>ęCompany Name 2010</p></div>
</div>
</body>
</html>


Thanks

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

 

webeno



 
Msg#: 4115996 posted 11:38 am on Apr 16, 2010 (gmt 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">
<![endif]-->
<![If !IE]>
<link rel="stylesheet" href="CSSForOtherBrowsers.css" type="text/css">
<![endif]>

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

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / HTML
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved