Note that there are some explanatory texts on larger screens.

plurals
  1. POCSS Not showing background (overflow:auto not helping)
    primarykey
    data
    text
    <p>The background and border of #navigation_conatiner_7 are not visible. I tried adding overflow:auto to its parent, and it just displays scroll bars. Later I tried adding the same to it, but then it is completely hidden. Since I have run out of ideas, I thought maybe someone here might have the answer.</p> <p>Here is the code: <a href="http://jsfiddle.net/Tamaki/my5GV/" rel="nofollow">http://jsfiddle.net/Tamaki/my5GV/</a></p> <p>HTML:</p> <pre><code>&lt;div id="navigation"&gt; &lt;div id="holder"&gt; &lt;div id="navigation_category_2"&gt;articles&lt;/div&gt; &lt;div id="navigation_category_3"&gt;columns&lt;/div&gt; &lt;div id="navigation_category_7"&gt;submit &lt;div id="navigation_container_7"&gt; &lt;div class="navigation_link"&gt;&lt;span style="margin-left: 10px;"&gt;submit&lt;/span&gt;&lt;/div&gt; &lt;div class="navigation_link"&gt;&lt;span style="margin-left: 10px;"&gt;applications&lt;/span&gt;&lt;/div&gt; &lt;div class="navigation_link"&gt;&lt;span style="margin-left: 10px;"&gt;points&lt;/span&gt;&lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p>CSS:</p> <pre><code>#navigation { top: 0px !important; width: 100%; height: 60px; background-color: #eee; border-bottom: solid 3px #dd6a0c; position: fixed; } #holder { width: 960px; margin: 0 auto; height: inherit; } /* Navigation ============================*/ #navigation_category_2, #navigation_category_3, #navigation_category_7 { height: 60px; float: left; width: 120px; text-align: center; margin: 0 7px 0 8px; cursor: pointer; line-height: 60px; font-family: Impact, Arial, sans-serif; color: #111; font-size: 18px; } #navigation_category_2:hover, #navigation_category_3:hover, #navigation_category_7:hover { background-color: #dd6a0c; color: #eee; } #navigation_category_7:hover { background-color: #eee; color: #111; } #navigation_container_7 { top: 0; position: relative; display: none; width: 160px; left: -24px; border: 3px solid #dd6a0c; border-top: none; height: 0px; background-color: #eee; } #navigation_category_7:hover #navigation_container_7 { display: block; } .navigation_link { top: 0; width: inherit; height: 26px; text-align: left; font-size: 11px; font-family: Verdana; color: #111; line-height: 26px; text-transform: capitalize; font-weight: bold; } .navigation_link:hover { background-color: #dd6a0c; color: #eee; } </code></pre>
    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