Style Anchor tag in dynamically sized div

HTML & CSS
1

I have a page that has content populated from a php script pulling from a db. The amount of content that populates each div element is different in size. I want to be able to make the entire div a link which i have been able to accomplish. The problem I am facing is that I can’t style the a:hover element to encompass the entire div because I can’t define a height. Any suggestions?

css:


#client_box {width:650px; border: solid #EEE;} 

#client_box a, #client_box a:visited {display:block; width:100%; color:#0066cc;text-decoration: none;} 
  
#client_box a:hover {text-decoration:none; color: #ff4b33;background-color: #EFEFEF;}

#span50 {float:left;width:50%;}

#span100 {float:left;width:100%;}

div.spacer {clear: both;}

html:


<div id="client_box">
<a href="#"><span id="span50">PHP STUFF</span></a>
<div class="spacer"></div>
</div>

It works just like I want it to, except that the hover only highlights the first line of the div. The whole div is clickable as a link but it does not use the hover styling for color.

2

It styles everything on hover in firefox. What browser are you looking in?

3

I am using the most current version of firefox,3.6.12, to test in. Actually in ie. it seems to work just fine. All the attributes of hover seem to work except the background color in firefox. I can change the hover text color, just not the background.

It seems that having the php content wrapped in a span that is floated is causing the problem. I just don’t know why.

4

You could try to add float: left to the anchor:


#client_box a, #client_box a:visited {
    display:block;
    float: left;
    width:100%; 
    text-decoration: none;}
5

Donboe adding the float:left; to the anchor worked well. You posted just as I was editing to add that it was the floated span that seemed to be the problem.

Now I just need to figure out how to tuck this bit of css styled content into the wordpress page I’m working with. Something in the wordpress styling is conflicting so that still only the first line in my div is highlighted on hover.

Any ideas how to reset for this?

6

I figured it out:

I just added clear:both; to the a tag.

Thanks so much for your help, SitePoint wins again!

7

Good you figured it :slight_smile: