Welcome to WebmasterWorld Guest from 54.234.38.8

Forum Moderators: not2easy

Message Too Old, No Replies

CSS Footer and all browsers

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

Junior Member

5+ Year Member

joined:July 29, 2007
posts:71
votes: 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;
}

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

Senior Member from US 

WebmasterWorld Senior Member 10+ Year Member

joined:Sept 4, 2001
posts: 2144
votes: 7


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

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

Senior Member

WebmasterWorld Senior Member 5+ Year Member

joined:Mar 18, 2007
posts:671
votes: 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)

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

Junior Member

5+ Year Member

joined:July 29, 2007
posts:71
votes: 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;
}