Nuv Posted April 22, 2011 Share Posted April 22, 2011 I am trying the things after reading tutorials and i am stuck at this.In IE (that is embedded in my php editor) the background is transparent while in FF it works normally as it should.However when i open on my IE 8 it works fine. That should mean my embedded editor IE is old. Is their a way i can make it browser compatible ? Also i am trying to round the corners without images and using only CSS (not CSS3). CSS <style>a span{display:none;} a:hover span {display: block; position:relative; width: 180px; height: 40px; padding: 0px; margin: 10px; z-index:6; color:#FFFFFF; text-align:center; filter:alpha(opacity=100); opacity:1; font-size:12px; font-family:Arial, text-align:center; background-color:#15317E;} </style> HTML <a href="http://URL_OF_SITE_HERE"><img src="images/Icon.png" alt="" width="50" height="50" /><span>Something</span></a> Embedded IE - IE 8 and FF - Hope CSS freakie won't ask me to use reset.css as i am on already made theme and i am not capable to edit the complete theme. Quote Link to comment Share on other sites More sharing options...
cssfreakie Posted April 22, 2011 Share Posted April 22, 2011 Hi nuv, this probably is the z-index bug for IE. Depending on your use of a valid doctype, all versions of IE may be affected by this. No valid doctype means IE goes in to: I am IE 5 mode (simple said) So do you have a valid doctype? if not include one at the top. That is not rocket science just copy paste one. Second, and that should be the remedy for the bug. In a nutshell if you use a z-index in lower versions of IE, you need to give a z-index also to the parent(container) item. otherwise you end up with what you have. some info can be found here: http://ltslashgt.com/2007/05/16/relative-zindex-and-ie/#comments or here: http://www.gobdg.com/blog/2009/04/positionrelative-z-index-ie-bug/ But if you use google and type in z-index bug you will get tons of hits. p.s. I find it a nice habit to include a conditional comments for different versions of IE instead of using browser specific hacks. Quote Link to comment Share on other sites More sharing options...
Nuv Posted April 22, 2011 Author Share Posted April 22, 2011 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> Quote Link to comment Share on other sites More sharing options...
cssfreakie Posted April 22, 2011 Share Posted April 22, 2011 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> well that looks good, so up next step 2 z-index bug. Quote Link to comment Share on other sites More sharing options...
Nuv Posted April 22, 2011 Author Share Posted April 22, 2011 Yeys ~ Its worked. Thanks to you i am even able to step in the turf of CSS. Now the rounded corners. Quote Link to comment Share on other sites More sharing options...
cssfreakie Posted April 22, 2011 Share Posted April 22, 2011 use the new css3 border-radius (and or -moz-border-radius) for that, saves you a hack of a time. Unless your client insists that they want rounded corners on all browsers P.s. don't forget to mark your topic solved, saves others reading through and find out it's fixed already 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.