Note that there are some explanatory texts on larger screens.

plurals
  1. POBackground Transparency not working in IE9 and below
    primarykey
    data
    text
    <p>It seems as I have some kind of Transparency problem in my latest project.</p> <p>I'm using the CSS option</p> <pre><code>background: transparent; </code></pre> <p>to make the background of a element transparent.</p> <p>Sadly it seems not to work and breaks with a box shadow or border or something, so that my ul looks strange...</p> <p>The project I'm talking about is temporarly available at </p> <p><a href="https://ggb2.zzinternet.de/homepage.html" rel="nofollow noreferrer">Project</a></p> <p>I'm talking about the </p> <pre><code>&lt;ul id="nav"&gt; </code></pre> <p>Element. This behavior only appears in IE9 and below.</p> <p>For later use, here's a picture of the described problem.</p> <p><img src="https://i.stack.imgur.com/0u4db.png" alt="Navigation &lt;ul&gt;"></p> <p>Here's the corresponding HTML code</p> <pre><code>&lt;ul id="nav"&gt; &lt;li class="active"&gt;&lt;a href="https://ggb2.zzinternet.de/homepage.html" target="_self"&gt;Startseite&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="https://ggb2.zzinternet.de/leistungen.html" target="_self"&gt;Leistungen&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="https://ggb2.zzinternet.de/seminare.html" target="_self"&gt;Seminare&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="https://ggb2.zzinternet.de/ueber-uns.html" target="_self"&gt;Über Uns&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="https://ggb2.zzinternet.de/kontakt---service.html" target="_self"&gt;Kontakt&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="https://ggb2.zzinternet.de/karriere.html" target="_self"&gt;Karriere&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; </code></pre> <p>and here's the corresponding CSS</p> <pre><code>#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); } </code></pre> <p>Thanks for your help!</p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload