tags:

views:

253

answers:

2

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!

+1  A: 

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;
}
Emily
-1: The `<p>` tag is non-semantic and not required to achieve the desired effect
Andrew Moore
A: 

<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.

Andrew Moore