niche Posted May 10, 2012 Share Posted May 10, 2012 (edited) 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 May 10, 2012 by niche 1 Link to comment Share on other sites More sharing options...
Ingolme Posted May 10, 2012 Share Posted May 10, 2012 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. 1 Link to comment Share on other sites More sharing options...
dsonesuk Posted May 10, 2012 Share Posted May 10, 2012 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>'; ?> 1 Link to comment Share on other sites More sharing options...
niche Posted May 10, 2012 Author Share Posted May 10, 2012 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 More sharing options...
dsonesuk Posted May 10, 2012 Share Posted May 10, 2012 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 More sharing options...
niche Posted May 10, 2012 Author Share Posted May 10, 2012 Dsonesuk, cool trick. I didn't know css has operators. Is there a ref for that? Link to comment Share on other sites More sharing options...
Ingolme Posted May 10, 2012 Share Posted May 10, 2012 It's not an operator. It's the adjacent sibling selector: Select element B that immediately follows A in the DOM tree. Link to comment Share on other sites More sharing options...
dsonesuk Posted May 10, 2012 Share Posted May 10, 2012 http://w3schools.com/cssref/css_selectors.asp + targets next sibling element~ target all next sibling specific elements Link to comment Share on other sites More sharing options...
niche Posted May 10, 2012 Author Share Posted May 10, 2012 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 More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now