Firefox float positioning and Firefox div:hover not working how it should?

Question

I'm working on a tricky bit of styling that's working on Safari/Webkit but not on Firefox/Gecko. I can't figure out just what's going wrong.

Here's the HTML that I'm using:

<div class="showcase"><a href=><div class="showtit"><span class="showname">Stripes!</span> <span class="showtype">a theme</span> <span class="showdate">October 2009</span></div></a></div>

So, it creates the Showcase div, then inside that makes a link that encompasses the Showtit div (used for positioning), and then the Showname, Showtype, and Showdate spans. Here's how that's all being styled:

.showcase {
 border-bottom-color: #eeeeee;
 border-bottom-width: 1px;
 border-bottom-style: solid;
 font-size: 20pt;

}

.showtit {
 text-align: left;

 width: 800px;
 margin: 0 auto;
 padding: 20;
}

.showtit:hover{background-color: #3f3f3f;}

a .showcase {
  color: black;
}

.showcase:hover {
 background-color: #3f3f3f;
 color: white;

}
.showcase a{color:black;}
.showcase a:hover {background-color: #3f3f3f;
 color: white;}


.showtype {
 text-transform: lowercase;
 font-size: 0.7em;
 color: #cecece;
}
.showdate {
 z-index: 0;
 top: 0.35em;
 float: right;
 position: relative;
 font-size: 0.7em;
 color: #cecece;
}

Messy code, I know, but this is after I've tried plugging every leak I could think of. Now, on Safari this code results in a layout like this:

imgur.com/54VFo.png

Where the middle is being hovered over. But on Firefox, I instead get this:

imgur.com/MCNYV.png

With that same middle being hovered over. So the div background hover isn't working, and, what's more, the spans I aligned on the right aren't aligning themselves.

Why is this? How do I fix this? How do I make certain this never happens again?

Answer 1

Your code has some issues:

• in HTML 4.01 or XHTML 1.0 , you can't use block elements (div) inside inline elements (a)
• if you are using a "strict" Doctype, you can apply the pseudo-class "hover" only to link elements

I suggest the code below:

<style>
div.showcase {
 border: 1px solid #EEE;
  font-size: 20pt;
 }
 div.showcase a{
  display: block;
  width: 100%;
  color:black;
  /*center the "a" tag in IE6 */
  text-align: center;
 }
 div.showcase a:hover{
  background-color: #3f3f3f;
  color: white;
 }
 div.showcase #content{
  display: block;
  width: 800px;
  margin: 0 auto;
  padding: 20px;
  text-align: left;
 }


span.showtype {
  text-transform: lowercase;
  font-size: 0.7em;
  color: #cecece;
}

span.showdate {
  z-index: 0;
  top: 0.35em;
  float: right;
  position: relative;
  font-size: 0.7em;
  color: #cecece;
}
</style>

<div class="showcase">
 <a href="#">
     <span id="content">
            <span class="showname">Stripes!</span>
            <span class="showtype">a theme</span>
            <span class="showdate">October 2009</span>
     </span>
  </a>
</div>

Notice that in FF the two span that contain "Stripes!" and "a theme" are not aligned, moreover you have a big alignment issue in IE6 (I've not tested the code with other versions).

---

EDIT: To float right the "showdate" span, just apply a float right and place the html code before the other two span(s) ... the margin-top fixes the alignment issue:

<style>
span.showdate {
    margin-top: 7px;
    float: right;
    font-size: 0.7em;
    color: #cecece;
}
</style>


<div class="showcase">
 <a href="#">
     <span id="content">
            <span class="showdate">October 2009</span>
            <span class="showname">Stripes!</span>
            <span class="showtype">a theme</span>
     </span>
  </a>
</div>

You have to play a bit with the CSS to align the span(s) "showname" and "showtype"; I don't know what you are trying to accomplish, but I suggest to replace the two span(s) with the html below:

<span class="showname">Stripes! <small>a theme</small></span>