SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Enthusiast
    Join Date
    Jun 2009
    Posts
    35
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Layout woes in Webkit - DIV wont expand to find contents

    The front page of my site works fine in Firefox and even Internet Explorer, but in webkit browsers (Safari & Chorme), it's broken:

    http://www.electricdenim.co.uk

    The lead graphics area uses an absolutely positioned DIV inside of a relative positioned one. This is necessary so the base of the text lines up with the base of the image. For some reason, in webkit the container (relative) DIV wont grow to fit the contents.

    The featured products area in the footer also seems to have growing problems, even though it is regular DIV with no positioning applied.

    Bizarrely, everything works fine in IE8. Even IE7 manges to render most of without being too broken!

    I've tried hard to solve these problems, but I can't find a solution. I'm kind of stumped, as I usually spend most of time trying to get things to work in Internet Explorer - Webkit normally behaves!

    Any pointers would be most appreciated.

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

    Because #main has overflow applied the margins are not sliding under the float and shortening the amount of space available. Remove the margin-left from #main and instead use a right margin on the sidebar.

    Code:
    #main{
    overflow:hidden;
    min-height:0;/* ie7*/
    }
    * html #main{zoom:1.0}/* ie6*/
    #sidebar {
      float: left;
      margin: 0 30px 0 0;
      width: 128px;
    }
    The floats in your featured products aren't the same height and will snag when they wrap. Either set them to be the same height or instead use display:inline-block.

    Code:
    .featured {
      display: inline-block;
    float:none;
      font-size: 14px;
      padding: 5px;
      vertical-align: top;
      width: 128px;
    }
    * html .featured{display:inline}/* ie6 inline block hack - keep separate*/
    *+html .featured{display:inline}/*ie7 inline block hack - keep separate*/


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
  •