Welcome to WebmasterWorld Guest from 54.145.39.186

Forum Moderators: not2easy

Message Too Old, No Replies

Tricky layout Firefox vs IE

     

codeman

7:23 pm on Dec 2, 2009 (gmt 0)

5+ Year Member



I was very happy after getting this layout to look perfect in Firefox. Then I viewed the page in IE, and it didn't even slightly resemble what I had in Firefox.

The object of this layout is to have a fixed width, two column page with header and footer. I am hoping to have the maincontent id div appear high in the html code for SEO benefits.

I must warn you that I may be missing some very elementary knowledge of CSS layout technique, so I fully expect that solutions will be painfully obvious to some. Please be gentle - there are so many elements going on in this page that I wouldn't even know where to begin looking for answers - it is if everything works beautifully in Firefox, and absolutely nothing works in IE. Here it goes:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<head>

<style>
body{ background:#000; color:#CCC;}
#wrapper { width:100%; position:absolute; text-align:center; left:50%; margin-left:-480px;}
#header { width:960px;position:relative; top:-780px;}
#main { width:958px;border-left:1px solid #cdcdcd;border-right:1px solid #cdcdcd; position:relative; top:165px;text-align:center; }
#mainbg { width:958px; height:720px;border-left:1px solid #cdcdcd;border-right:1px solid #cdcdcd; position:absolute; top:700px;}
#footer {border-top:1px solid #DEE0CF; width:960px; position:absolute; top:1250px; z-index:1; }

#hometop{ position:absolute; top:10px;;}
#homemenu{ position:relative; left:10px;}
#splash1{ position:relative; left:210px; top:-242px;}
#splash2{ position:relative; left:579px; top:-485px;}

#homeproducts{ position:relative; left:13px; top:65px; z-index:100;}
#homerightcol{ position:relative; float:right; top:-517px; right:26px; z-index:200}
#maincontent{ position:relative; top:870px; left:10px; z-index:120;}
</style>

</head>

<body>

<div id="wrapper">

<div id="main">
<div id="mainContent">
Text to appear first to search engines
</div>

<div id="hometop">
<div id="homemenu">
Navigation
</div>


<div id="splash1">
Appears directly to right of navigation in homemenu id
</div>
<div id="splash2">
Appear directly to right of splash1
</div>

</div>

<div id="homeproducts">

Main product listing
</div>

<div id="homerightcol">

right column for ads and banners
</div>

</div>
<div id="header">
Header navigation
</div>

<div id="footer" class="dividers">

footer links

</div>


</div>

</body>

</html>

limbo

5:59 pm on Dec 17, 2009 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Maybe try another route.

Using floats within a main container will have a similar effect. One container, then a container for content floated right (fixed width) Navigation floated left (also fixed width)

Something like:

#grip {width:600px;margin:0 auto;height:300px;background:#eee;}
#content {width:400px;float:right;background:#ddd;}
#nav {width:180px;float:left;background:#ccc;}
#footer {width:600px;background:#bbb;margin:0 auto;}

--

<div id="grip">
<div id="content">
<p>Content - Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>

<div id="nav">
<p>Nav - Lorem ipsum dolor sit amet, consectetuer adipiscing elit</p>
</div>

</div><!-- end grip -->

<div id="footer">
<p> Footer - dolor sit amet, consectetuer adipiscing elit</p>
</div>

--

This is untested, but might give you a different starting point.

 

Featured Threads

Hot Threads This Week

Hot Threads This Month