IE, FF and Netscape incompatibilty using DIVs [modified]

hint_54

The following code as produced different outputs for the 3 browers (the output is correct only for FF) when it was supposed to look the same for all of them. Can anybody help?

// CSS that matters

body { font-family: Verdana; font-size: 8pt; padding: 0; text-align: center; }

div#Container { position: absolute; z-index: 6; margin: 0 auto; }
div#Header { position: absolute; z-index: 4; text-align: left; }
div#Menu { position: relative; z-index: 5; text-align: left; top: 235px; right: 307px; }
div#Content { position: absolute; z-index: 3; text-align: left; top: 235px; }

// XHTML that matters
<div id = "Container">

<div id = "Header">
<table width = "750" border = "0" cellpadding = "0" cellspacing = "0" align = "center">
(...)
</table>
</div>

<!-- Menu -->
<div id = "Menu">
	<table width = "135" border = "0" cellpadding = "0" cellspacing = "0" align = "center">
	(...)
	</table>
</div>

<!-- Content -->
<div id = "Content">
	<table width = "750" border = "0" cellpadding = "0" cellspacing = "0" align = "center">
	(...)
	</table>
</div>

</div>

best regards hint_54 -- modified at 21:57 Sunday 13th August, 2006

eggsovereasy

To me it doesn't really look like its working in any browser, because what comes up for me makes no sense. However, maybe something important got left out when you copied stuff over. Anyway, I would guess, you want a header over the top of two columns menu on the left and content on the right? If that is right then try something like this instead:

<div id="Container">
<div id="PageHeader">HEADER</div>
<div id="InnerContainer">
<div id="Menu">MENU</div>
<div id="Content">CONTENT</div>
</div>
</div>

with this style:

body,html { margin: 0px; padding: 0px; }

#Container
{
width: 750px;
margin: 15px auto;
border: solid 1px black;
}

#PageHeader
{
height: 100px;
background-color: #abcabc;
border-bottom: solid 1px black;
}

#InnerContainer {}

#Menu
{
width: 160px;
float: left;
}

#Content
{
border-left: solid 1px black;
margin-left: 161px;
}

hint_54

It's all fixed now, the problem was in relative and absolute positioning. hint_54

Guffa

hint_54 wrote:

the output is correct only for FF

At last someone who have a grasp on reality. :) Most people having such problems live under misconception that IE is the browser that is correct. How do they differ? I know that IE incorrectly applies text-align to block elements. Why are you using tables in the layout? I hardly ever use a table nowadays, as they are so unpredictable. I can't really follow how you try to position the elements, with absolute positions mixed with all kind of alignments. Perhaps the browsers get confused also. Try to make it simpler, if possible.

--- b { font-weight: normal; }