css - IE - <a> tag not rendering properly, works in chrome, firefox etc -

i have issue rendering of tag on page in ie. problem lies in following; tag, in ie not fill tag. picture link in ie text takes precedence , overrides image make text link. chrome , firefox have no issues , render fine. question is:

how can make image link in ie , work in chrome , firefox?

the following images showcase problem: problem in ie:

how should render per chrome , firefox:

the code section follows:

h1#site-name, div#site-name /* name of website */ { margin: 0; font-size: 2em; line-height: 1.3em; height: 115px; background: url('/sites/default/files/images/ipark2-theme-assets/ipark_title.jpg') no-repeat top right; margin-left: 212px; color: transparent;  }    #site-name a:link,   #site-name a:visited   {    color: transparent;     text-decoration: none;     display: block;     height: 100%;   filter: alpha(opacity=50);   font-size:1em;   } 

edit: addition of html markup:

 <div id="logo-title">   <div id="logo"><a href="/" title="home" rel="home"><img src="/sites/all/themes/zen/ipark2/logo.png" alt="home" id="logo-image" /></a></div>   <div id="site-name"><strong>  <a href="/" title="home" rel="home">teaching , learning innovation park</a>  </strong></div>   </div> <!-- /#logo-title -->    </div></div> <!-- /#header-inner, /#header --> 

you're applying id 2 elements (your h1 , div), make use of classes @ moment you're slapping id on everything.

i'm not sure if solve issue, won't hurt , know older versions of ie more strict recognizing id if it's not unique. since you're targeting anchor tag through id, makes me question if isn't issue.