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:

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?

3 answers

-1
points
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 almost 8 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 almost 8 years ago
  • Someone actually downvoted me for this? Rob Nixon almost 8 years ago
Rob 230
1
point

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 almost 8 years ago by Rob
  • Then how would I go about creating a 100% width link that contains within it multiple other elements? Rory almost 8 years ago
  • I should also add, as an update: I have the positioning error completely fixed. I am only stuck re: the background. Rory almost 8 years ago
  • Put your anchor inside the div and wrap it around those inline elements. Rob almost 8 years ago
  • That doesn't work. It doesn't stretch to 100%. Rory almost 8 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 almost 8 years ago
Rob 230
0
points

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 almost 8 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 almost 8 years ago