SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Addict
    Join Date
    Jul 2006
    Posts
    379
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Exclamation Strange Safari Problem, no set width?

    Strange problem in Safari, i have a image holder and a description for the image below both floating left, done as a class so you can have another one along side with a different image.

    The image holder doesn't have a set width because the image that goes into it will be varying widths.

    This for some reason does not work in Safari, see here

    Its bizarre because it works fine in IE,FF etc

    Can Safari only render using a set width? Or is there a hack around it?

    Any ideas?

  2. #2
    Design Your Site Team bronze trophy Erik J's Avatar
    Join Date
    May 2007
    Location
    Countryside, Sweden
    Posts
    3,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If you set display:block on the img you don't need the float on the description. Maybe that works.
    Code CSS:
    /*******Image Holder*******/
    div#wrapperBase div.imageHolder{
            height: 500px;
            float: left;
    }
    div#wrapperBase div.imageHolder img{
            display:block;
    }
    div.imageHolder div.imageDescription{
            width: 307px;
            height: 46px;
    }

  3. #3
    SitePoint Addict
    Join Date
    Jul 2006
    Posts
    379
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Wow, that works. Thanks so much.

    How has that got round it then, would you mind explaining?

    Bit of a strange problem never encountered it before.

  4. #4
    Design Your Site Team bronze trophy Erik J's Avatar
    Join Date
    May 2007
    Location
    Countryside, Sweden
    Posts
    3,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Just a thought that the floating second child could confuse computing the width of the floated parent div, trying first to fit the floated child left of the inline img. - Solution: Make both children blocks, then the float is not needed.

    But I think the same result should be achived if you float the first child; the img-div, and clear the next child; the paragraph-div. That would be computed in natural order; the img to the left and the paragraph under.:
    Code CSS:
    div#wrapperBase div.imageHolder{
    	height: 500px;
    	float: left;
    }
    div#wrapperBase div.imageHolder img{
    	float: left;
    }
    div.imageHolder div.imageDescription{
    	width: 307px;
    	height: 46px;
    	clear: left;
    }

  5. #5
    Design Your Site Team bronze trophy Erik J's Avatar
    Join Date
    May 2007
    Location
    Countryside, Sweden
    Posts
    3,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Again, if my thought was right regarding how Safari in this case might compute the width of the parent div; maybe it would be enough just to clear the second child instead of floating it.:
    Code CSS:
    /*******Image Holder*******/
    div#wrapperBase div.imageHolder{
    	height: 500px;
    	float: left;
    }
    div.imageHolder div.imageDescription{
    	width: 307px;
    	height: 46px;
    	clear: left;
    }
    Maybe some expert can explain what really goes on in this case.


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
  •