SitePoint Sponsor

User Tag List

Results 1 to 13 of 13
  1. #1
    SitePoint Addict piku's Avatar
    Join Date
    Oct 2003
    Location
    Alameda, CA
    Posts
    239
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Exclamation bug in FF 1.0.3?

    http://www.sherwintechico.com/?page=works&sec=web&sel=1

    if i'm guessing correctly--is there something wrong w/ FF 1.0.3's css interpreter. sometimes a reload does the trick on the other works (in web section), but its weird with this particular one. if you dont see it, the first image up top craps out and makes a huge space below it. you may cross-check via IE to see what i'm talking about.

    please let me know if there are any way around this, or this is just FF's doing w/ that particular version (cause everything was working pre-1.0.3). TIA

    update: http://www.sitepoint.com/forums/show...36#post1886236
    Last edited by piku; May 8, 2005 at 03:28.

  2. #2
    Winemaster bronze trophy BonRouge's Avatar
    Join Date
    Oct 2004
    Location
    Sendai, Japan
    Posts
    2,417
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It's not just Firefox - Opera (7.54) does the same thing.

  3. #3
    SitePoint Addict piku's Avatar
    Join Date
    Oct 2003
    Location
    Alameda, CA
    Posts
    239
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    any clues on a fix for it? or is it just that? TIA

  4. #4
    Winemaster bronze trophy BonRouge's Avatar
    Join Date
    Oct 2004
    Location
    Sendai, Japan
    Posts
    2,417
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This seems to work, but I don't know why what you have isn't working :
    Code:
    .clearer_folio {line-height:1px; height:10px; }

  5. #5
    SitePoint Addict piku's Avatar
    Join Date
    Oct 2003
    Location
    Alameda, CA
    Posts
    239
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    you mean this right...?

    HTML Code:
    .clearer_folio { clear:both; line-height:0; height:10px; }
    * html .clearer_folio {height:4px;}
    yah, it worked beforehand... anyone else got any pointers on this? TIA

    Quote Originally Posted by BonRouge
    This seems to work, but I don't know why what you have isn't working :
    Code:
    .clearer_folio {line-height:1px; height:10px; }

  6. #6
    Winemaster bronze trophy BonRouge's Avatar
    Join Date
    Oct 2004
    Location
    Sendai, Japan
    Posts
    2,417
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    No - I mean what I posted. Try replacing what you have with what I posted.

  7. #7
    SitePoint Addict piku's Avatar
    Join Date
    Oct 2003
    Location
    Alameda, CA
    Posts
    239
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question

    looks like that might do the trick... i'll do more testing when i get back to working on my pc. thanks.

    btw, do you/anyone know about the cause of the bug on my other post, here?

    TIA
    Last edited by piku; May 8, 2005 at 03:27.

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,364
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    I couldn't see anything amiss in firefox 1.0 so I expect you've fixed it.

    I notice you have this in your code :
    Code:
    .clearer { clear:both; line-height:0; height:0; }
    That won't work properly in firefox if used in a div because firefox needs some height in order to clear otherwise it ignores it.

    This seems to work best when used in an empty div.
    Code:
    .clearer { clear:both; height:1px;overflow:hidden;margin-top:-1px }
    I also notice in your code that you have no image dimensions in the html. Firefox hates this and will often draw the page before the images have loaded and then drop the images on top of the content. By putting the image dimensions in the html the browser allocates the space for the image while it carries on draing the page in the right place.

  9. #9
    SitePoint Addict piku's Avatar
    Join Date
    Oct 2003
    Location
    Alameda, CA
    Posts
    239
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks for the info paul... the image dimension function is suppose to be written on the next update of teh site... will do as suggested. i'll also try that code you have for the empty div.

    thanks, these should prove helpful.

  10. #10
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B
    I couldn't see anything amiss in firefox 1.0 so I expect you've fixed it.
    Looks fine to me as well.

    Quote Originally Posted by Paul O'B
    I notice you have this in your code :
    Code:
    .clearer { clear:both; line-height:0; height:0; }
    That won't work properly in firefox if used in a div because firefox needs some height in order to clear otherwise it ignores it.
    Really? I thought that had worked for me before.

    I prefer using this clearing method anyway.
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  11. #11
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,364
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Really? I thought that had worked for me before
    Works in IE but often fails in mozilla. It will work if you place it an a break tag because the break tag has inherrent height whereas the div does not

    The contained float clearing method is good ( as is the content after method) and also in simple pages adding overflow:auto (or overflow:hidden) to the parent works well without any extraneous mark-up at all.

  12. #12
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Which of these were you using? Just the first one?
    Code:
    <div class="clearer"></div>
    Code:
    <div class="clearer">&nbsp;</div>
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  13. #13
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,364
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Yes just the first one If you use the second one with the &nbsp; you may introduce unwanted font height into the layout. The ideas is to give only 1px height and then offset it with a negative margin.


Bookmarks

Posting Permissions

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