SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Enthusiast
    Join Date
    May 2005
    Posts
    40
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Span around image problem in Firefox

    I have seen this before but cant remember how to fix it and cant find anything online..

    I want an image to have a 2px white border, then an 8px image background, then a 1px border.

    Code:
    This is my css.
    
    span.img {border:1px solid #333;background-image:url(i_back.gif);padding:8px;}
    span.img img{border:2px solid white;}
    
    Html
    
    <p><span class="img"><img src="hunza-garden.jpg"/></span></p>
    This works in IE but not firefox, I have attached an image of the problem.

    Any ideas?

    Thanks!

    Steve
    Attached Images Attached Images

  2. #2
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I can't see the images so not entirely sure but I think you'll need to change the second class to

    span img (i.e. remove the period/fullstop)

    Then you'll need to apply display: block; to the first style.

    Which should give you this

    Code:
    span.img {display: block; border:1px solid #333;background-image:url(i_back.gif);padding:8px;}
    span img img{border:2px solid white;}
    Hope that's what you're after?

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

    You will need to float the span so that it wraps around the image. The image pokes out of the line-height but the span still stays at line-height which is why it doesn't wrap the image. IE gets this wrong and stretches the span around the image when it shouldn't.

    Code:
    span.img {float:left;border:1px solid #333;background-image:url(i_back.gif);padding:8px;}
    span.img img{border:2px solid white;display:block}
    Quote Originally Posted by dave
    span img img{border:2px solid white;}
    How can an image have another image inside it lol

    It has to be span.img img although adding a class of img to a span is pretty confusing anyway and is probably what threw you .

  4. #4
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well spotted Paul, I'd not spotted the img in the second style and was simply changing it to be

    Code:
    span img
    as at a quick glance it looked like the two styles were the same, but my mistake

  5. #5
    SitePoint Enthusiast
    Join Date
    May 2005
    Posts
    40
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Perfect, thanks!

    Will make the class name clearer, not sure why I thought that was a good idea


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
  •