Monday, January 6, 2014

fighting IE

well, lets start that IE is not a browser, as in just a web browser with a web kit, its more, like the SP optimizations and other programs you can build into it. that could be great if not that MS wants to dedicate it to web browsing too.

so any1 that tried to build a nice page will understand this:
its about 6 but relevant forever

anyway this proj i really had to fight it, and its not fun :(

simplest solution to most situations where it just look great everywhere and IE just MUST move it aside a few pic is to make another IE only css file, and load it after the main
<!--[IF IE]><link  rel="stylesheet" type="text/css" href="/Style%20Library/Nifgashim/Styles/IE.css"><![endif]-->

you can put there other solutions i will mention as well.

Problem: anchor hovering (a:hover), and hovering in general doesnt work!
i found that this problem is caused when you use floaters in your page, meaning that your element or one of its parents id a floater (has css float:somehing).
that horrible since today we have responsive designs and its all float based ?!
anyway i found that changing the elements prop position to relative solves the problem.

Problem: you want an empty span or element with only background image.
so u use the wonderful &nbsp; - but in IE it doesnt work. the only solution i found is to put a nested element with no opacity, like this:
<span class="hereWeWantBG">
<![IF !IE]>&nbsp;<![endif]>
<!--[IF IE]><span class="IEInvisability">content</span><![endif]-->

.IEInvisability{-moz-opacity: 0.00;opacity: 0.00;filter: alpha(opacity=00);display:inline-block;}
if memory serves you only need the filter prop, but this is copied from another element where i wanted it to be with no opacity at all so test it. also yes you need it to be inline-block.

Problem: yes IE no IE in html - answer as above.


  1. try   instead of  

  2. try & # 160 ; instead of & nbsp ; (without spacing :))