CSS Styles Inherited from Parent in Nested List - html

Question

I'm working on a resume-layout done in html/css. The problem I am encountering is an inheritance issue, I think. I've done a bit of research online, and this seems to be a fairly common problem, often associated with IE (insert expletives about IE).
This is what I'm attempting:
Edit
I want to have the parent list item underlined with no bullet point (disc).
I want the child (nested list) to have a bullet point (disc) and no underline.
So I've gone to JSfiddle and cut out the sections of the code (CSS normalize checked) to try and sort out what's going on and what I might be doing wrong.
HTML:
<h3>Qualifications Summary</h3>
<ul id="qualifications">
<li>BS in Computer Animation with a focus on art, design, illustration, and motion graphics.</li>
</ul>
<h3>Related Experience</h3>
<ul class="experience">
<li>Jun. 2002 – Present ~ <span class="jobtitle">Freelance Illustrator & Web Designer</span> ~ Drakenhart Studios
<ul>
<li>Educator, Illustrator, Graphic & Web Designer</li>
</ul>
</li>
<li>Nov 2006 - April 2008 ~ <span class="jobtitle">Graphic / Web Design</span> ~ National A1 Inc, Philadelphia, PA
<ul>
<li>Junior Designer</li>
</ul>
</li>
</ul>
This is the CSS:
ul {
padding-bottom: 15px;
margin:0px;
font-family: "Open Sans", Arial, Helvetica, sans-serif;
font-size: 14px;
}
/*Nested List Issues*/
ul.experience li {
text-decoration:underline;
list-style: none;
}
ul.experience ul li{
text-decoration:none;
list-style: disc;
}
Even with the code sectioned out and only the CSS that relates directly to it used, I still get the error.
Question I've been asking myself:
1) Is it something in the Normalize code? Not that I can see.
2) Is it the Browser/version? I use Chrome 36.x mostly. I've checked it in IE and Firefox. The same issue occurs.
3) Is there another way of doing this? Perhaps and very likely my syntax or usage is wrong. I've tried other ways including the > selector, but the most I get is the discs on the nested li shows up.
I made other attempts but as I am new.... I can't posted them yet. :)
I just can't seem to get it to work. What have I done incorrectly?
edit
Current suggestions offer to place a span tag around the parent element's content and style that. So far that seems to work. It adds more code to the markup rather then focus on CSS muscle. Inelegant but functional.

Answer 1

The normalize setting causes margin and padding on the list items to be removed. Try setting the list item to have a margin-left of 2em for instance. Also, instead of the text-decoration on the outer li, place your text in a span, and set the text-decoration on that instead.

Answer 2

You don't state exactly what the issue is, but I'm going to assume that it's 2 things:
1) The underline text-decoration property is showing up in the sub-list items. This is a bit confusing until you look at the markup:
<ul class="experience">
<li>Jun. 2002 – Present ~ <span class="jobtitle">Freelance Illustrator & Web Designer</span> ~ Drakenhart Studios
<ul>
<li>Educator, Illustrator, Graphic & Web Designer</li>
</ul>
</li>
...
Note that the first-level list item for <ul class="experience"> is not closed until after the sub-list is closed. What this means is that the sub-list gets the underline appearance even if you over-ride it on the sub-list items (as the property is actually on the parent list item).
To get around this, wrap the part you want underlined in another element, like a span and apply the underline style to the span:
<ul class="experience">
<li><span>Jun. 2002 – Present ~ <span class="jobtitle">Freelance Illustrator & Web Designer</span> ~ Drakenhart Studios</span>
<ul>
<li>Educator, Illustrator, Graphic & Web Designer</li>
</ul>
</li>
...
CSS:
ul.experience > li span {
text-decoration:underline;
}
2) The other issue I assume, is the disc not showing up. That's because normalize.css removes margin and padding from all lists. Add that back in:
ul.experience ul {
list-style: disc;
padding-left: 2em;
}
fiddle

Answer 3

IF you un-check "Normalized CSS" on the Fiddle Options (left pane of Fiddle) your code should work somehow... (it worked for me).

Answer 4

Using both steveax and Steven Don's suggestions I still had trouble with it. I realized that a part of the issue was with Bootstrap 3.0. After singling out the code and the CSS in Jssfiddle, though it mostly worked there, it still was not working in my working draft.
After a bit of adjusting both html and the css I finally got it to behave with little issues. However where it worked in JSFiddle, it wasn't working in my working code.
So because I was using bootstrap I double checked the documentation and still couldn't find the issue there. So I used Chrome's inspect element. For some reason list-style does not override the more specific list-style-type in Bootstrap.
So I switched the CSS around so I wasn't turning off and then on-again the list style Bootstrap was enforcing. I just switched off the disc for the main entry heading that was underlined as well, and then used the span tag on it (the first li) to underline it while avoiding underlining the child element as well.
I even removed the span around the job title, and used the strong tag instead.
HTML
<ul class="experience">
<li><span>Jun. 2002 – Present ~ <b>Freelance Illustrator & Web Designer</b> ~ Drakenhart Studios </span>
<ul>
<li>Educator, Illustrator, Graphic & Web Designer</li>
</ul>
</li>
</ul>
CSS
ul.experience > li { padding-left:2em; }
ul.experience ul { list-style:disc; padding-left:2em; }
ul.experience > li span { text-decoration:underline; }
Less code then I was using before in my CSS. It now works properly.

Answer 5

Try using the CSS important. An example of how it would be used is below:
text-align: center !important;
As you can see, it goes just before the semi-colon. Hope this helps!