image placement for IE bug fixes

Question

Hi ive got a menu that is like this:

<li id="selected"><a href="http://www."&gt;&lt;p&gt;FAQ'S&lt;/p&gt;&lt;/a&gt;&lt;/li&gt;

I've managed to acheive the effect that i wanted in firefox but then i checked it in IE 7 and phwoooar... It seems to be a width issue at the start i try to impeleent a width hack but then this upsets firefox:

#menu li#selected { padding: 0; margin:0; background:url(nav-tab-left.gif) bottom left no-repeat #90288d; height: 35px;  }

#menu #selected a {background:url(nav-tab-right.gif) bottom right no-repeat;height: 25px;}
#menu #selected p { padding: 0 10px; margin:4px; }

the other problem in ie is that the image for the right seems to hang higher than the image on the left blah!

Answer 1

You can't have <p> - a block level element - inside <a> - an inline element. It will be inconsistently rendered by the different browsers.

Try changing to

<li id="selected"><p><a href="http://www."&gt;FAQ'S&lt;/a&gt;&lt;/p&gt;&lt;/li&gt;

The image problem is because the height property does not apply to inline elements so your height:25px is being ignored. Move the image into place with padding.

#menu #selected a 
background:transparent url(nav-tab-right.gif) no-repeat scroll right bottom;
padding-bottom:16px;
}

Answer 2

<p> is an block level element. You cannot put it inside an inline element (<a>). What you can do is the following: Simply remove the <p>, and then use CSS to display the <a> tag as a block.

HTML:

<li id="selected"><a href="http://www."&gt;FAQ'S&lt;/a&gt;&lt;/li&gt;

CSS:

#menu li#selected {
  padding: 0;
  margin:0;
  background:url(nav-tab-left.gif) bottom left no-repeat #90288d;
  height: 35px;
}

#menu #selected a {
  display: block;
  background:url(nav-tab-right.gif) bottom right no-repeat;
  height: 35px;
  line-height: 35px; /* Centers the text vertically */
  padding: 0 6px;    /* Gives 6px of horizontal padding to the text */
  margin: 0;
}

This will work in all browsers and doesn't clutter up your markup with useless elements.

---

Hover Variation

Another advantage of using this method is that you can modify it slightly to allow for CSS rollover images that will be compatible with IE6 as such:

HTML:

<li id="selected"><a href="http://www."&gt;&lt;span&gt;FAQ'S&lt;span&gt;&lt;/a&gt;&lt;/li&gt;

CSS:

#menu li#selected {
  padding: 0;
  margin:0;
  height: 35px;
}

#menu #selected a {
  display: block;
  background:url(nav-tab-left.gif) bottom left no-repeat #90288d;
  height: 35px;
  padding: 0;
  margin: 0;
}

#menu #selected a span {
  display: block;
  background:url(nav-tab-right.gif) bottom right no-repeat;
  height: 35px;
  line-height: 35px; /* Centers the text vertically */
  padding: 0 6px;    /* Gives 6px of horizontal padding to the text */
  margin: 0;
}

/* Hovered, so let's change the colors and the images */
#menu #selected a:hover {
  background:url(nav-tab-left-hover.gif) bottom left no-repeat #902B27;
}

#menu #selected a:hover span {
  background:url(nav-tab-right-hover.gif) bottom right no-repeat;
}

Yes, it does work on IE6 and below (and above) since a is the only element for which IE6 supports the :hover pseudo-class. It is also the reason why this method requires adding an additional <span> tag as we cannot target the <li> with :hover in a way which IE6 understands.

_{I do recommend using CSS sprites instead of separate images for the hover effect, but to keep this example as simple as possible, I will keep it as such.}

For more information about CSS selectors support, see CSS - Contents and compatibility.