Problems with css in Firefox

simmo · #1 (**permalink**) 02-18-2009, 05:00 AM

I am in the process of updating a site I maintain as a volunteer:- Hazel Hill Home I have created some pages from templates using css. Problem is that one page in particular:- Hazel Hill Eco Lodge seems to work fine with IE6/7 bit not with Firefox. I assume it is my css or my alteration of it that is to blame.

Any ideas about what is gouing on?

Thanks

speed · #2 (**permalink**) 02-18-2009, 05:29 AM

Firstly you have an error in your HTML:

Code:

<h3>Treading lightly on the land</h3>
				<ul><font FACE="Tahoma" size="2">
					<li>Zero carbon</li>

should be:

Code:

<h3>Treading lightly on the land</h3>
				<ul>
					<li>Zero carbon</li>

Fix that and any remaining markup issue first then we can look at fixing the green box if it is still there.

http://validator.w3.org/check?verbos...k%2Flodge.html shows the list of issues, just fix one at a time, any issues just ask.

sands · #3 (**permalink**) 02-18-2009, 11:03 AM

Just before the "footer" <DIV> at the end of the document code add this line:

Code:

<br style="overflow:hidden; clear:both; height:0; margin:0; font-size:1px; line-height:0; width:auto; position:relative;" />

**weegillis** · #4 (**permalink**) 02-18-2009, 02:41 PM

Quote:

Originally Posted by sands

Just before the "footer" <DIV> at the end of the document code add this line:

HTML Code:

<br class="clear" />

and add Sand's code to the style sheet:

Code:

br.clear {
 overflow:hidden;
 clear:both;
 height:0;
 margin:0;
 font-size:1px;
 line-height:0;
 width:auto;
 position:relative;
}

**weegillis** · #5 (**permalink**) 02-18-2009, 02:46 PM

The above notwithstanding, even though unproven, still does not preclude the fact that the HTML is broken. Fix it and the problem may even go away.

speed · #6 (**permalink**) 02-18-2009, 02:53 PM

You can just add the clear to #footer, seems to work live editing in firefox anyway:

Code:

#footer {
background-color:#009900;
width: 840px;
margin: 0 auto;
clear: both;
}

I'm terrible in as soon as I see bad HTML I stop trying to find the bugs.

**weegillis** · #7 (**permalink**) 02-18-2009, 03:04 PM

FIX: div id="sidebar" is not closed.

Simon,
Is this a php site, or static html?

If we start at the top and work down, it may help to remove site wide issues, while at the same time correcting the page in question.

HTML Code:

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Hazel Hill Home</title>
<link rel="stylesheet" href="style.css" />
</head>

could be,

HTML Code:

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Hazel Hill Home</title>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>

This will clear up any validation issues in the HEAD. As well, the character set is promoted to UTF-8 in keeping with (citation required) the recommended charset for the international web.

There aren't a lot of issues that can crop up in sparse (and correct) markup like this site, so any there are will be easy to find and repair. Don't look to deeply--the problems are on the surface.

Web-Design-Guy · #8 (**permalink**) 02-18-2009, 06:26 PM

It's always good to check your mark-up too:

The W3C Markup Validation Service (23 errors)

Fixing any errors often sorts other things out.

And your css (0 errors):

The W3C CSS Validation Service

simmo · #9 (**permalink**) 02-18-2009, 06:53 PM

Thank you everyone for your suggestions:-

speed (#1):- Tried your suggestion but no change
sands (#1):- Brilliant! Your suggestion seems to have fixed the bug.
weegillis (#1):- Your css mod did not seem to work but I was not sure of the syntax. I added #clear{overflow:..... etc. was that your intention?
speed (#2): Its late. I will try your code when I return.
weegillis (#2): Well spotted. Missing </div> added just above </body> were I think it should have been. This is a static site - no php. Will correct the code as time allows.
Web-Design-Guy:- Guess I should have tried this at first.

Thank you all for your help!

**weegillis** · #10 (**permalink**) 02-19-2009, 12:37 AM

Quote:

Originally Posted by simmo

... I added #clear{overflow:...

That should have been .clear, not #clear. (dot) prefaces a class name, (hash) prefaces an fragment identification.

br class="clear" makes it reusable on the same page, if need be. br id="clear" makes it a single case in any one page. Class name is more appropriate in this case, imho.

Consider an outer container with content that floats around a positioned object, such as a photo surrounded by text on one side and below. If the text is sufficient to fill the container and force it to extend vertically below the bottom of the positioned object then there is no problem. The object fits nicely, and any border will wrap the whole works.
Here is a basic snippet to describe the above:

HTML Code:

<div>
<p>
<img width="125" height="200" alt="Picture of fixed height" />
this text would be plentiful enough to push the bottom of the container to greater 
than 200 pixels in height, even when displayed on wide screen. No problem here. 
If there is a border on this paragraph (or more likely the DIV) it will wrap around 
nice and squarely.</p>
</div>

But let the text be sparse, say only a couple of lines, or so, and the problem will be very evident. The border will only wrap around the text, and not the whole section. The picture (and any border assigned to it) will extend below the border, and cause content below it to float as well. All very good if this was the design intention, but not very good if it was not. Worse yet, this problem is dealt with differently in the various browsers.

To cope with this issue, developers long ago devised what was commonly referred to as a 'clearing div' or clearing element of some sort. The BR class="clear' is one such element, with this distinct purpose in mind. It forces otherwise non-existent content to clear the positioned item in the float situation. This lets the border wrap the whole thing, even if it is mostly white space contained within.

HTML Code:

<div>
<p>
<img width="125" height="200" alt="Picture of fixed height" />
this text would be sparse, and not sufficient to float around the object.
</p>
<br class="clear />
</div>

The clearing element forces a full width element to take its place below the text and positioned object. Problem solved. Well, maybe.

Some further study on this issue, and the extra markup structure required to control it can be found all over the web. Position is everything, A List Apart, and others have covered it extensively. An alternative approach has been devised that uses less markup, generically known as 'clearfix.' Google it an d you will undoubtedly learn lots on this subject.

john9886003088 · #11 (**permalink**) 02-19-2009, 06:53 PM

try reinstalling the add ons in firefox. then try the code.

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
FooterStickAlt Problems in Firefox	zakfox1986	Graphics & Design Discussion Forum	0	01-11-2006 04:34 PM
Firefox extension DB problems	AjiNIMC	Web Programming Discussion Forum	0	06-17-2005 02:02 PM
CSS FireFox Problems	msadmin	Web Programming Discussion Forum	17	04-11-2005 12:31 PM
Googlebar For Firefox, Plus The Google & Firefox Deal	WPW_Feedbot	Search Engine Optimization Forum	1	02-28-2005 05:38 PM
CSS Problems between IE/Netscape/FireFox etc	baritoneuk	Graphics & Design Discussion Forum	3	08-05-2004 12:15 PM