Rory 0

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:

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

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?

3 answers

This was chosen as the best answer

Try adding display:block to the .showcase a{color:black;}. Anchor tags are inline elements but you need to treat it as a block-style element for the background hover effect to work correctly. To be honest, I'm not sure why it works for Safari without this.

I wasn't able to duplicate the weird alignment of the showdate class that you have in your image. It looks fine on my side, so it's not related to the code posted here.

Answered over 7 years ago by Rob Nixon
  • That's how I got it to work. The alignment issue was fixed by putting Showdate before the left-aligned blocks. Rory over 7 years ago
  • Someone actually downvoted me for this? Rob Nixon over 7 years ago
Rob 230

Anchors cannot wrap around block level elements which is what a div is. Your markup is invalid. What you are trying to create will work in HTML5 but I assume you aren' t using that.

Your CSS is incorrect, too, but it's applied to the invalid html so it doesn't matter.

Answered over 7 years ago by Rob
  • Then how would I go about creating a 100% width link that contains within it multiple other elements? Rory over 7 years ago
  • I should also add, as an update: I have the positioning error completely fixed. I am only stuck re: the background. Rory over 7 years ago
  • Put your anchor inside the div and wrap it around those inline elements. Rob over 7 years ago
  • That doesn't work. It doesn't stretch to 100%. Rory over 7 years ago
  • Ahem. Sorry, I'm not phrasing myself correctly. I need to have 100% clickability within the large link. If I style the div and then the a, I don't get the entire thing padded. Rory over 7 years ago
Rob 230

I don't seem to be able to add any more comments.

The markup works for me. Are you using a doctype? Also, you must change 'a .showcase' to '.showcase a'

Answered over 7 years ago by Rob
  • I fixed this just now, actually. The solution was to style the a as a block. Thanks for helping out! Rory over 7 years ago