SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Zealot
    Join Date
    Aug 2007
    Posts
    154
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Hotspots in IE7 using display:inline-block...

    Hi, I think this is a hasLayout issue but i'm not sure how to fix it - i'm setting up hotspot links for certain areas on a background-image. In Firefox, everything is working fine without the CSS being too messy, but in IE7 (not tested 6 yet) I have no hotspots. I know display:inline-block can cause problems, but I've tried a few variations (e.g nesting block elements inside parent with display:inline) without any luck and am hoping someone can help...

    Issue can be viewed <snip>
    Last edited by nicky77; Apr 3, 2009 at 09:48.

  2. #2
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Doesn't work in FF2 either. Why inline-block - why not just float them left?

  3. #3
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,782
    Mentioned
    16 Post(s)
    Tagged
    0 Thread(s)
    Use display:-moz-inline-block; to get FF2 working...I think you have to set display:inline; and then display:inline-block; because of IE7 not applying inline-block; to block elements so you have to set it to inline and then it will work....try that.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  4. #4
    SitePoint Zealot
    Join Date
    Aug 2007
    Posts
    154
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the replies - Centauri, you're right. Dunno why i didn't just float them left, couldn't see the forest for the trees there! Have floated each hotspot left, then added clear:left to the 2nd, 3rd and 4th rows. IE7 needed a wee tweak on the margin-top property for the hotspot on the last row.

  5. #5
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,782
    Mentioned
    16 Post(s)
    Tagged
    0 Thread(s)
    Once you clear an element there is no need to clear everything after it.

    Row1-floated
    row2-clear
    row3-nothing needed
    row4-same

    Also put overflow:hidden on the parent of the floats to allow it to contain the floats-that might be the slight margin tweak you needed in IE7.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com


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
  •