CSS - Footer Issues In Firefox

I have a css file which looks good enough in internet explorer 6 but when i check it in firefox the footer box goes to the top of the page and the footer links go to the right column box. Where am I going wrong with this? Can anyone please point me in teh right direction please?

Here is the css:-

Code:

body {
	background-color: #4A4237;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	text-align: center;
    background-image:url(../../../My Pictures/page_background.gif);
}
* {
	margin: 0px;
	padding: 0px;
}
html {height:100%; margin-bottom:1px;} 

#wrapper {
	width: 700px;
	margin-right: auto;
	margin-left: auto;
	background-repeat: repeat-y;
	text-align: left;
	background-color: #FFFFFF;
}


#nav {
	background-color: #775d42;
	padding-top: 10px;
	padding-bottom: 5px;
	padding-left: 15px;
}

#navlist li
{
	display: inline;
	list-style-type: none;
	padding-right: 20px;
	text-transform: capitalize;
}

#navlist a {
	text-decoration: none;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	color: #FFFFFF;
	font-size: 15px;
	font-weight: bolder;
}

#navlist a:hover {
	color: #AF9981;
}

#col1 {
	float: left;
	width: 500px;
}

#col2 {
	float: left;
	width: 200px;
}

#col1content p {
	margin-bottom: 10px;
	color: #666666;
	font-size: 12px;
	line-height: 140%;
	text-align: justify;
}

#col1content {
	padding: 0px 15px 15px;
	
}

.footer {
	BORDER-TOP: #a4d0ed 2px solid; FONT-SIZE: 10px; PADDING-BOTTOM: 20px; WIDTH: 700px; COLOR: #707070; PADDING-TOP: 10px; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif; BACKGROUND-COLOR: #333333; TEXT-ALIGN: center; height: 60px;
}

.footer A:link {
	COLOR: #9ebd18; TEXT-DECORATION: none
}

.footer A:visited {
	COLOR: #9ebd18; TEXT-DECORATION: none
}
.footer A:hover {
	COLOR: #a5cfeb; TEXT-DECORATION: underline
}
.footer A:hover {
	COLOR: #a5cfeb; TEXT-DECORATION: underline
}

#col2content {
	padding: 15px;
	text-align: center;
}
.imageborder {
	padding: 5px;
	border: 1px solid #3A4A14;
	background-color: #F2F3F4;
}
.subhead {
	font-size: 11px;
	color: #78442C;
	margin-top: 5px;
	margin-bottom: 5px;
}
.sidebar {
	margin-bottom: 10px;
	color: #666666;
	font-size: 10px;
	line-height: 140%;
}
h1 {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 36px;
	color: #DAD6CF;
	padding-top: 10px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 15px;
}
h2 {

	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 20px;
	color: #B4AA9E;
	padding-top: 10px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 15px;
}
h3 {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 20px;
	color: #B4AA9E;
	padding-bottom: 10px;
	padding-top: 5px;	
}
#footer p {
	color: #EEEBE8;
	font-size: 9px;
	padding-top: 2px;
	padding-bottom: 3px;
	padding-left: 15px;
}
a:link {
	color:#0059b4;
	text-decoration: none;
}
a:visited {
	color:#0059b4;
	text-decoration: none;
}
a:hover {
	color:#0059b4;
	text-decoration: underline;
}
a:active { color:#0059b4;}

If anyone can help me it would be very much appreciated as i am absolutely puzzled. I am not sure if i have put something wrong in the footer or if it is the wrapper.

Thanks in advance

On the front page of my site, I have a footer that seems to slide into the left column if there is not enough content (In FireFox). I've tried to use style="clear:both" just before the footer begins, but to no avail. Any idea what is going on here?

http://www.hawaiipca.net/

(the aren't affected, just the front page)

Hello everyone

I have a problem with keeping a footer at the bottom of a page. It hovers over other elements in Firefox 3.6.6

Also I'd like to have the footer at the right side and not centered. If I define "right" however, part of it disappears in IE.

The style sheet is no from me.

I would appreciate, if someone were kind enough to have a look and help me. Thanks in advance for any input

Eva

Here it is:

/***********************************************/
/* 3col_leftNav.css */
/* Use with template 3col_leftNav.html */
/***********************************************/

/***********************************************/
/* HTML tag styles */
/***********************************************/

body{
background-image: url(../../Lokale%20Einstellungen/Temporary%20Internet%20Files/Lokale%20Einstellungen/Temporary%20Internet%20Files/Content.IE5/4WPRVLBA/head6.png);
background-repeat: no-repeat;
background-position: left top;
font: 13px Verdana, Arial, Helvetica, sans-serif;
/* size: 100%; */
color: #333333;
line-height: 1.3;
margin: 0px;
padding: 0px;
}


img{
border: 0;
}

a{
color: #006699;
text-decoration: none;
}

a:link{
color: #006699;
text-decoration: none;
}

a:visited{
color: #006699;
text-decoration: none;
}

a:hover{
color: #006699;
text-decoration: underline;
font-weight: bold;
}

h1{
font-family: Verdana,Arial,sans-serif;
font-size: 114%;
color: black;
margin: 0px;
padding: 0px;
}

h2{
font-family: Verdana,Arial,sans-serif;
font-size: 100%;
color: black;
margin: 0px;
padding: 0px;
}

h3{
font-family: Verdana,Arial,sans-serif;
font-size: 100%;
color: black;
margin: 0px;
padding: 0px;
}

h4{
font-family: Verdana,Arial,sans-serif;
font-size: 100%;
font-weight: normal;
color: #333333;
margin: 0px;
padding: 0px;
}

h5{
font-family: Verdana,Arial,sans-serif;
font-size: 100%;
color: #334d55;
margin: 0px;
padding: 0px;
}

ul{
list-style-type: square;
}

ul ul{
list-style-type: disc;
}

ul ul ul{
list-style-type: none;
}

label{
font-family: Arial,sans-serif;
font-size: 100%;
font-weight: bold;
color: #334d55;
}

table{
padding: 5 px;
}

/***********************************************/
/* Layout Divs */
/***********************************************/

#masterhead{
padding: 30px 0px 0px 0px;
/* border-bottom: 1px solid #cccccc; */
width: 950px;
}

#navBar{
float: left;
width: 195px;
margin: 0px;
/* 19.08.2008 padding-top: -5px;*/
padding-top: -5px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
/* background-color: #e4f2f9; */
/* 19.08.2008 border-right: 1px solid #cccccc; */
}

#headlines{
position: absolute;
left: 690px;
top: 135px;
font-size: 85%!important;
/* font-size: 90%; */
/* float:right; */
width: 230px;
margin-top: -30px;
/* border-left: 1px solid #cccccc; */
/* border-bottom: 1px solid #cccccc;*/
/* padding-right: 10px; */
}

#headlines h3{
margin-top: 3px;
margin-bottom: 3px;
margin-left: 10px;
padding-top: 1px;
padding-bottom: 1px;
font-weight: 900;
}

#content{
float: left;
padding-left: 24px;
width: 460px;
font-size: 107%;
line-height: 1.4;
/* position: absolute;
top: 184px;
left: 210px; */
}

#content h1,h2 {
margin: 0px;
padding-top: 2px;
padding-right: 2px;
padding-bottom: 2px;
padding-left: 0px;
font-size: 130%;
font-color: black;
}

#content h3 {
margin: 0px;
padding-top: 2px;
padding-right: 2px;
padding-bottom: 2px;
padding-left: 0px;
font-size: 120%;
font-height: 90%;
font-weight: 900;
}


/***********************************************/
/* Components */
/***********************************************/

#siteName{
margin: 0;
padding-top: 0px;
padding-right: 0;
padding-bottom: 0;
padding-left: 200px;
/* font-size: x-large; */
color: #FF9900;
}


/************* #globalNav styles **************/

#globalNav{
/* border-bottom: 1px solid #CCC; */
color: #006699;
text-align: center;
/* font-weight: bold; */
margin-top: 40px;
padding-top: 10px;
padding-right: 0px;
padding-bottom: 5px;
padding-left: 10px;
/* 19.08.2008 border-top: 1px solid #cccccc; */
}

#globalNav img{
display: block;
}

#globalNav a {
/* font-size: 120%; */
padding: 0 4px 0 0;
}

/*************** #pageName styles **************/

/*
#pageName{
margin: 0px;
padding-top: 30px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 20px;
}
*/

/************* #breadCrumb styles *************/

#breadCrumb{
font-size: 80%;
padding: 2px 0px 0 10px;
}


/************** .feature styles ***************/

.feature{
padding: 2px 2px 10px 10px;
font-size: 80%;
}

.feature h3{
padding: 30px 0px 5px 0px;
text-align: center;
color: #006699;
}

.feature img{
float: left;
padding: 10px 10px 0px 0px;
}


/************** .story styles *****************/

.story{
clear: both;
font-size: 80%;
padding-top: -40px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
}

.story p{
padding: 0px 0px 10px 0px;
}


/************* #siteInfo styles ***************/

#siteInfo{
font-size: 75%;
color: #cccccc;
padding: 10px 10px 10px 10px;
text-align: right;
border-top: 0px none #cccccc;
/* border-right: 1px solid #cccccc;
border-bottom: 1px solid #cccccc;
border-left: 1px solid #cccccc; */

}

#siteInfo img{
padding: 4px 4px 4px 10px;
vertical-align: middle;
}


/************* #search styles ***************/

#search{
padding: 5px 0px 5px 10px;
border-bottom: 1px solid #cccccc;
font-size: 90%;
}

#search form{
margin: 0px;
padding: 0px;
}

#search label{
display: block;
margin: 0px;
padding: 0px;
}


/*********** #navBar link styles ***********/

#navBar ul a:link, #navBar ul a:visited {display: block;}
#navBar ul {list-style: none; margin: 0; padding: 0;}

/* hack to fix IE/Win's broken rendering of block-level anchors in lists */
#navBar li {border-bottom: 1px solid #EEE;}

/* fix for browsers that don't need the hack */
html>body #navBar li {border-bottom: none;}


/*********** #sectionLinks styles ***********/

#sectionLinks{
position: relative;
margin: 0px;
padding: 0px;
/* border-bottom: 1px solid #006699; */
font-size: 90%;
}

#sectionLinks h3{
padding: 10px 0px 2px 10px;
}

#sectionLinks a {
display: block;
/* border-top: 1px solid #006699; */
padding: 2px 0px 2px 10px;
}

#sectionLinks a:hover{
/* background-color: #dddddd;*/
}


.navigate {
overflow: hidden;
width: 204px;
padding-bottom: 1px;
}

/**Navigation Menu **/
.navigate ul, .navigate li {
list-style: none;
margin: 0px 0px!important;
padding: 0px 0px!important;
line-height: 1.5em;
}


/**erste Navigationseben**/
.navigate li.current span, .navigate li a, .navigate li a:link, .navigate li a:visited, .navigate li a:hover, .navigate li a:focus, .navigate li a:active {
display: block;
border: 0;
border-bottom: 1px solid #86c2e3;
border-top: 1px solid #fff;
border-right: 1px solid #86c2e3;
width: 100%;
text-decoration: none;
margin: 0;
padding: 5px 5px 5px 15px;
font-size: 1.0em;
font-weight: bold;
}

.navigate[class] li.current span, .navigate[class] li a, .navigate[class] li a:link, .navigate[class] li a:visited, .navigate[class] li a:hover, .navigate[class] li a:focus, .navigate[class] li a:active {
width: auto;
}

.navigate li a, .navigate li a:link, .navigate li a:visited, .navigate li a:hover, .navigate li a:focus, .navigate li a:active {
background: url(../../Lokale%20Einstellungen/Temporary%20Internet%20Files/Lokale%20Einstellungen/Temporary%20Internet%20Files/Content.IE5/4WPRVLBA/navi_0_0.png) #e4f2f9 no-repeat 0px 0px;
padding: 5px 5px 5px 15px;
color: #000;
font-weight: bold;
}

.navigate li a:hover, .navigate li a:focus, .navigate li a:active {
background: url(../../Lokale%20Einstellungen/Temporary%20Internet%20Files/Lokale%20Einstellungen/Temporary%20Internet%20Files/Content.IE5/4WPRVLBA/navi_0_1.png) #e4f2f9 no-repeat 0px 0px;
}

.navigate li.current span, .navigate li.current a, .navigate li.current a:link, .navigate li.current a:visited, .navigate li.current a:hover, .navigate li.current a:focus, .navigate li.current a:active {
background: url(../../Lokale%20Einstellungen/Temporary%20Internet%20Files/Lokale%20Einstellungen/Temporary%20Internet%20Files/Content.IE5/4WPRVLBA/navi_root_current.png) #EFE9D3 no-repeat 0px 0px;
color: #000;
}

.navigate li.current a.current, .navigate li.current a.current:link, .navigate li.current a.current:visited, .navigate li.current a.current:hover, .navigate li.current a.current:focus, .navigate li.current a.current:active {
background: url(../../Lokale%20Einstellungen/Temporary%20Internet%20Files/Lokale%20Einstellungen/Temporary%20Internet%20Files/Content.IE5/4WPRVLBA/navi_root_current.png) #EFE9D3 no-repeat 0px 0px;
color: #000;
}


/*********** .relatedLinks styles ***********/

.relatedLinks{
position: relative;
margin: 0px;
padding: 0px 0px 10px 10px;
font-size: 90%;
}

.relatedLinks h3{
padding: 10px 0px 2px 0px;
}

.relatedLinks a:link,
.relatedLinks a:visited {
display: block;
}

/************** #advert styles **************/

#advert{
padding: 30px 0px 10px;
}

#advert img{
display: block;
}


/************** #headlines styles **************/

#headlines{
margin: 0px;
padding: 10px 0px 20px 10px;
}

#headlines p{
padding: 5px 0px 5px 0px;
}

/**Footer**/
#footer {
clear: both;
position: relative;
border-top: 4px solid #CCECF4;
font-size: 11px;
padding: 4px 4px 8px 10px;
margin-top: 4px;
bottom:0;
zoom: 1;
}

#footer .left {
float: left;
width: 700px;
bottom:0;
}

#footer .right {
float: right;
width: 150px;
text-align: right;
margin-top: -2.3em;
zoom: 1;
position: relative;
z-index: 0;
bottom:0;
}

#footer p {
color: #000 !important;
padding: 0;
margin: 0;
bottom:0;
}

#footer a, #footer a:link, #footer a:visited, #footer a:hover, #footer a:focus, #footer a:active {
color: #306479;
text-decoration: none;
font-weight: bold;
}

#footer a:hover, #footer a:focus {
text-decoration: underline;
}


#navispalte {
font: 1em Verdana, Geneva, Arial, Helvetica, sans-serif;
width: 202px;
float: left;
}

http://www.pearl.ru/isdunyasi/vnewsall.asp


Everything appears right with Firefox and Safari. Footer floats right with IE. Can anyone tell why. Thanks.

Using my http://www.thatspotonline.com as an example I'll explain my problem. I'm trying to use a 3 column fluid layout with a header and a footer. I've gotten past the browser problem with IE and now face a new problem with proper display in firefox. With the included css and attached xhtml layout I end up with a rather large gap on the bottom of the design without adding quite a bit of content to make the page length grow. I've tested with about everything else and this problem doesn't show up. I would gladly take some advise if anyone has any thanks.
Code:

* {
    margin:0 auto;
	padding:0;
}
h2 {
	font:bold 2em/1.4 "Lucida Bright", Georgia, Times, serif;
	color:#8B9F86;
}
h3 {
	font:bold 1em/1.6 "Lucida Bright", Georgia, Times, serif;
	color:#845697;
}

a {
	color:#4C53E0;
}
a:focus, a:hover, a:active {
	color:#EB8518;
}

body {
	background:#000000 url(images/body2.jpg);
	background-repeat:repeat;
	background-position:top left;
	font-size:90%;
	margin:0 auto;
	padding: 24px 0;
}

#outer {
    margin:0 auto;
	width:80%;
    min-width:40em;
    max-width:70em;
	border:10px solid #EEEEEE;
	border-width:0 5px;
    background:#EEEEEE;
}

ul#nav:after, #outer:after, #sub:after, form:after, form div:after {
    content:".";
    display:block;
    visibility:hidden;
    clear:both;
    height:0;
}
* html #nav, * html #content, * html form, * html form div {
	height:1%;
}

ul#access, .off {
	position:absolute;
	left:-1000em;
	top:-1000em;
}

hr {display:none}


#header {
	background:#EBEBE9 url(images/banner-bg2.jpg) repeat-x left bottom;
}
#header h1 {
    padding-left:.6em;
    font:bold 3em/2.5 "Lucida Bright", Georgia, Times, serif; /* line-height allows for image of buildings */
    letter-spacing:1pt;
	color:#FFFFFF;
    background: transparent url(images/banner2.jpg) no-repeat right bottom; 
}
#header h1 a {
	color:#FFFFFF;
	text-decoration:none;
}

ul#nav {
   	list-style:none;
   	margin:3px 0 1em;
	text-align:center;
   	background:#FFFFFF;
   	border-top:2px solid #444444;
   	border-bottom:2px solid #444444;
}
#nav li {
    list-style:none;
    margin:0 auto;
	width:94%;
    min-width:40em;
    max-width:70em;
	display:block;
    text-align:center;
	background:#000000;
}
* html #nav li {
	width:24.9%;
}
#nav a {
    display:block;
	font:bold 1em/1.8 'Lucida Grande', Arial, tahoma, verdana, sans-serif;
	text-decoration:none;
	color:#444444;
	margin:1px;
	background:#FFFFFF;
}
#nav a:focus, #nav a:hover, #nav a:active {
	border:1px inset #8B9F86;
	margin:0;
	color:#EB8518;
	text-decoration:underline;
}

ul#nav li#active {
	background:#FFFFFF;
	font:bold 1em/1.8 'Lucida Grande', Arial, tahoma, verdana, sans-serif;
	color:#000000;
	text-decoration:underline;
}

#sub, #right {
	font: 1em/1.5 'Lucida Grande', arial, verdana, sans-serif;
	word-spacing:.1em;
	margin-bottom:1em;
}

#sub {
	width:74%;
	float:left;
	position:relative;
}

#center {
	width:65%;
	float:right;
}
#left {
	width:33%;
	float:left;
}
#right {
	width:25%;
	float:right;
}
 

#center p {
	margin:.5em 2% .5em 0;
}
img.img-right {
	float:right;
}


#left h2 {
	color:#845697;
	font-size:1.5em;
}
#left p {
	font-size:.9em;
}

#right {
	font-size:.9em;
}
#right h2 {
	font-size:1.2em;
}

/** Footer **/
#footer {
	clear:both;
	margin-top:1em;
	font: 0.9em/1 'Lucida Grande', arial, tahoma, verdana, sans-serif;
	border-top:3px double #C8DCC2;
	
}
#footer p {
	margin:1em 1em 1em 0;
	text-align:center;
	padding: 21px 0;
}
#footer ul {
	list-style:none;
	margin-top:.7em;
	
}
#footer li {
	display:inline;
	border-right: 1px solid #C8DCC2;
	padding:.3em 2%;
}

ok at Rodoslovlje I have an issue. The menu on the left is most of the times longer then the right content part. Is there a way to fix that when this occurs I can make the right part move along without editing every page and hitting enter 20 times?

Thnx

Hi CSS gurus,

I am a bit stuck with the presentation issues I currently have with my website, http://www.tophatweddings.co.uk.

Compare the site layout in IE (6 not 7) and look at it in Firefox.

In Firefox you'll notice the borders and backgrounds are not displaying correctly. This is what I want to fix.

Has anyone got any suggestions for how I can adjust my CSS to make it display properly in Firefox?

Please help

I have a div in my header that contains an image. The height of the image is 82px. For some reason in firefox (and chrome too) if I don't set the div height to 125px it gets cut off. It looks OK in IE6 without the height set, but with it set as needed for firefox it then creates a space in IE.
My header file has:
Code:

<div id= "logo" ><img src = "images/logo_LWV.gif"></div>

	<div id = "topNav">
		
		<div id = "topNavMenu">
		&nbsp;&nbsp;
		<a class = "top" href="index.php">Home</a>&nbsp;&nbsp;
		<a class = "top" href="about.php">About Us</a>&nbsp;&nbsp;
		<a class = "top" href="join.php">Join</a>&nbsp;&nbsp;
		<a class = "top" href="funds.php">Special Funds</a>&nbsp;&nbsp;
		<a class = "top" href="contact.php">Contact</a>&nbsp;&nbsp;
		</div>  <!-- end topNavMenu -->

	</div>  <!-- end topNav -->

</div> <!-- end topBar -->

<div id = "imagebar"><img src = "images/lwvCorvallis.jpg"></div>
 
<div id = "greenbar"> 
	  <div id = "pagetitle">
                 <p>Title</p>
	  </div><!-- end pagetitle -->
</div> <!-- end greebar -->

and the css is:
Code:

#topbar
{
dispaly:block; width: 800px;
}

#logo
{
float:left;

}

#topNav
{
float:right;
width: 612px;
height: 65px;
background-color:#cc0033;
}

#topNavMenu
{
position:relative; top:40px;
text-align:left;
color: white;
}

#imagebar
{
display:block;
width: 800px; height:125px;
}
#greenbar
{
display:block;
width: 800px; height: 90px; 
background: url(images/greenbar.jpg); background-repeat: no-repeat;
z-index: 0;
}

#pagetitle
{
position:relative; left: 200px;top:25px;
width: 600px; 
color: white;
z-index: 1;
}

The site is he
http://www.lwv.corvallis.or.us/
What's going on?

Screw it.

Why do the margin-top values on these layers DO NOTHING in firefox, but act as expected in IE? Which way is actually correct?
Also, if I add a float:left to the blue layer, firefox adds a margin-top to the blue and green layers only?
This seems very wrong.. How can I get the expected margin-top on each layer?

Code:

<BODY style="background-color:yellow;">
<div id='blue' style="width:250px; height:250px; display:block; margin-left:1px; margin-top:10px; background-color:blue; position:relative;">
	<div id='green' style='width:220px; height:200px; margin-top:10px; background-color:green; display:block; position:relative;'>
		<!--- prod selector box --->
		<div id='gray' style='width:200px; height:150px; overflow:auto; margin-top:10px; margin-left:4px; display:block; background-color:gray; position:relative;'>
			asdf
		</div>
	</div>
</div>
</BODY>

First Issue
In this site the Left Navigation top and bottom spacing is somewhat off.

First head over to this page:
http://www.pricedigital.com/ejs//ad...weight-loss.htm

In firefox the navigation ends up being a tad too low, but the way it looks in ie6 and ie7 is how I want it to look in firefox. Any suggestions?

This all takes place in sidebar1

Next Issue
How do I center an image using just css?

Final Issue
In IE6 the floated right photos on a few of these pages do not show up correctly. Here is one for example:

http://www.pricedigital.com/ejs//ad...lds-pallant.htm

How can I go about fixing this?

http://www.beckin.com
http://www.bestdropshipper.net

I just recently updated my firefox to the most available version. This firefox version absolutely sux. I don't know why all these browsers have to keep causing trouble for designers.

You will notice that my css style for Beckin Designs no longer works.

Code:

<style type="text/css">
@font-face {
	font-family: English;
    font-weight: normal;
	src: url(fonts/English_.ttf);
}
</style>

If you view this site in other browsers or the firefox version previous to the latest release you will notice it displays fine. However, not in the new firefox.

Next, the best dropshipper menu doesn't display correctly either.

How can I go about fixing these issues? Do I need to do some time of if statement. Please let me know exactly how to address these issues.

Thanks!!

sean.dynahosting.net/wordpress

^if you open this in firefox, It is almost exactly how I want, but when you open it in ie, all sorts of troubles arise. Most importantly, the meat of the page (everything except the header and footer) are not centered, and are not 60% of the page, like this:

.basic{
font-family: courier new,courier,monotype;
font-size: 11px;
width: 60%;
margin-left: 20%;
}


says. How much more simply can I put it? Is there anything I can do to fix this, or if not, is there anyway to get browser specific with css?