Background Transparency not working in IE9 and below

Question

It seems as I have some kind of Transparency problem in my latest project.

I'm using the CSS option

background: transparent;

to make the background of a element transparent.

Sadly it seems not to work and breaks with a box shadow or border or something, so that my ul looks strange...

The project I'm talking about is temporarly available at

Project

I'm talking about the

<ul id="nav">

Element. This behavior only appears in IE9 and below.

For later use, here's a picture of the described problem.

Navigation <ul>

Here's the corresponding HTML code

<ul id="nav">
        <li class="active"><a href="https://ggb2.zzinternet.de/homepage.html" target="_self">Startseite</a></li>
        <li><a href="https://ggb2.zzinternet.de/leistungen.html" target="_self">Leistungen</a></li>
        <li><a href="https://ggb2.zzinternet.de/seminare.html" target="_self">Seminare</a></li>
        <li><a href="https://ggb2.zzinternet.de/ueber-uns.html" target="_self">Über Uns</a></li>
        <li><a href="https://ggb2.zzinternet.de/kontakt---service.html" target="_self">Kontakt</a></li>
        <li><a href="https://ggb2.zzinternet.de/karriere.html" target="_self">Karriere</a></li>
</ul>

and here's the corresponding CSS

#nav {
  margin: 0; 
  list-style: none;
  background: transparent;     
  margin-left: 35%;
  height: 31px;
  width: 625px;
  display: block;
  border: 0;
}
  #nav li {
    border: 0;
    float: left;
    margin: 0;
    position: relative; 
    line-height: 30px;
    background: url('individual/menu/middle-el_bg.png');
    display: inline;
    border: 0;
    width: 15%;
}


#nav {
box-shadow: 0px 5px 8px rgba(0,0,0,0.2);
}

#nav li.active:after {
    box-shadow: -2px 5px 8px rgba(0,0,0,0.2);
}

#nav li.active:before {
    box-shadow: 2px 5px 8px rgba(0,0,0,0.2);
}

Thanks for your help!

this might help http://stackoverflow.com/questions/3997065/ie-css-bug-background-color-transparent-behaves-differently-to-background-colo — urbanlemur, Jul 04 '13 at 13:48
It does very little good for later users of StackOverflow for you to only post a link that "is temporar[i]ly available." What you need to do is post a smaller test case on a site like [jsFiddle](http://jsfiddle.net/) with the relevant code to reproduce the problem, and then post the html and css code here as well. — ScottS, Jul 04 '13 at 13:49
@ScottS Thanks for your advice, I already added a picture of my problem and currently trying to create a jsFiddle — Evils, Jul 04 '13 at 13:54
Providing code in your question usually helps most :D Not only for later users but also for ppl who don't trust weird named websites... — Ms. Nobody, Jul 04 '13 at 14:03
Okay I added all code concerning my problem. That should help others in the future. — Evils, Jul 04 '13 at 14:17

score 1 · Accepted Answer · answered Jul 04 '13 at 13:57

1

Why don't you remove the following line from ie-fixes9.css

#nav box-shadow: 0px 5px 8px rgba(0,0,0,0.2)

answered Jul 04 '13 at 13:57

brutusmaximus86

264
2
7

Background Transparency not working in IE9 and below

1 Answers1