html - Absolute Block Nested in Relative Block Appears Lower in IE8 -
ugh. really, hate cross-browser compatibility... i'm working on wordpress site client create popup box appears below item i'm hovering on (using custom shortcode). have top set 16px, , works fine in firefox. however, in ie8, appears lot further down. if set top "0", still appears below containing blog, instead of @ top of it.
i have related issue, in font size in ie8 2 pixels smaller. there <sup></sup> tag before this, well, removing doesn't change much--the font size still smaller in ie8.
here page:
http://www.medicalmarcom.com/services/
every question mark along left side has popup appears when hovering on (kinda tooltip). need make work in ff, ie, safari, , chrome. 1 doesn't work in ie. thankfully, didn't mention ie6, i'm not worrying unless singles out.
here html:
<span class="questions"><sup>( <div class="popup_content"><span class="popup">?</span> <div class="popup_inside" style="display: none;">we’ll ask questions understand business, objectives, competitive situation, , positioning statement.<br /> <a href="http://www.medicalmarcom.com/services/medical-device-marketing-discovery/"><span style="color:#15398c"><em>read more >>></em></span></a></div> </div> )</sup></span> css:
.popup_content { display: inline; position: relative; } .popup_inside { background-color: #fff; border: 1px solid #000; text-align: left; font-size: 12px; color: #000; width: 300px; padding: 2px; line-height: 1.5; left: 0; top: 16px; z-index: 1001; position: absolute; display: none; } .popup { position: relative; z-index: 1000; }
ok, due how ie8 rendering sup tag, believe. considers baseline same rest of text, rather above it. if want css, i'd consider rolling own superscript class.
here's fiddle of seemed work me.
as alternative solution, seems rendering correctly in ie7, force ie8 ie7 compatibility mode. drop line @ top of <head>. don't know ie9, it's worth shot.
<meta http-equiv="x-ua-compatible" content="ie=emulateie7" />
Comments
Post a Comment