Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 12 of 12
  1. #1
    Banned
    Join Date
    Jan 2004
    Location
    Minneapolis, MN
    Posts
    387
    Thanks
    0
    Thanked 0 Times in 0 Posts

    IE 5.01 problem with <imgs> in links..

    http://www.danssouthsidemarine.com/

    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:

    XHTML:
    Code:
    <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>
    	<h1>Manufacturers</h1>
    	<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>
    </div>
    Applicable CSS:
    Code:
    #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: "\"}\"";
       voice-family:inherit;
       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
    Senior Coder
    Join Date
    Jun 2002
    Location
    near Oswestry
    Posts
    4,508
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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
    Banned
    Join Date
    Jan 2004
    Location
    Minneapolis, MN
    Posts
    387
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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
    Senior Coder
    Join Date
    Jun 2002
    Location
    near Oswestry
    Posts
    4,508
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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:
    Code:
    <public:component>
    
    <attach event="onclick" handler="followLink" />
    
    <script type="text/javascript">
    
    	function followLink()
    	{
    		element.click();
    	}
    				
    </script>
    
    </public:component>
    Then bind it to the links in question like this:
    Code:
    .someContainer a {
        behavior:url(click.htc);
        }
    "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
    me'
    me' is offline
    Senior Coder
    Join Date
    Nov 2002
    Location
    Warwickshire, England
    Posts
    1,229
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Just out of interest, why happens when you try
    Code:
    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
    Banned
    Join Date
    Jan 2004
    Location
    Minneapolis, MN
    Posts
    387
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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
    Banned
    Join Date
    Jan 2004
    Location
    Minneapolis, MN
    Posts
    387
    Thanks
    0
    Thanked 0 Times in 0 Posts
    brothercake,

    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
    Senior Coder
    Join Date
    Jun 2002
    Location
    near Oswestry
    Posts
    4,508
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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; 02-17-2004 at 11: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
    Banned
    Join Date
    Jan 2004
    Location
    Minneapolis, MN
    Posts
    387
    Thanks
    0
    Thanked 0 Times in 0 Posts
    hahaha.. thanks! that's great information.

  • #10
    Banned
    Join Date
    Jan 2004
    Location
    Minneapolis, MN
    Posts
    387
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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
    Senior Coder
    Join Date
    Jun 2002
    Location
    near Oswestry
    Posts
    4,508
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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
    Banned
    Join Date
    Jan 2004
    Location
    Minneapolis, MN
    Posts
    387
    Thanks
    0
    Thanked 0 Times in 0 Posts
    *slap* duh..


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •