Nested CSS Tabs, Conflicting ul and li formatting

Question

I have a tab system built in css using unordered lists and list items. I would like to embed a second tab structure using the same visual style within my content region. I was able to do that and everything functioned, but there is an appearance issue. Within my content region I have a different set up ul definitions. I would essentially like to tell one div to follow half of the instructions defined in the content region. The spacing and that type of formatting is needed, but I would like the ul stuff ignored.

If anyone has experience in this, I will gladly supply any needed code. I didn't want to post a bunch of stuff that didn't assist in solving the problem though.

Thanks for your help

Answer 1

Apply an "un-reset" CSS block to your content region.

See: https://github.com/jbcrawford/Un-ResetStylesheet

or: http://noscope.com/vanilla-css

Answer 2

You need to specifically target the lis and uls only in your content and override values you dont want or change.

If your content is in a wrapper called #content, and the tabs are called .tabs then do

#content .tabs {
background-image:none;
margin:0px;
}

and so on, setting the values you need.

How are the tabs styled? Use the exact same selectors but put a selector in front of them, like the content wrapper so you can target them specifically.

Hard to give you an exact answer without any code.