Submit Your Article Forum Rules

Page 1 of 2 12 LastLast
Results 1 to 10 of 11

Thread: Problems with css in Firefox

  1. #1
    Junior Member simmo's Avatar
    Join Date
    Jan 2006
    Posts
    16

    Problems with css in Firefox

    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.

  2. #2
    WebProWorld MVP
    Join Date
    Aug 2003
    Posts
    1,020

    Re: Problems with css in Firefox

    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.

  3. #3
    Senior Member sands's Avatar
    Join Date
    Sep 2005
    Posts
    380

    Re: Problems with css in Firefox

    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;" />

  4. #4
    Administrator weegillis's Avatar
    Join Date
    Oct 2003
    Posts
    5,744

    Re: Problems with css in Firefox

    Quote Originally Posted by sands View Post
    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;
    }

  5. #5
    Administrator weegillis's Avatar
    Join Date
    Oct 2003
    Posts
    5,744

    Re: Problems with css in Firefox

    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.

  6. #6
    WebProWorld MVP
    Join Date
    Aug 2003
    Posts
    1,020

    Re: Problems with css in Firefox

    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.

  7. #7
    Administrator weegillis's Avatar
    Join Date
    Oct 2003
    Posts
    5,744

    Re: Problems with css in Firefox

    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.

  8. #8

    Re: Problems with css in Firefox

    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

  9. #9
    Junior Member simmo's Avatar
    Join Date
    Jan 2006
    Posts
    16

    Re: Problems with css in Firefox

    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.

  10. #10
    Administrator weegillis's Avatar
    Join Date
    Oct 2003
    Posts
    5,744

    Re: Problems with css in Firefox

    Quote Originally Posted by simmo View Post
    ... 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.

Similar Threads

  1. Another CSS spacing problems in IE and Firefox
    By seorocks in forum Graphics & Design Discussion Forum
    Replies: 8
    Last Post: 08-05-2009, 04:14 PM
  2. FooterStickAlt Problems in Firefox
    By zakfox1986 in forum Graphics & Design Discussion Forum
    Replies: 0
    Last Post: 01-11-2006, 03:34 PM
  3. Firefox extension DB problems
    By AjiNIMC in forum Web Programming Discussion Forum
    Replies: 0
    Last Post: 06-17-2005, 01:02 PM
  4. CSS FireFox Problems
    By msadmin in forum Web Programming Discussion Forum
    Replies: 17
    Last Post: 04-11-2005, 11:31 AM
  5. CSS Problems between IE/Netscape/FireFox etc
    By baritoneuk in forum Graphics & Design Discussion Forum
    Replies: 3
    Last Post: 08-05-2004, 11:15 AM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •