SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Addict Phil-man's Avatar
    Join Date
    Nov 2000
    Posts
    291
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS Clickable Area - Problem in IE

    Hi. I'm trying to figure out a problem with a CSS clickable area in IE. The example page is here: http://www.netservicesgroup.com/clickable_area_test.htm

    I'm trying to set a specific area within the image to be clickable. It works as expected if the image is a background for the container div, but in this particular instance, I need the image NOT to be a background. It has to be its own page element. It works in Firefox but not in IE. I put a non-breaking space between the link tags so you can see that IE actually places the link in the correct spot, but it doesn't apply the width and height.

    This must be something extremely simple that I'm just overlooking, but I can't see it. Thanks for any help!

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,177
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Is the link going to have anything in it? If you give it a background color it will work. IE is registering the width and height.

    Unless someone else has a brilliant idea, you could put a transparent gif on the link as a background.

  3. #3
    SitePoint Addict Phil-man's Avatar
    Join Date
    Nov 2000
    Posts
    291
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks! The transparent GIF worked. Not the most elegant solution, but it works and I don't have a better one. :-) Any idea why my attempt only worked if the image was a background image and not a page element in and of itself? That seems very strange to me, like a bug.

    Thanks again.

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,177
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by Phil-man View Post
    Any idea why my attempt only worked if the image was a background image and not a page element in and of itself? That seems very strange to me, like a bug.
    How strange, a bug in IE! To be honest, I haven't a clue. In comparison to understanding the weird behavior of IE, understanding the ways of the opposite sex seems like a breeze.

  5. #5
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,599
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Hi, if you put a border around it you can see the width/height are matching.

    This is a bug in IE where a background (even a fake) is needed for it to work for it to keep focus.

    Create a simple 1px by 1px transparent gif image and place it here
    Code:
    #link
    {
    	display: block;
    	width: 150px;
    	background:url(fake.gif) no-repeat -1px -1px;
    	height: 75px;
    }
    The image doesn't even have to exist though your server logs would have a missing error request
    Always looking for web design/development work. Willing to do it cheap to build portfolio!

  6. #6
    SitePoint Addict Phil-man's Avatar
    Join Date
    Nov 2000
    Posts
    291
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you both for your helpful replies. And yes, an IE bug... headline news! Not...


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
  •