CSS not being applied to all appended list elements

Question

Link to code: http://codepen.io/danessh/debug/uCBds

The desired effect is to have any added item to be appended to the menu with rounded corners. That part seems to work, but the CSS does not seem to work as I expected.

Issue:

The margin for any item added after the first overlaps instead of appearing like the last added item. I can see this because there is opacity set.

Question:

What is the possible cause of the first item being styled by CSS and all other items added in the same manner not displaying all the styling declarations?

Note: Items are being appended to $('#menu ul'); object. When I appended an item using $('li:last');, the first item displayed overlaps other menu items. margin: -2px; is set for the existing menu items so that no gaps appear.

Answer 1

The 2px spaces are actually coming from your markup (there are a bunch of articles on this). If you remove the whitespace between your <li> elements, the spaces will go away. This is a side effect of making your <li> elements inline.

The dynamically-created elements don't have this problem, so you're shifting them over 2px too far. To fix it, remove the negative margin completely and either remove the whitespace or float them to the left.

Answer 2

EDIT: I got your problem now, the problem is , when you are adding new li elements from code, there is no whitespace generated in the markup, as is there in the already added elements.

e.g from your markup:

<li><a id="first" href="#">Who</a></li>
        <li><a href="#">What</a></li>
        <li><a id="last"href="#">When</a></li>

after adding your element on click

 <li><a id="first" href="#">Who</a></li>
        <li><a href="#">What</a></li>
        <li><a href="#">When</a></li><li><a href="#">Who</a></li><li><a id="last" href="#">What</a></li>

notice there are no whitespaces in the generatd markup

what you can try

 menu.append('<li><a id="last" href="'+ itemUrl.val() + '">'+ item.val().toUpperCase() + '</a></li>  ');

notice the extra two spaces after </li>

whitespace in the markup matters when you are dealing with inline elements.

Answer 3

try this css

#menu li {
  display: inline;
  float:left;

}

#menu a {
  background-color: purple;
  padding: 5px 30px; 
  color: white;
  text-decoration: none;
  font: 18px sans-serif;
  opacity: .9;
  text-transform: uppercase;
}

Answer 4

This is a known problem with DOM elements when using display: inline or inline-block. What you need to be doing is float for the li elements. Here's the updated codepen.

I've also made some modifications to your code like removing ids first & last and instead using css selectors: first-child and last-child.

JavaScript:

function addMenuItem () {  
  var menu = $('#menu ul');
  var item = $('#itemName');
  var itemUrl = $('#itemUrl');
  if (item.val() && itemUrl.val()){
    menu.append('<li><a href="'+ itemUrl.val() + '">'+ item.val().toUpperCase() + '</a></li>');
    item.val('');
    itemUrl.val('');
  }
}

CSS:

#menu ul {
  list-style: none;  

}

#menu li {
  display: inline-block;
  float: left;
}

#menu a {
  background-color: purple;
  padding: 5px 30px;
  margin: 0px;
  color: white;
  text-decoration: none;
  font: 18px sans-serif;
  opacity: .9;
  text-transform: uppercase;
}

li:first-child a {
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;  
}

li:last-child a {
  border-top-right-radius: 20px;
  border-bottom-right-radius: 20px;     
}

#menu a:hover {
  background-color: orange;   
}

button {
  background-color: pink;  
  font-size: 14px;
  color: white;
  font-weight: bold;
  border-radius: 3px;
  margin-top: 5px;
  padding: 15px 32px;
}

button:hover {
  background-color: lightblue;  
}

input {
  background-color: whitesmoke;
  margin-top: 5px;
  padding: 10px 10px;
  display: block;
  font-weight: bold;
}

input, button {
  border: none;    

}

#workSpace {  
  width: 95%;
  padding: 20px;
  background-color: white;  
}


body{
  background-color: whitesmoke;
}
form {
  clear: both;
  margin-top: 50px;
}

HTML markup:

<div id="workSpace">
<div id="menu">
    <ul>
        <li><a href="#">Who</a></li>
        <li><a href="#">What</a></li>
        <li><a href="#">When</a></li>
    </ul>
</div>

<form>   
  <input id="itemName" type="text" placeholder="Menu Item" />  
  <input id="itemUrl" type="url" placeholder="Item URL" />
  <button type="button" onclick="addMenuItem()">Add Menu Item</button>
</form>
</div>

Answer 5

try the css

#menu ul {  
            list-style: none;  
            margin: 0;  
            width: 100%;  
            display: block;  
            float: left;  
            margin-bottom: 20px;
          }
#menu li {  
            float: left;
         }