Hover problem with ie

HTML & CSS
1

This hover works in ff, but not in ie.

Is there a work around available?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<?php session_start(); ?>

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="description" content="Save money" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>savebop </title>
<style type="text/css">
.button {
padding:0px;
width:82px;
height:40px;
vertical-align:top;
}

.message {
position:relative;
margin:10px 0px 0px -5px;
background:white;
width:100px;
display:none;
border-style:solid;
border-width:4px;
}

button.button:hover div.message {display:block;}
</style>

</head>

<body>
<?php
  echo '<button class="button" >Company Info';
	$item = "This item.";			
      echo '<div class="message">' . $item . '</div>';
  echo '</button>';
?>		
</body>
</html>
2

Hi :). In the future, please avoid posting PHP. Luckily the code was simple enough to convert to pure HTML.

It’s because you have invalid HTML. You can’t put a div inside a <button>. It just doesn’t work like that :). I’m sure a validation would confirm.

I would do something more like this.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><?php session_start(); ?>


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="description" content="Save money" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>savebop </title>
<style type="text/css">
.button {
padding:0px;
width:82px;
height:40px;
vertical-align:top;
}


.message {
position:relative;
margin:10px 0px 0px -5px;
background:white;
width:100px;
display:none;
border-style:solid;
border-width:4px;
}


button.button:hover + div.message {display:block;}
</style>


</head>


<body><button class="button" >Company Info</button>		  
      <div class="message">this item</div>
  	  
</body>
</html>
3

Thanks.

I made the changes and set the script for two hovers.

How do I keep the “Company Hover” from displacing the “Item Button” (ie how do I keep the button from jumping around)?


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<?php session_start(); ?>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="description" content="Save money" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>savebop </title>
<style type="text/css">
.button {
padding:0px;
width:82px;
height:40px;
vertical-align:top;
}
.message {
position:relative;
margin:10px 0px 0px -5px;
background:white;
width:100px;
display:none;
border-style:solid;
border-width:4px;
}
.button2 {
padding:0px;
width:82px;
height:40px;
vertical-align:top;
}
.message2 {
position:relative;
margin:10px 0px 0px -5px;
background:white;
width:100px;
display:none;
border-style:solid;
border-width:4px;
}
button.button:hover + div.message {display:block;}
button.button2:hover + div.message2 {display:block;}
</style>
</head>
<body>
<button class="button" id="a1" >Company Info</button>
<div class="message" id="a2">This company.</div>

<button class="button2" id="b1" >Item Info</button>
<div class="message2" id="b2">This item.</div>
</body>
</html>
4

Your HTML was wrong (both divs and both buttons have the same class :)). BUt I’d change the HTML and CSS up a bit.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="description" content="Save money" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>savebop </title>
<style type="text/css">
.button {
padding:0px;
width:82px;
height:40px;
vertical-align:top;
}
.message {
position:relative;
margin:10px 0px 0px -5px;
background:white;
width:100px;
border-style:solid;
display:none;
border-width:4px;
}
.button2 {
padding:0px;
width:82px;
height:40px;
vertical-align:top;
}
.message2 {
position:relative;
margin:10px 0px 0px -5px;
background:white;
display:none;
width:100px;
border-style:solid;
border-width:4px;
}
button.button:hover ~ div.message {display:block;}
button.button2:hover ~ div.message2 {display:block;}
</style>
</head>
<body>
<button class="button" id="a1" >Company Info</button>
<button class="button2" id="b1" >Item Info</button>
<div class="message" id="a2">This company.</div>
<div class="message2" id="b2">This item.</div>   
</body>
</html>

If the page was bigger, I’d probably not use ~. Well, it depends on how hte page would be setup. For this example, ~ is perfectly fine (apposed to ~).

5

I see. The order was wrong. Right?

6

Well it’s just how the HTML was structured really. It would be awkward to make it work anyway else unless you used some sort of script.

I’m not saying by any means that it was impossible. I just gave the easy solution to it :).

The order was wrong, in short (and the HTML class names).

7

Shouldn’t I use IDs instead of classes?

8

Depends. It doesn’t really matter though, unless you plan on reusing some elements on a page, potentially at least twice. Then use IDs.

My comment about the classes was that you had id=“message” twice. Which is fine, but I assumed that you want one div to show on hover PER each <button>

9

How do you write the hove if the IDs were used?

10

Say in the HTML you did id=“message” instead of class=“message”. Same with message2 :). And the buttons. In fact, in my below example. Say I just replaced every instance oef class, with ID.

You’d change the CSS like this. The only difference is that IDs are referenced via hash tag (#) instead of period (.)

[LEFT][COLOR=#464646]button#button:hover ~ div#message {display:block;}
[/COLOR][COLOR=#464646]button#button2:hover ~ div#message2 {display:block;}

[/COLOR][COLOR=#464646]

[/COLOR][/LEFT]

11

Last question. What’s the tilde saying that the + isn’t?

I just experience the power of the tilde.

12

I don’t understand what you are asking…:).

13

It’s about the tilde (~).

I started using what I am learning from you in a much larger script and had to change this:


button.button:hover + div.message {display:block;}
button.button2:hover + div.message2 {display:block;}

to this (just as you suggested):


button.button:hover ~ div.message {display:block;}
button.button2:hover ~ div.message2 {display:block;}

I was just wondering what the ~ was saying that the + wasn’t?

14

You can read up on both of them on the following links. I’d basically just echo what is being said.

15

RyanReese, I really appreciate your help. You made this a very satisfying topic for me.

16

Glad I could be of help :). You’re welcome.