Welcome to WebmasterWorld Guest from 54.146.240.181

Forum Moderators: not2easy

Message Too Old, No Replies

CSS Footer and all browsers

     

kenroar

5:21 am on Jul 29, 2007 (gmt 0)

5+ Year Member


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

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

WebmasterWorld Senior Member 10+ Year Member



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

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

WebmasterWorld Senior Member 5+ Year Member



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

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

5+ Year Member



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;
}

 

Featured Threads

Hot Threads This Week

Hot Threads This Month