SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    Jun 2008
    Location
    UK
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Firefox 3 and styles

    Hi all,

    Could someone check this site for me: www.toothandclaw.org.uk.

    It's a friends site and in FF3 only the left half of the banner image displays on all pages (well at least on my pc as I don't know anyone else who's using FF3).

    Looking at the CSS there's an embedded style for the banner that doesn't declare the style type etc. Is this causing the div to collapse or similar?

    Could this be the problem?

    I'll add that the site displays ok in FF2 and IE6.

    Thanks!

  2. #2
    SitePoint Wizard bronze trophy Tailslide's Avatar
    Join Date
    Feb 2006
    Location
    Bedford, UK
    Posts
    1,687
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Looks ok to me in FF3 BUT you've got a load of errors including re-using IDs for both the left and right-hand columns which may well cause you problems. If you want to re-use a style rule then stick to classes instead of IDs.
    Little Blue Plane Web Design
    Blood, Sweat & Rust - A Land Rover restoration project

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

    You have floated the banner image without a width which means it will shrink wrap the content and only be as long as is needed.

    Add a width and it will stretch full width.

    Code:
    #bannerimg {
        float:left;
        margin:0px;
        padding:0px;
        height:150px;
        background-image:url("http://www.toothandclaw.org.uk/banners/cover-eagle-800-fade.jpg");
        background-repeat: no-repeat;
    width:100%
        }
    The reason that some browsers were already showing it full width was that you had a right floated element inside the left float which previously would stretch the element to 100% width.

    This has been corrected in FF3 and now the element is only as wide as it needs to be,

  4. #4
    SitePoint Member
    Join Date
    Jun 2008
    Location
    UK
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Tailslide View Post
    Looks ok to me in FF3 BUT you've got a load of errors including re-using IDs for both the left and right-hand columns which may well cause you problems. If you want to re-use a style rule then stick to classes instead of IDs.
    Thanks for your comments, Tailslide.

    Quote Originally Posted by Paul O'B View Post
    Hi,

    You have floated the banner image without a width which means it will shrink wrap the content and only be as long as is needed.

    Add a width and it will stretch full width.

    Code:
    #bannerimg {
        float:left;
        margin:0px;
        padding:0px;
        height:150px;
        background-image:url("http://www.toothandclaw.org.uk/banners/cover-eagle-800-fade.jpg");
        background-repeat: no-repeat;
    width:100%
        }
    The reason that some browsers were already showing it full width was that you had a right floated element inside the left float which previously would stretch the element to 100% width.

    This has been corrected in FF3 and now the element is only as wide as it needs to be,
    Thanks Paul.

    I don't maintain the site, but I'll pass your helpful comments on.

    Much appreciated!


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
  •