can anyone help this newbie?

[purplerose]

Can anyone help me with this, I am lost....I am a relative newbie to using CSS to control a layout and spent all day yesterday getting my page to look just right in FF, went to check it today in IE and my footer is floating at the top of the page and my background color for my wrapper container is not showing up?this is the page URL http://www.prcreations.net/new/any help would be most appreciated before I start tearing out my hair :::smile:::Thanks in advance!!

[manojdubey]

I think you should use more specific styles to set your footer at exact position. Like you can use div or set margin attributes properly and also one thingFirefox does not support inline stylesheets like what we declare<input type=text style="margin:0px">instead use something like<style>.abc{margin:0px;}</style><input type=text class="abc">for morebetter you post ur problematic code here.at the forumGood luckManoj

[L_U]

Can anyone help me with this, I am lost....I am a relative newbie to using CSS to control a layout and spent all day yesterday getting my page to look just right in FF, went to check it today in IE and my footer is floating at the top of the page and my background color for my wrapper container is not showing up?this is the page URL http://www.prcreations.net/new/any help would be most appreciated before I start tearing out my hair :::smile:::Thanks in advance!!

<{POST_SNAPBACK}>

ok, first of all, your css and html are a bit disorganized. Try to use logical structures and names in your code.I always try to be specific in my css so I can debug much faster. For instance use "div#content p.words { ... }" to address the paragraph (and use a better classname )Now, for your problem.. I don't know what you mean by your "wrapper container" and I really don't have time to go through all your code. But the reason your footer is on the top of the page is probably because your content div is set absolute (why?)Hope this helps you a bit! If you want better help, try to post some example code that's easy to read..

[purplerose]

ok, first of all, your css and html are a bit disorganized. Try to use logical structures and names in your code.I always try to be specific in my css so I can debug much faster. For instance use "div#content p.words { ... }"  to address the paragraph (and use a better classname )Now, for your problem.. I don't know what you mean by your "wrapper container" and I really don't have time to go through all your code. But the reason your footer is on the top of the page is probably because your content div is set absolute (why?)Hope this helps you a bit! If you want better help, try to post some example code that's easy to read..

<{POST_SNAPBACK}>

Ok here is the css code that controls the containers on the page, the one named "page" is the wrapper, then there is the "headerimg" which holds the header image at the top, the "content" container holds all the information in the large left column, and the "sidebar" hold the navigation links, etc. and the "footer" holds my copyright information at the bottom of it all. It is pretty straightforward, trying to keep it simple, and it looks great in FF, but again in IE the footer is floating at the top and the background color for the page container is not showing up.

     #page {           background-color : #b1adbe;		   color : #464253;           position : relative;           width : 778px;           padding : 0;           margin : 0 auto;           text-align : left;           min-height : 800px;      }     #headerimg {           background-image : url(images/header.jpg);           position : absolute;           margin : 0 auto;           width : 778px;           height : 174px;           padding : 0;           border-bottom : 1px solid #9791a9;      }     #content {           position : absolute;           top : 180px;           left : 2px;           right : 220px;           width : 578px;           padding : 0;           border : 0;      }     #sidebar {           position : absolute;           top : 180px;           left : 580px;           right : 20px;           width : 200px;           padding : 0;      }     #footer {           background-color : #9791a9;		   color : #464253;           position : relative;           margin : 0 auto;           width : 778px;           padding : 0;           text-align : center;           border-top : 1px solid #464253;      }

Could really use some help figuring out where I went wrong on this, because I am totally clueless.EDIT: Merged posts.

Edited March 30, 2006 by Jonas

[carinemaz]

Hi,Your background color is not showing in IE because you used "min-height", and IE doesn't support that. So your wrapper does not have any height. You need to replace it with a height size (which will be a pain)or "height: auto;"In that case you need to review your layout.Your header does not have to be absolute, leave it in relative (and by the way, relative position is the default one, so you don't need to specify it in your css, same for height: auto... saves lines in your css and makes it lighter).For your content, instead of absolute, float it left, same for your navigation...And in your footer, use "clear: both"That should solve your problems in IE, and not cause any new ones in FFHope that helps!If still nor working, shoot the questions; and by the way, I can't view your code on your website... Weird?

[raimo]

Can anyone help me with this, I am lost....I am a relative newbie to using CSS to control a layout and spent all day yesterday getting my page to look just right in FF, went to check it today in IE and my footer is floating at the top of the page and my background color for my wrapper container is not showing up?this is the page URL http://www.prcreations.net/new/any help would be most appreciated before I start tearing out my hair :::smile:::Thanks in advance!!

<{POST_SNAPBACK}>

First of all, add a document type to the very first line of Your code.IE really needs it to get doc viewed as planned. Seems You are trying to do XHTML, so remove couple target -attributesfrom a-elements and add these two lines 1st line of Your code:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN""http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">and then validate Your pages to XHTML 1.1 with W3C validator:http://validator.w3.org/2nd: There is one missing </div> somewhere near of line 1323rd: remove this script://Disable right click script III- By Renigadeit not prevent viewing Your source at all, as You see. ;D4th: remove this script://Hide status bar msg II script- by javascriptkit.comYou can't hide statusbar messages with real browsers.Why You should hide/disable those things anyway?Sorry, but all those kind of larkings only spoils Your cool pages.