0

One of my UL is not displaying correctly. It is both displaying things inline and also the bullets do not show.

I know that this issue is isolated strictly to my divs that are used with my tabbed interface. I'm also assuming this is due to the hierarchy above. (The .tabs li says to display things 'inline'.) If I delete that, obviously the tab interface is screwed. How can I keep my divs displaying horizontally, and have the lists inside of the div box display in a block?

Thanks!

CSS

    .basics ul {font-family:terminal;
         font-size:9px;
         text-transform:uppercase;
         color:gray;
         padding:0px;
         display:block;
         }


    li.basics { list-style-image: url('/bullet.png'); 
         }   

    ul b {font-family: terminal;
  font-size: 8px;
  text-transform:uppercase;
  color:#fff3a2;
  font-weight:lighter;
  }


    div.tabs {
            padding:15px;
            width:760px;
            background:#000;
            color:#fff;
            border-radius: 0em 4em 1em;
            -moz-border-radius: 10px;
            margin-left:3px;
            height:200px;
            overflow: auto;
}
    ul.tabs {
    padding:0;
    margin:0;
    margin-top:10px;
    margin-left:3px;
    }


        .tabs li {
            list-style:none;
            display:inline;
        }

and the html code:

    <ul class='tabs'>
<li><a href='#tab1'>BASICS</a></li>
<li><a href='#tab2'>BIOGRAPHY</a></li>
<li><a href='#tab3'>RANDOM</a></li>
<li><a href='#tab4'>NPCs</a></li>
  </ul>


   <div id="tab1" class="tabs">

<ul class="basics">
<li><b>Full Name:</b> 
<li><b>DOB:</b> 27 May 1985; 28 YRS </li> 
<li><b>Birthplace:</b>Olinda, Brasil</li> 
<li><b>Nationality:</b>Brazilian, French, & American</li>


</ul>
1
  • 1
    Why do you give tabs class name to div as well? and what plugin you are using
    – PSL
    Oct 13, 2013 at 2:16

1 Answer 1

3

If I'm understanding your question correctly, you want the top to be horizontal, and the lower one to be vertical. I just changed your rule from .tabs li to ul.tabs li

http://jsfiddle.net/itsmikem/3RwMn/

Let me know if that's your issue.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.