Databases
StackOverflow2013
Postsdbo
POInternet Explorer 8, float left removes background color
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POInternet Explorer 8, float left removes background color
    text
    copied!<p>I've a question how to solve that in IE8 a background color is removed when setting float left in CSS:</p> <pre><code>&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;My page&lt;/title&gt; &lt;style&gt; #nav { margin: 100px auto; text-align: center; } #nav ul ul { display: none; } #nav ul li:hover &gt; ul { display: block; } #nav ul { </code></pre> <p>This background-color: lightblue; is removed:</p> <pre><code> background-color: lightblue; background: linear-gradient(top, #efefef 0%, #bbbbbb 100%); background: -moz-linear-gradient(top, #efefef 0%, #bbbbbb 100%); background: -webkit-linear-gradient(top, #efefef 0%,#bbbbbb 100%); box-shadow: 0px 0px 9px rgba(0,0,0,0.15); margin-left: 0px; padding: 0 20px; border-radius: 10px; list-style: none; position: relative; /*display: inline-table;*/ } #nav ul:after { content: ""; clear: both; display: block; } #nav ul li { </code></pre> <p>....when to set the float left:</p> <pre><code> float: left; } #nav ul li:hover { background-color: #4b545f; background: linear-gradient(top, #4f5964 0%, #5f6975 40%); background: -moz-linear-gradient(top, #4f5964 0%, #5f6975 40%); background: -webkit-linear-gradient(top, #4f5964 0%,#5f6975 40%); } #nav ul li:hover a { color: #fff; } #nav ul li a { display: block; padding: 5px; color: #757575; text-decoration: none; } #nav ul ul { background: #5f6975; border-radius: 0px; padding: 0; position: absolute; top: 100%; } #nav ul ul li { float: none; border-top: 1px solid #6b727c; border-bottom: 1px solid #575f6a; position: relative; } #nav ul ul li a { padding: 5px; color: #fff; } #nav ul ul li a:hover { background-color: #4b545f; background: linear-gradient(top, #4f5964 0%, #5f6975 40%); background: -moz-linear-gradient(top, #4f5964 0%, #5f6975 40%); background: -webkit-linear-gradient(top, #4f5964 0%,#5f6975 40%); } #nav ul ul ul { position: absolute; left: 100%; top:0; } &lt;/style&gt; &lt;/head&gt; </code></pre> <p>There is a html code for a drowdown menu:</p> <pre><code> &lt;body&gt; &lt;div id="nav"&gt; &lt;ul&gt; &lt;li&gt;&lt;a href="#"&gt;Inspiration&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Tutorials&lt;/a&gt; &lt;ul&gt; &lt;li&gt;&lt;a href="#"&gt;Web Design&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>Thank you </p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

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