Databases
StackOverflow2013
Postsdbo
POWeird <ul> element behavior with HTML5 and CSS3
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POWeird <ul> element behavior with HTML5 and CSS3
    text
    copied!<p>I am attempting to make a simple navigation bar using 4 images, wrapped inside an unordered list.</p> <p>I am having issues, because the bar is not lining up, it is acting as if the parent div it is nested within has a padding-left assigned to it and pushing the unordered list to the right. Here's a picture of what is happening:</p> <p><img src="https://i.stack.imgur.com/a2naj.png" alt="enter image description here"></p> <p>I have a border on the main navigation div to see what is going on.</p> <p>Here is my code:</p> <pre><code>&lt;div id="container"&gt; &lt;div id="header"&gt; &lt;h1 class="hidden"&gt;Blue Ridge Fencing&lt;/h1&gt; &lt;/div&gt; &lt;div id="navigation"&gt; &lt;ul&gt; &lt;li&gt;&lt;img src="images/website_build/nav_bar/home.jpg" width="208" height="50" alt="Home" border="0"&gt;&lt;/li&gt; &lt;li&gt;&lt;img src="images/website_build/nav_bar/about.jpg" width="227" height="50" alt="About" border="0"&gt;&lt;/li&gt; &lt;li&gt;&lt;img src="images/website_build/nav_bar/contact_us.jpg" width="290" height="50" alt="Contact Us" border="0"&gt;&lt;/li&gt; &lt;li&gt;&lt;img src="images/website_build/nav_bar/quote.jpg" width="235" height="50" alt="Quote" border="0"&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;div id="content"&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p>And the CSS:</p> <pre><code>#navigation { height: 50px; width: 1000px; background-image: url(../images/backgrounds/otis_redding.png); overflow: hidden; padding: 0px; border: 1px solid #000; } #container #navigation ul { margin: 0px; list-style-type: none; font-size: 34px; } #container #navigation li { float: left; } </code></pre> <p>Thank you in advance!</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