Jump to content

hover problem with ie - Solved with thanks in the final post


niche
 Share

Recommended Posts

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> 

Edited by niche
  • Like 1
Link to comment
Share on other sites

I can't see anything wrong with it, except maybe that since buttons are graphical elements of the operating system styling may be limited in some browsers.

  • Like 1
Link to comment
Share on other sites

Well you can force IE9 to use IE7 compatibility mode, because unbelievably IE9/IE8 compat No! but IE7 compat Yes! OR

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

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

  • Like 1
Link to comment
Share on other sites

Thanks Ingolme. I just switched from a button to a div and problem solved. What's the easiest way to style a div to make it appear the way a default button appears including text? I can think a way to build it up with divs , but that seems like a lot of code for such a little thing.

Link to comment
Share on other sites

Thanks Ingolme. I just switched from a button to a div and problem solved. What's the easiest way to style a div to make it appear the way a default button appears including text? I can think a way to build it up with divs , but that seems like a lot of code for such a little thing.
Use my method, works in all browsers, and get same result.
button.button:hover + div.message {display:block;}

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

Link to comment
Share on other sites

Dsonesuk, cool trick. I didn't know css has operators. Is there a ref for that?

Link to comment
Share on other sites

Never been to that page. As Spock said, "for everything, there is a first time". Thanks for your help Ingolme and dsonesuk.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...