homepage Welcome to WebmasterWorld Guest from 54.234.128.25
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Subscribe to WebmasterWorld

Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderator: open

CSS Forum

    
Tricky layout Firefox vs IE
codeman




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

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




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

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.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
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