Member Avatar for Maidomax

Hi, guys!

I have a problem with this site I am making. I have a meny similar to the one in Daniweb, but without the drop-down menu. I made it with a set of DIVs with a 1px wide backrgound image with a background-repeat: repeat-x;
setting. The menu looks pretty much the same as on this page, only it has square corners. When I put a href tag around a div, and in the CSS set the div:hover to change the background image, it forks like a charm in Firefox, but not in IE. I mean in IE the link works just as well, but the mouse pointer does not turn into a hand when over it, nor does the backgroun image change.
Pls help.
:sad:

  • 4 Contributors
  • 7 Replies
  • 118 Views
  • 1 Week Discussion Span
  • Latest Post Latest Post by MidiMagic

Dani AI

Generated

This is a classic cross‑browser issue: Firefox will tolerate some invalid HTML and apply :hover to more elements, while older versions of Internet Explorer expect different structure and have quirks. and pointed to the right ideas — make the anchor the interactive element and ensure the page is in standards mode. For reference on how anchors and :hover are defined today see the MDN docs for the a element and the :hover pseudo‑class: a element and :hover.

A robust, compatible pattern is to put one a per menu item and style that a as a block so it fills the button area. Example structure (adapt widths and images to your assets):

<div class="menu">
  <a class="menu-item" href="page1.html">Item 1</a>
  <a class="menu-item" href="page2.html">Item 2</a>
</div>

/* CSS (example) */
.menu-item { display:block; float:left; width:140px; height:36px; text-decoration:none;
  background:url(menu-sprite.png) repeat-x 0 0; cursor:pointer; line-height:36px; }
.menu-item:hover, .menu-item:focus { background-position:0 -36px; }

Troubleshooting checklist specific to IE behavior:

  • Ensure a valid DOCTYPE so IE is not in quirks mode (see MDN on quirks mode).
  • Make sure every menu link has an href; anchors without href may not get the hand cursor.
  • Avoid placing block elements inside anchors if you must support very old browsers; in HTML5 anchors can contain flow content but very old IE can still misbehave.
  • If IE6/7 still ignores styles, check for overlapping elements or z‑index issues, force a hand cursor with cursor:pointer, and trigger hasLayout in old IE with a safe property like zoom:1 if needed.
  • Add :focus styles for keyboard users so hover effects are accessible.

Following that pattern should make the whole visible button clickable and hoverable in both Firefox and IE.

Recommended Answers

All 7 Replies

Member Avatar for FC Jamison

Can you give us a link to the page so we can look at it?

Member Avatar for gintom

I dont think IE6 doesnt support the div:hover.

You would need to use the

a:hover{
background-image:url(images/image.jpg);
display:block;
height:100%;
}

Hope this helps you out.

Member Avatar for Maidomax

here is a lin to the zipped page.

It is not done yet, only about half of it. When you open it in firefox, you can see it as I imagined it, but in IE it has a few bugs.

Member Avatar for Maidomax

Okay, never mind. Thanks guys. I'll just use Java instead.

Member Avatar for MidiMagic

The problem is that you can't have other container tags inside anchor (a) tags. Put the divs outside the anchors.

<div class="stuff">
<a href="pootwattle.htm">Feitlebaum's wins</a>
</div>

Actually, this is a place where tables work better than divs.

Member Avatar for Maidomax

I wanted the whole div to act as a link. It works fine in firefox, and looks cool, as if I made a button in Photoshop, only it loads much faster. IE just won't listen.

Member Avatar for MidiMagic

I wasn't too clear on this before.

div is a block tag.

a (anchor) is an inline tag.

Block tags are not supposed to be inside inline tags. Some browsers allow this illegal use, while others don't.

You might try using span instead of div. Span is the inline version of div.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.