Results 1 to 8 of 8

Thread: Can't get it to work in ie6 and ie7

  1. #1
    Join Date
    Feb 2008
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Can't get it to work in ie6 and ie7

    I am trying to get a link to hover over an image, but it's not working in ie6 and ie7. Here is an image to explain it more...


    Here is what I have so far...

    Code:
    <div class="container">
    <a href="#"><img class="hardlink" img src="image1.jpg" ></a>
    <a href="#"><img class="play" src="image2.jpg" ></a>
    </div>
    Code:
    .container{float:left; line-height:25px; margin:3px; width:186px; height:126px; overflow:hidden}
    a img.hardlink{overflow:hidden; border:solid 3px #dbdbdb}
    a:hover img.hardlink{margin-bottom:-39px; border:3px solid #919191}
    
    img.play{text-align:right; position:relative; top:0px; float:right; right:3px}
    a:hover img.play{top:-39px}
    I'm stuck on this, any help would be awesome.

  2. #2
    Join Date
    Aug 2005
    Location
    Other Side of My Monitor
    Posts
    3,486
    Thanks
    5
    Thanked 105 Times in 104 Posts
    Blog Entries
    1

    Default

    Using hover attribute in IE6 is hard enough (IE6 doesn't support hover: ) but the main problem is the location and position.

    Wrap the entire thing in a container div that has CSS position:relative; and then inside have your images/divs position:absolute.

    Leaving a relative positioned element on it's own, makes it relative to the page and the view pane, not the element it is inside of.
    {CWoT - Riddle } {OSTU - Psycho} {Invasion - Team}
    Follow Me on Twitter: @Negative_Chaos
    PHP Code:
    $result mysql_query("SELECT finger FROM hand WHERE id=3");
    echo 
    $result

  3. #3
    Join Date
    Feb 2008
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Isn't it wrapped in a container already? Do you know of some javascript that would make this work?

  4. #4
    Join Date
    Feb 2008
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    anybody got any other ideas? i'm kinda stuck still with this...

  5. #5
    Join Date
    Jul 2006
    Location
    just north of Boston, MA
    Posts
    1,806
    Thanks
    13
    Thanked 72 Times in 72 Posts

    Default

    this is a difficult problem, because its a rendering issue.
    Each browser renders (displays) the size of one pixel differently, thus creating a cross-browser absolute position overlay to the exact pixel across multiple platforms and/or browsers is nearly impossible.

    My only solution, while not the best would be to create an image and associated image map of the content you are attempting to display.

  6. #6
    Join Date
    Aug 2005
    Location
    Other Side of My Monitor
    Posts
    3,486
    Thanks
    5
    Thanked 105 Times in 104 Posts
    Blog Entries
    1

    Default

    Isn't it wrapped in a container already?
    No, you only have one div. I was referring to a method to use 3 divs. Basically:

    Code:
    <div id="contain">
           <div id="mainimg">
           <img src="whatever.jpg">
               <div id="littleimg">
               <img src="whateverTiny.jpg">
               </div>
          </div>
    </div>
    Where #container has position:relative, and the other two can use position:absolute. Then top: -XXpx and left: XXpx for placement. Use z-index to make sure the tiny img is ontop.
    {CWoT - Riddle } {OSTU - Psycho} {Invasion - Team}
    Follow Me on Twitter: @Negative_Chaos
    PHP Code:
    $result mysql_query("SELECT finger FROM hand WHERE id=3");
    echo 
    $result

  7. #7
    Join Date
    Jul 2006
    Location
    just north of Boston, MA
    Posts
    1,806
    Thanks
    13
    Thanked 72 Times in 72 Posts

    Default

    Quote Originally Posted by BLiZZaRD View Post
    Code:
    <div id="contain">
           <div id="mainimg">
           <img src="whatever.jpg">
               <div id="littleimg">
               <img src="whateverTiny.jpg">
               </div>
          </div>
    </div>
    Take out the second div, that is not providing any benefit. Instead put the id of the second image inside the image tag like and just apply some css to that specific link
    Code:
    <div id="contain">
          <div id="mainimg">
               <a href="path">img src="whatever.jpg"></a>
               <a href="path" id="littleimg"><img src="whateverTiny.jpg"></a>
          </div>
    </div>
    Code:
    div#mainimg a {
         /* Position the first image */
    }
    div#mainimg a#littleimg {
         position: relative;
         bottom: 0;
         right: 0;
    }
    that would allow for a creative CSS, but without having to use an image map as I advised earlier.
    I will say though that while you are still adding the extra div inside the container it allows for you to position of the two images how you would like them, so in that sense, I think in this situation its worth the extra 1/2kb file size

  8. #8
    Join Date
    Feb 2008
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    well, I just learned this yesterday.
    and actually there is much easy way to do it by using behavior with .htc file.

    visit this side for full tutorial:
    http://www.divitodesign.com/2008/01/...behavior-file/

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
  •