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
Don't think outside of the box - get rid of the box.
Firstly you have an error in your HTML:
should be:Code:<h3>Treading lightly on the land</h3> <ul><font FACE="Tahoma" size="2"> <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.Code:<h3>Treading lightly on the land</h3> <ul> <li>Zero carbon</li>
http://validator.w3.org/check?verbos...k%2Flodge.html shows the list of issues, just fix one at a time, any issues just ask.
Originally Posted by sands
and add Sand's code to the style sheet:HTML Code:<br class="clear" />
Code:br.clear { overflow:hidden; clear:both; height:0; margin:0; font-size:1px; line-height:0; width:auto; position:relative; }
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.
You can just add the clear to #footer, seems to work live editing in firefox anyway:
I'm terrible in as soon as I see bad HTML I stop trying to find the bugs.Code:#footer { background-color:#009900; width: 840px; margin: 0 auto; clear: both; }
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.
could be,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>
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.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>
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.
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
Web Designer Perth | Western Australia | Web Designers Perth
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!
Don't think outside of the box - get rid of the box.
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: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.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>
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.
The clearing element forces a full width element to take its place below the text and positioned object. Problem solved. Well, maybe.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>
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.
Posting Permissions
Submit Your Article
Forum Rules
Reply With Quote