Web Analytics Made Easy -
StatCounter IE 5.01 problem with <imgs> in links.. - CodingForum


No announcement yet.

IE 5.01 problem with <imgs> in links..

  • Filter
  • Time
  • Show
Clear All
new posts

  • IE 5.01 problem with <imgs> in links..

    Dan's Southside Marine is a marine dealership located in Bloomington, MN. Offering multiple kinds of services, near Richfield, Savage, Eagan, and Edina.

    in the right hand sidebar, there is a series of manufacturer logos that link to places on the site or outside pages. in IE5.01, the links do not register with the mouse (i.e. the Hand appears) unless you are right on the border of the <a>. anywhere over the image does not register. all other browsers are fine. can anybody help?

    the code for these is as follows:

    <div id="sidebar"> <!--- FLOATING SIDEBAR --->
    	<h1 style="margin-top: 0px;">The Ultimate</h1>
    	<a href="http://www.suzukimarine.com/"  class="manufacturer_logo block"><img src="images/bar_suzuki.gif" alt="Suzuki: Catch and Reward!" width="120" height="31" /></a>
    	<a href="suzuki_parts.cfm" class="manufacturer_logo block"><img src="images/bar_suzuki_parts.gif" alt="Suzuki Parts Online" width="120" height="31" /></a>
    	<a href="boats.cfm#alumacraft" title="Alumacraft" class="manufacturer_logo block"><img src="images/bar_alumacraft.gif" alt="Alumacraft" /></a>
    	<a href="boats.cfm#premier" title="Premier" class="manufacturer_logo block"><img src="images/bar_premier.gif" alt="Premier" /></a>
    	<a href="outboards.cfm#honda" title="Honda Marine" class="manufacturer_logo block"><img src="images/bar_honda.gif" alt="Honda Marine" /></a>
    	<a href="boats.cfm#champion" title="Champion Boats" class="manufacturer_logo block"><img src="images/bar_champion.gif" alt="Champion Boats" /></a>
    	<a href="outboards.cfm#mercury" title="Mercury Outboards" class="manufacturer_logo block"><img src="images/bar_mercury.gif" alt="Mercury Outboards" /></a>
    	<a href="boats.cfm#tuffy" title="Tuffy Boats" class="manufacturer_logo block"><img src="images/bar_tuffy.gif" alt="Tuffy Boats" /></a>
    	<a href="http://www.karavantrailers.com/"  title="Dan's Southside Marine, proud supplier of Karavan Trailers" class="manufacturer_logo block"><img src="images/bar_karavan.gif" alt="Karavan Trailers" /></a>
    	<h1>Hot Links</h1>
    	<a href="http://www.mntournamenttrail.com/" title="Minnesota Tournament Trail" ><img src="images/mtt.gif" alt="Minnesota Tournament Trail" /></a>
    	<a href="http://suzukimarine.com/showsanddeals/catchrewards.php" title="Click for more information on Suzuki's Catch and Reward program." ><img src="images/catch_and_reward.gif" alt="Suzuki: Catch and Reward" /></a>
    Applicable CSS:
    #sidebar img {
    	margin: 10px 0px;
    #sidebar a img {
    	vertical-align: bottom;
    	margin: 0px;
    a.manufacturer_logo {
       border: 1px solid #000;
       padding: 0px;
       margin: 5px auto;
       width: 122px;/* False value for IE5/Win */
        voice-family: "\"}\"";
       width: 120px; /* Actual value for conformant browsers */   
    html>a.manufacturer_logo {
       width: 120px; /* Be nice to Opera */
    a:hover.manufacturer_logo {
    	border: 1px solid #20A071;
    a.manufacturer_logo img {
    	vertical-align: bottom;
    	margin: 0px;
    .block {
    	display: block;

  • #2
    Freaky man ... you keep finding all the same problems as I do

    I had that exact problem too .. and guess what ... I never found a solution! I can't even tell you definitively what causes it.

    What I actually did was add a DHTML behavior to the image itself, that basically says "onclick => this.parentNode.click()" and then styled it with a "hand" cursor. That made it appear to work normally, although being script reliant it's not an ideal solution.
    "Why bother with accessibility? ... Because deep down you know that the web is attractive to people who aren't exactly like you." - Joe Clark


    • #3
      would you mind if i used that as a temporary solution at least? i just want to get this sales guy at my office off my back. i swear to god, he just sits at his computer refreshing that site, looking for anything he can possibly find. which is good.. to a point..

      but yeah, if you wouldn't mind posting the script you used, that'd be great. if not, i understand. thanks.


      • #4
        Sure - in fact it was the links I attached it to, not the images - even more stupid that this should be necessary - it just goes "onclick => this.click", like this:
        <attach event="onclick" handler="followLink" />
        <script type="text/javascript">
        	function followLink()
        Then bind it to the links in question like this:
        .someContainer a {
        "Why bother with accessibility? ... Because deep down you know that the web is attractive to people who aren't exactly like you." - Joe Clark


        • #5
          Just out of interest, why happens when you try
          a img { cursor: hand }
          David House - Perfect is achieved, not when there is nothing left to add, but when there is nothing left to take away. (Antoine de St. Exupery).
          W3Schools | XHTML Validator | CSS Validator | Colours | Typography | HTML&CSS FAQ | Go get Mozilla Now | I blog!


          • #6
            that might give me the hand, but it still doesn't register the hyperlink. thanks though, i'll try your script, brothercake, and let you know how it works out.


            • #7

              i actually just got around to looking at your code now.. and i don't understand fully the technique you are employing there. i understand how you are binding at the end, though that behavior property is a new one to me in CSS.

              but your first code snippet confuses me. what exactly is going on there, and where would that go?


              • #8
                Oh sorry .. I assume too much. A DHTML behavior is a separate file - make a text file and call it "click.htc" then paste that entire code into it.

                You can see how it works - "element" is like "this" in OO - it refers to the element. You do normal scripting with that element reference, and then surround it with some XML - the <public:component> tag declares the behavior, while the <attach/> element is for binding a function to an event.

                See http://msdn.microsoft.com/workshop/a...s/overview.asp for more about behaviors. They can be very useful for patching CSS deficiencies in IE, but use them sparingly - they're with the dark side.
                Last edited by brothercake; Feb 17, 2004, 07:17 PM.
                "Why bother with accessibility? ... Because deep down you know that the web is attractive to people who aren't exactly like you." - Joe Clark


                • #9
                  hahaha.. thanks! that's great information.


                  • #10
                    well, the links work no, but the cursor still only switches to the finger when you're right on that one pixel border.

                    thanks, still, brothercake.. i want to look at that stuff more later.


                    • #11
                      you can use that cursor CSS to make it look right
                      "Why bother with accessibility? ... Because deep down you know that the web is attractive to people who aren't exactly like you." - Joe Clark


                      • #12
                        *slap* duh..