css footer is too high in firefox (Full Version)

All Forums >> [Web Development] >> Cascading Style Sheets



Message


fakeeyed -> css footer is too high in firefox (11/21/2005 16:22:40)

alright, first off... the site looks great in IE and all code validates. i had to fudge the padding a bit using child selectors for the side pads, but now the footer is too high in firefox (but again, lines up perfect in ie).

i have a content div, and within it, 2 columns of information. i believe the left column is causing the problem and that one is floated. right now, the content on the left side is longer than on the right... but i need the footer to be 10 pixels below whichever one is longer.

any ideas? heres the css code...
body {
	background: 	url("../bg.gif");
	background-color: 			#333333;
	color:			#FFFFFF;
	font: 			12pt Arial, Helvetica, sans-serif;
	text-align: 	center;
	width: 			100%;
}

#container {
	text-align: 	center;
	width: 			700px;
	margin-right:	auto;
	margin-left:	auto;
	margin-top:		auto;
	background-color:		#333333;
	color:			#FFFFFF;
	border: 		1px #999999 solid;
}

#header {
	height: 		125px;
	width: 			700px;
	background: 	url("../BANNER.jpg") 0 0 no-repeat;
	text-align:		center;
}

#dropdown{
	position:				absolute;
	border:					1px solid black;
	border-bottom-width: 	0;
	font:					normal 12px Verdana, sans-serif;
	line-height:			18px;
	z-index:				100;
}

#dropdown a{
	width: 				100%;
	display: 			block;
	text-indent: 		3px;
	border-bottom: 		1px solid black;
	padding: 			1px 0;
	text-decoration: 	none;
	font-weight: 		bold;
}

#dropdown a:hover{ 
	background-color: 	#00ffff;
	color:			#000000;
}

#navigation {
	width: 			700px;
	height:			25px;
	background-color: 	#d32f0d;
	color:			#ffffff;
	text-align:		center;
}

#content {
	display:	block;
}

#sideLine {
	float:			left;
	padding-top: 	10px;
	padding-left:   10px;
	width: 			200px;
}
/* IE sucks */
div>div #sideLine {
	float:			left;
	padding-top: 	10px;
	padding-left:   10px;
	padding-right:	10px;
	width: 			200px;
}

#mainLine {
	padding-top: 	10px;
	width: 			470px;
}

#footer {
	width: 				700px;
	height: 			20px;
	background-image: 	url('../footerbg.gif');
	border-top: 		1px #999999 solid;
}

/******************* content box classes *******************/
.divvy {
	padding-bottom: 10px;
}

.maindivvy {
	padding-bottom:	10px;
}
/******************* style classes *******************/
.tBox {
	border: 	1px solid #d32f0d;
}

.paddedCell {
	text-align: 	justify;
	padding:		3px;
}

.style1 {
	color: 			#FFFFFF;
	background-color: #333333;
	font-family: 	Arial, Helvetica, sans-serif;
	font-size: 		12px;
}

.notchedEdge {

}

/******************* side headers *******************/
#sideNavHeader1 {
	background-image:	url('../elements/sideNavHeader1.gif');
	height: 			20px;
}
#sideNavHeader2 {
	background-image:	url('../elements/sideNavHeader2.gif');
	height: 			20px;
}

/******************* main headers *******************/
#midNavHeader {
	background-image:	url('../elements/midNavHeader.gif');
	height: 			20px;
}



thanks in advance...

EDIT: oh yea... sideLine and mainLine are the two columns of content.




womble -> RE: css footer is too high in firefox (11/21/2005 16:38:14)

A url so we could see the layout/problem might help. I'm thinking you mean the footer's overlapping the left column?
You could try:

clear: both;

on the footer to force it down below both columns.

PS - As FF is standards compliant and IE's not, though all appears okay in IE, the problem's most probably an IE, not a FF one. [;)]




fakeeyed -> RE: css footer is too high in firefox (11/21/2005 16:47:20)

yea i knew the problem was elsewhere... but after everything validated i didnt understand it. im gonna try the clear thing now.




fakeeyed -> RE: css footer is too high in firefox (11/21/2005 16:48:49)

yep... it was definately the clear thing. [:)] now so i can learn something from this... what exactly does the clear do? i know it forces em down (from your reply) but why?




fakeeyed -> RE: css footer is too high in firefox (11/21/2005 17:05:19)

well thanks anyways :)




womble -> RE: css footer is too high in firefox (11/21/2005 17:14:50)

Does 'what it says on the tin'. [;)] Forces it to 'clear' the preceding div, i.e. not overlap it. It'll work on elements within a div as well, e.g. if you have a floated pic and some text, but for some reason you want the text to come below the pic, add in a 'clear' to the text's <p> id or class.

Values you can have for clear:

clear: left; (clears the left content)
clear: right; (clears the right content)
clear: both; (clears...I'm sure you get the idea [:D][;)])




fakeeyed -> RE: css footer is too high in firefox (11/21/2005 17:24:30)

womble... you rock. [:)]




c1sissy -> RE: css footer is too high in firefox (11/24/2005 9:45:52)

An actually better solution is the clearfix found on the pie site.

Also, if you have something that you are clearing either left or right, best thing to do is clear: both this way if you change your design later to have the thing clear the opposite way, you dont' have to change your styles sheet to refelct this. Just a little short cut to save some time in the future.




klingerrr -> RE: css footer is too high in firefox (5/24/2006 9:59:26)

my footer appears to high in firefox too.. i applied min-height for EXP, but still having problems in firefox.. would anybody be interested in helping me with this?

http://portorangeproperty.com/ormondbythesea-realestate.php

i can email more files if needed to suggest a fix..
fyi-- clear:both does not work.




Tailslide -> RE: css footer is too high in firefox (5/24/2006 10:22:29)

It looks perfect to me in FF 1.5...




curious monkey -> RE: css footer is too high in firefox (5/24/2006 10:23:30)

and in IE




c1sissy -> RE: css footer is too high in firefox (5/24/2006 11:08:43)

You need to validate your page.
http://validator.w3.org/check?verbose=1&uri=http://portorangeproperty.com/ormondbythesea-realestate.php

After you do this and fix the errors, you need to validate your css.

I can't stress enough validating your pages. You, at this point have 42 errors, and I am heading out the door right now, but please if you have any questions along the way, post them in here and someone will help you with it.

btw, clear both isn't the same thing as the clear fix, this works differently then clear both.
http://positioniseverything.net/easyclearing.html
Here is an article to read in regards to using the clearfix method.




Page: [1]

Valid CSS!




Forum Software © ASPPlayground.NET Advanced Edition 2.4.5 ANSI
0.078125