Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations strongm on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Div position rendering in different browsers

Status
Not open for further replies.
elmiocid

elmiocid

Technical User
Jul 29, 2007
22
ES
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" "<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>©SoloWebs 2010</p></div>
</div>
</body>
</html>


Thanks
 
Sort by date Sort by votes
The question is, do you really need all this absolute positioning? For most cases, absolute positioning will not be necessary and would be best avoided. From your code, I would expect all your absolutely positioned elements to be positioned according to the #container element, which makes it very difficult to assess where they should appear.

[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]
 
Upvote 0 Downvote
Thanks Vragabond, how do I define the inner divs then to have them go in the right places?

 
Upvote 0 Downvote
It's hard to say, but natural flow of elements (every next element is directly below the previous one), plus some margins (to make the gaps between elements larger) and floats (to have more than one element on the same line) is usually used to accomplish most basic (and not so basic) designs. Imagine your page as a successive boxes and it will become pretty clear how they stack up.

[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]
 
Upvote 0 Downvote
Hi
I had similar problems but have found the following helped me.
It resets' the code to the same starting points for IE Firefox etc.

Hope this helps
Regards
Clive
<style type="text/css">
<!--
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6 {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
}
</style>
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

cae154
  • Locked
  • Question
Body of email not appearing in correct font on iPhone and iPad
Replies
1
Views
411
spamjim
spamjim
soni21
  • Locked
  • Question
JavaScript String to Number Conversion in HTML: Seeking Clarification
Replies
4
Views
710
Chris Miller
Chris Miller
Mike Lewis
  • Locked
  • Question
How to refresh a Javascript file in the browser's cache?
Replies
4
Views
636
Mike Lewis
Mike Lewis
PeDa
  • Locked
  • Question
Media query: display = none/inline/block 1
Replies
1
Views
377
PeDa
PeDa
jason.lex
  • Locked
  • Question
iPhone browsers (chrome and safari) output different compared to other browsers 1
Replies
2
Views
85
jason.lex
jason.lex

Part and Inventory Search

Sponsor

Back
Top