hovering not working with child spans

Question

I have a problem I don't understand.

I'm creating an inbox, and I want the hovered message to change the background colour.

I am using spans to place the items, and I reckon this might be the reason that I cannot see any effect when hovering.

This is my css code:

#mainPanel #inbox h3 #fromSubjectHeader {
display: inline-block;
font-style:italic;
width: 177px;
float:left;
text-align:left;
}

#mainPanel #inbox h3 #dateHeader {
display:block;
font-style:italic;
width:177px;
text-align: left;
float:left;
}

#mainPanel #inbox a #fromSubject {
display: inline-block;
width: 173px;
float:left;
text-align:left;
padding-left: 4px;
}

#mainPanel #inbox a #date {
display:block;
width:173px;
text-align: left;
float:left;
padding-left: 4px;
}

#mainPanel #inbox a {
font-weight:normal;
text-decoration:none;
color:#000000;
display:block;
font-size:11px;
line-height: 16px;
width:535px;
}

#mainPanel #inbox a #unreadInbox {
font-weight:bold;
color:#165E8A;
}

#mainPanel #inbox a:hover { 
background:#B0DFF2; 
}

In the html code its called like this

<a>
<span id="fromSubject"></span>
<span id="fromSubject"></span>
<span id="date"></span>
</a>

Please share your code on http://jsbin.com so that we can see your problem live. Then post a follow-up comment. — Andrey Mikhaylov - lolmaus, Apr 22 '13 at 09:14

score 1 · Answer 1 · answered Apr 22 '13 at 09:19

1

For each of the styles on the various spans set the display property to inline-block and remove the float property. This will allow the a tag to expand to the height of its content.

#mainPanel #inbox a #fromSubject {
    display: inline-block;
    /* Rest of Styles */
}

#mainPanel #inbox a #date {
   display:inline-block;
   /* Rest of Styles */
}

#mainPanel #inbox a {
  display:inline-block;
  /* Rest of Styles */
}

Working Example http://jsfiddle.net/Ns6ag/

answered Apr 22 '13 at 09:19

Kevin Bowersox

93,289
19
159
189

@SimonMalone Glad I could help. This is caused because the containers of floated block elements will not honor the actual height. Instead the nested elements overflow the container, which has a height of 0. You can read about clearfixes to see examples/solutions to the problem. – Kevin Bowersox Apr 22 '13 at 09:25

score 0 · Answer 2 · edited May 23 '17 at 10:25

0

You should apply "clearfix" to a element, as all of it's content is floated and that results in a having 0 height.

If you do not know what clearfix is, take a look at What methods of ‘clearfix’ can I use?

edited May 23 '17 at 10:25

Community

1
1

answered Apr 22 '13 at 09:18

krcko

2,834
1
16
11

Siva ganesh Rongala · Answer 3 · 2013-04-22T09:52:20.593

0

The above code is working in FireFox and Crome but not in IE for that please put the below tag at top of the page

<!doctype html>

edited Apr 22 '13 at 09:52

answered Apr 22 '13 at 09:45

Siva ganesh Rongala

7
3

hovering not working with child spans

3 Answers3