homepage Welcome to WebmasterWorld Guest from 107.20.131.154
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Pubcon Website
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: DrDoc

CSS Forum

    
CSS Footer and all browsers
kenroar




msg:3407519
 5:21 am on Jul 29, 2007 (gmt 0)
I am having trouble with my footer showing up correctly in all browsers. Without being allowed to point you to the location, it will be difficult to give you a good picture of the problem. My footer is a jpg image and should be centered as the window fluctuates. Here is what I have for my HTML:

------------------------After the header:

<br class="clear" />
<div id="footer" />
<div>

------------------------Here is my CSS:

/* Footer */

#footer {
width: 960px;
min-width: 910px;
margin: -84px 0px 0px 0px;
_margin: 0px;
background: transparent url(../images/footer.png) bottom center no-repeat;
_background: none;
position: relative; /* Needed for Safari */
}

#footer div {
width: 1027px;
height: 60px;
margin: 0px auto;
padding-top: 40px;
color: #FFFFCC;
font-size: 12px;
}

#footer a {
color: #FFCC66;
font-size: 12px;
margin-right: 10px;
}

#footer_left {
margin-left: 0px;
}

#footer_right {
margin-left: 0px;
}

#footer_right a img {
margin-bottom: -15px;
}

 

Marshall




msg:3407570
 8:28 am on Jul 29, 2007 (gmt 0)

If your footer is not contained within a page container, then add this to the footer's outer container CSS:

margin: 0 auto;
padding: 0px;
text-align: left; /* Needed for IE*/

I don't understand, though, while your #footer div is wider than the #footer.

Marshall

Xapti




msg:3408074
 8:27 pm on Jul 29, 2007 (gmt 0)

yeah I don't get this! you didn't explain why you have a div inside your footer... do you really need more than 1?
And like marshall said... why is the inside div wider than it's container?

Strange that you'd say position:relative is required for Safari. I don't know much about safari, but it doesn't make much sense to me that that would fix anything, unless safari (your your page) is extremely buggy.

Are you running a proper doctype at the top of your pages?

As Marshall said (just reiterating for clairifaction), The simplest way to center a block level item horizontally is to use margin:0 auto, which makes top and bottom margin 0, and the left and right AUTOmatically fit the remaining space. (Content cannot go on top of the margined space unless you use absolute positioning, but chances are you don't want that anyway)

kenroar




msg:3409842
 7:15 pm on Jul 31, 2007 (gmt 0)

OK, I incorporated some of your suggestions. The footer now appears as it should for Safari, Firefox, and IE 7. Unfortunately, IE 6 still does not show the footer correctly. Here is what I have:

HTML ---------------

....
</script><!--[if lt IE 7.]>
<script defer type="text/javascript" src="css/pngfix.js"></script>
<![endif]--><!--Preload BG-->....

<style type="text/css">
body
{background-image: url("images/main_bg.jpg");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: top center}
</style>
</head> (For some reason, when I remove the style immediately above, it does not show up correctly.)

<br class="clear" />
<div id="footer" />

CSS ----------------

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

body {
margin: 0px auto;
color: #FFCC66;
font-size: 11px;
font-family: "Arial", "Helvetica", "Verdana", sans-serif;
_background: #FFF url(../images/footer.jpg) bottom center no-repeat;
}

br.clear {
clear: both;
}

a img {
border: none;
}

img, div {
behavior: url(iepngfix.htc);
}

#container {
width: 100%;
/* background: transparent url(../images/body_bg.gif) top center repeat-x; */
background: transparent url(../images/main_bg.jpg) top center no-repeat;
}

#contentainer {
width: 1027px;
height: 100%;
padding: 0px 0px 100px 0px;
_padding-bottom: 0px;
background-color: transparent;
background-position: bottom left;
background-repeat: no-repeat;
}

/* Content */

#flash_nav {
width: 830px;
height: 255px;
}

/* Footer */

#footer {
width: 100%;
min-width: 800px;
margin: -84px 0px 0px 0px;
_margin: 0px;
background: transparent url(../images/footer.png) bottom center no-repeat;
_background: none;
padding: 0px;
text-align: left; /* Needed for IE*/
}

#footer div {
width: 940px;
height: 60px;
margin: 0px auto;
padding-top: 40px;
color: #FFFFCC;
font-size: 12px;
}

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.
Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About
© Webmaster World 1996-2014 all rights reserved