flunn Posted February 20, 2009 Share Posted February 20, 2009 I'm working on a redesign of the home page of my website. I'm using rollover popups (text only, no images, no links) as a way of providing more information to users without cluttering up the page. I’ve managed to write valid code that works fine in all browsers I’ve tested except for IE 6 and 7. There are two problems with the popups on IE 6 & 7: (1) the formatting disappears (very simple formatting, just a matter of bold and italic text and indentation) (2) the popups are not on the top level (in other words, when the popups appear, they are not fully visible because they spread “under” adjacent divs rather than over them as in other browsers.) I have used “x-index” in the code and have tried to solve the problem by fiddling with the settings but to no avail. (I have read that x-index is not supported in IE6, but I’m not too worried about that. I’d be happy if I could get the popups working properly in IE7 and then write special code without popups for IE6.) These two snippets include the crucial code. h4 a:hover{ color: black; border-bottom: 1px solid black; } h4 a span{ display:none; text-decoration: none; } h4 a:hover span { display:block; position:relative; top:0px; left: -10px; width:200px; height:255px; padding: 12px; margin: 10px; z-index: 5; color: black; background: #FDF8AB; font: 12px Arial; text-align: left; font-weight: normal; line-height: 125%; } <div id = "fp_box_6"><h4><a href="/flesl/Directories/listening_directory.html">listening<span> <object class="bold">• audio files for paired stories</object><br/> <object class="bold">• other listenings</object><br/> <object class="pop">- gambling addiction (2)</object> </span> </a> </h4> </div> <!--fp_box_6--> (I would be happy to give the url of the page, but as I understand it, this site does not permit the posting of urls.) with best regards to all from flunn Quote Link to comment Share on other sites More sharing options...
sanguinious Posted March 2, 2009 Share Posted March 2, 2009 Give this a go, I have tested it in IE7, Safari 4, FF, Chrome and Opera. I don't have IE6. I had to cheat in order to get the link underlined as otherwise the text in the 'popup' is underlined too, straingly in all browers apart from IE7, but this works across all of them. Angus. <html> <head> <style> a { text-decoration: none; } a:hover span { display: block; position: absolute; top: 35px; left: 0px; width: 125px; padding: 5px; margin: 5px; z-index: 100; color: #000; background: #ccc; font: 10pt Verdana, sans-serif; text-align: center; border: 1px solid #000; } h3 span { display: none; } </style> </head> <body> <h3> <a href="/flesl/Directories/listening_directory.html"> <u>Link to hover</u> <span> This is the content of the pop up. <br />Line two <br />line three <br />line four </span> </a> </h3> This is some more information. </body> </html> Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.