ansaurus

Question

Answer 1

A:

Works in Safari. Are you testing in IE, where :hover only works on a elements?

EDIT: I tested in Firefox, and it doesn't work there (works in Opera though). Using div.header_innerHeaderDivs fixes it... Maybe you can't use pseudo-selectors on just classes? It is valid though; might be a browser bug.

crimson_penguin 2010-05-28 03:02:03

Answer 2

A:

You might try:

#headerDiv div:hover{padding:4px;}

EDIT:

If you want the parent div to expand set display of .header_innerHeaderDivs to inline-block. Also, as mentioned above, you might want to set your dtd declaration to:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

or the html4.01 transitional variant.

edl 2010-05-28 03:04:29

This works, but instead of expanding #headerDiv along with the padding, it expands the inner divs only as if they had a higher z-index.

Babiker 2010-05-28 03:07:56

I think inline-block doesn't work in IE. Could be wrong.

crimson_penguin 2010-05-28 03:20:15

@crimson_penguin I think you're right. Well IE6 and IE7 anyway. I think IE8 will support it.

edl 2010-05-28 03:29:27

Answer 3

+2 A:

if that is a nav bar, it's better to just use a list of links(its more semantic that way) so your hover also works in ie( :hover only works for a elements in ie)

<ul id='header-nav'>
  <li><a>Comapny</a></li>
  <li><a>Edit</a></li>
  <li><a>Inventory</a></li>
  <li><a>Logout</a></li>
</ul>

then

#header-nav {
  background-color:#e0e2eb;
}

#header-nav a {
  border:solid 1px gray;
  display:inline;
  font:normal 11px tahoma;
  color:black;
}

#header-nav a:hover {
  padding: 4px.
}

also a tip: try to refrain from using "div" as part of a class name. it's not that helpful/descriptive in semantics :)

corroded 2010-05-28 03:05:54

Answer 4

A:

If you switch the doctype to XHTML transitional or above it works. IT might also work with HTML strict as well though i didnt try that. As a general ruel though you want to use a tags for hovers unless you are dictating the action via a js even handler.

prodigitalson 2010-05-28 03:07:24

ansaurus

tags:

views:

answers:

CSS :hover not working

related questions