navigation
a webmaster learning community
     Home    Register     Search      Help      Login    
Sponsors

Shopping Cart Software
Ecommerce software integrated into Frontpage, Dreamweaver and Golive templates. No monthly fees and available in ASP and PHP versions.

Website Templates
We also have a wide selection of Dreamweaver, Expression Web and Frontpage templates as well as webmaster tools and CSS layouts.

Frontpage website templates
Creative Website Templates for FrontPage, Dreamweaver, Flash, SwishMax

Search Forums
 

Advanced search
Recent Posts

 Todays Posts
 Most Active posts
 Posts since last visit
 My Recent Posts
 Mark posts read

Microsoft MVP

 

css footer is too high in firefox

 
View related threads: (in this forum | in all forums)

Logged in as: Guest
Users viewing this topic: none
Printable Version 

All Forums >> Web Development >> Cascading Style Sheets >> css footer is too high in firefox
Page: [1]
 
fakeeyed

 

Posts: 6
Joined: 11/21/2005
Status: offline

 
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

 

Posts: 5594
Joined: 3/14/2005
From: Living on the edge
Status: offline

 
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. :)

_____________________________

~~ "A cruel god ain't no god at all" ~~
:)

(in reply to fakeeyed)
fakeeyed

 

Posts: 6
Joined: 11/21/2005
Status: offline

 
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.

(in reply to womble)
fakeeyed

 

Posts: 6
Joined: 11/21/2005
Status: offline

 
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?

(in reply to fakeeyed)
fakeeyed

 

Posts: 6
Joined: 11/21/2005
Status: offline

 
RE: css footer is too high in firefox - 11/21/2005 17:05:19   
well thanks anyways :)

(in reply to fakeeyed)
womble

 

Posts: 5594
Joined: 3/14/2005
From: Living on the edge
Status: offline

 
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 :):))

_____________________________

~~ "A cruel god ain't no god at all" ~~
:)

(in reply to fakeeyed)
fakeeyed

 

Posts: 6
Joined: 11/21/2005
Status: offline

 
RE: css footer is too high in firefox - 11/21/2005 17:24:30   
womble... you rock. :)

(in reply to womble)
c1sissy

 

Posts: 5084
Joined: 7/20/2002
From: NJ
Status: offline

 
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.

_____________________________

Deb-aka-c4Ksissy
high panjandurum and alpha female of the silverback tribe
As decreed by Jesper 5-24-2003.
The only stupid question is... the one that is never asked!!
http://directory.css-styling.com
http://fmsforum.com
http://positioniseverything.net/
http://www.tanfa.co.uk/

(in reply to fakeeyed)
klingerrr

 

Posts: 1
Joined: 5/24/2006
Status: offline

 
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.

(in reply to fakeeyed)
Tailslide

 

Posts: 6108
Joined: 5/10/2005
From: Out here on the raggedy edge
Status: offline

 
RE: css footer is too high in firefox - 5/24/2006 10:22:29   
It looks perfect to me in FF 1.5...

_____________________________

"My strategy is so simple an idiot could have devised it"
Little Blue Plane Web Design | Blood, Sweat & Rust - A Land Rover restoration project

(in reply to klingerrr)
curious monkey

 

Posts: 549
Joined: 4/28/2006
From: The lower handle of US
Status: offline

 
RE: css footer is too high in firefox - 5/24/2006 10:23:30   
and in IE

_____________________________

The way it is now, the asylums can hold all the sane people but if we tried to shut up the insane we should run out of building materials.

(in reply to Tailslide)
c1sissy

 

Posts: 5084
Joined: 7/20/2002
From: NJ
Status: offline

 
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.

_____________________________

Deb-aka-c4Ksissy
high panjandurum and alpha female of the silverback tribe
As decreed by Jesper 5-24-2003.
The only stupid question is... the one that is never asked!!
http://directory.css-styling.com
http://fmsforum.com
http://positioniseverything.net/
http://www.tanfa.co.uk/

(in reply to curious monkey)
Page:   [1]

All Forums >> Web Development >> Cascading Style Sheets >> css footer is too high in firefox
Page: [1]
Jump to: 1





New Messages No New Messages
Hot Topic w/ New Messages Hot Topic w/o New Messages
Locked w/ New Messages Locked w/o New Messages
 Post New Thread
 Reply to Message
 Post New Poll
 Submit Vote
 Delete My Own Post
 Delete My Own Thread
 Rate Posts