SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Zealot
    Join Date
    Jul 2005
    Location
    Houston, TX
    Posts
    167
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Hacking :hover in IE

    Problem page. Ok, I want to avoid using javascript and prefer to use CSS to change the background image of a hyperlink on the hover event (see the left nav menu). Of course, IE doesn't support :hover outside of anchors. Works beautifully in FF, Opera.

    I found an interesting article that mentions how to go about hacking IE. Essentially, creating a .htc file w/ javascript
    that when tied in with the style sheet, will perform the hover effect (will get to this point in a moment).

    When I tried to do that, it still didn't work. After more detailed reading, it turns out on Win XP w/ SP 2 that you have to insert a x-content mime header into the page.

    No luck.

    So, after beating my head over and over again, I'm resorted here. If I know I can use javascript to achieve the same effect, and I'm creating a .htc file that creates the effect by using javascript, which I want to avoid, is there any way to get this thing to work in IE without the use of javascript?

    Does anyone have any suggestions or can you point me in the right direction?

    Muchas gracias

  2. #2
    SitePoint Guru
    Join Date
    Jul 2002
    Location
    space
    Posts
    845
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Try uploading the files to your server online and it should work there... I had the same problem with the .htc file (my computer cant read it in IE.) But it worked fine on the server, not on my desktop.

  3. #3
    SitePoint Zealot
    Join Date
    Apr 2006
    Location
    Ohio USA
    Posts
    171
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by timothytrice
    Ok, I want to avoid using javascript and prefer to use CSS to change the background image of a hyperlink on the hover event (see the left nav menu). Of course, IE doesn't support :hover outside of anchors.
    Hyperlinks are anchors.... you need no javascript or htc to do what you are trying to do.

    You may only use an ID once per page. Every link in your menu is in a div with the ID of anchor...

    Mark up your list of links as a list of links.
    HTML Code:
    <ul id="menu">
    	<li><a href="#" title="">MySpace Text Messages</a></li>
    	<li><a href="#" title="">MySpace Music Codes</a></li>
    	<li><a href="#" title="">MySpace Video Codes</a></li>
    	<li><a href="#" title="">MySpace Layouts</a></li>
    	<li><a href="#" title="">MySpace Text For Free</a></li>
    	<li><a href="#" title="">MySpace Generators</a></li>
    	<li><a href="#" title="">MySpace Online Icons</a></li>
    	<li><a href="#" title="">MySpace Tweaks</a></li>
    	<li><a href="#" title="">MySpace Glitter</a></li>
    	<li><a href="#" title="">MySpace Dolls</a></li>
    	<li><a href="#" title="">MySpace Tables</a></li>
    </ul>
    Style however you like.

    The images, and restrictive font sizing should be changed to allow people to actualy use the menu, instead of it just looking some particular way. (your text will be enlarged - better to accept this and design for it.)

    Code:
    #menu, #menu li { list-style:none; margin:0; padding:0; }
    #menu a {  display:block;  width:125px;  background:url(images/nav.gif) repeat-x; }
    #menu a:hover { background: url(images/navHover.gif) repeat-x; }
    Use repeat-x or y so the image repeats as text is enlarged.

  4. #4
    SitePoint Zealot
    Join Date
    Jul 2005
    Location
    Houston, TX
    Posts
    167
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I thought of that since my server runs on Linux...still no dice. I figured it was sitll probably me because of my operating system. No?

  5. #5
    Non-Member deathshadow's Avatar
    Join Date
    Jul 2006
    Location
    Dublin, NH
    Posts
    901
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok, you folks are WAY overthinking the solution here. Since :hover only works in IE as an attribute of Anchor - Style the anchor, not it's container... then you don't need all those extra tags (again, people complain about tables but then throw in hordes of UL LI or DIV)

    The CSS:

    Code:
    #menu a {
      display:block;
      height:36px;
      padding:0px 0px 0px 20px;
      font-size:10px;
      line-height:36px;
      vertical-align:middle;
      background:  url(images/nav.gif) top left no-repeat;
    }
    
    #menu a:hover {
      background-image:url(images/navHover.gif);
    }
    and of course the HTML

    Code:
    <div id="menu">
      <a href="" title="">MySpace Text Messages</a>
      <a href="" title="">MySpace Music Codes</a>
      <a href="" title="">MySpace Video Codes</a>
      <a href="" title="">MySpace Layouts</a>
      <a href="" title="">MySpace Text For Free</a>
      <a href="" title="">MySpace Generators</a>
      <a href="" title="">MySpace Online Icons</a>
      <a href="" title="">MySpace Tweaks</a>
      <a href="" title="">MySpace Glitter</a>
      <a href="" title="">MySpace Dolls</a>
      <a href="" title="">MySpace Tables</a>
    </div>
    That should work consistantly in all four main browser engines. You start mixing in extra DIV or unordered lists, it's just one more thing that can go wrong across different rendering engines.

    You'll notice I changed how the height and padding are calculated - the way you were doing it there was a lot of 'drift' on the text location between browsers - and that % on the vertical align was REALLY throwing things off.

    Side note - I'd also consider upping the size to 12px because 10px is a pain to read on 'large font' machines, and consider making the buttons a fixed width because right now they will dynamically resize. Since the anchors now all have display:block, they will accept a width setting outside IE - IE lets you set the width by default on ALL elements, rest of world doesn't let you do it unless it is display:block or one of it's cousins.

  6. #6
    SitePoint Zealot
    Join Date
    Apr 2006
    Location
    Ohio USA
    Posts
    171
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It's usualy a good idea to think, at least a little bit, before offering a solution.

    It's about using the right tool for the job... a list of links is a list of links, paragraphs are paragraphs. Surely you wouldn't advocate marking up all paragraphs with generic divs?

    Marking up something in it's proper container will never cause a problem with other rendering engines, unless that engine is broken.

    Using improper markup, howerver, can cause problems.
    Unstyled, the above code will appear to be one long link to some rendering engines. It will also be read by some screen readers as continous text.

    Let me introduce you to the Web Content Accessibility Guidelines.
    http://www.w3.org/TR/WAI-WEBCONTENT/

    Related Checkpoints:
    10.5 Until user agents (including assistive technologies) render adjacent links distinctly, include non-link, printable characters (surrounded by spaces) between adjacent links.
    The list bullets do this job.

    12.3 Divide large blocks of information into more manageable groups where natural and appropriate. [Priority 2]
    For example, in HTML, use OPTGROUP to group OPTION elements inside a SELECT; group form controls with FIELDSET and LEGEND; use nested lists where appropriate; use headings to structure documents, etc. Refer also to guideline 3.
    13.6 Group related links, identify the group (for user agents), and, until user agents do so, provide a way to bypass the group. [Priority 3]
    This list of navigation links, is grouped and marked up most appropriately with a list.


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
  •