TechSpot

Does any one trouble shoot css ul ol?

By SOcRatEs
May 2, 2006
  1. Can you spot what I did wrong with nesting OL with UL?
    Hover buttons got wacked when I started nesting OL.
    I now have "1." on leftside of buttons
    Website
    My OL listing is correct:
    1.
    2.
    --2.1
    ----2.1.1
    3.
    4.
    --4.1
    I think maybe triple nesting may have hosed it.
    Thank you to anyone who can help!!

    Code:
    Html head:
    <style type="text/css">
    body {
    background-image:
    url('images/bg22.jpg');
    background-attachment: fixed;
    }
    </style>
    <style type="text/css">
    ol { counter-reset: item }
    li { display: block }
    li:before { content: counters(item, ".") ". "; counter-increment: item }
    </style>
    </head>
    Body:Left col
    <div id="button">
    <ul>
    	<li><a href="index.html">Home</a></li>
    	<li><a href="2.html">Contacts</a></li>
    	<li><a href="3.html">About Us</a></li>
    	<li><a href="http://my-yardsale.com/phpBB2/index.ph">Arizona's Yard Sale</a></li>
    	<li><a href="4.html">Terms of Use</a></li>
    	<li><a href="5.html">Prohibited Items</a></li>
    	<li><a href="6.html">Affiliates</a></li>
    	<li><a href="region.html">Yard Sales by State</a></li>
    </ul>
    </div>
    Center col
    <ol>
       <li>Category One</li>
       <li>Category Two     <----Note: No Closing List Tag
          <0l>
              <li>Sub-Category One</li>
              <li>Sub-Category Two     <----Note: No Closing List Tag
                  <ol>
                     <li>Sub-Sub-Category One</li>
                     <li>Sub-Sub-Category Two</li>     <----Note: Closing List Tag
                  </ol></li>           <----Note: Nested List Closed
               <li>Sub-Category Three</li>
          </ol></li>       <----Note: Nested List Closed
        <li>Category Three</li>
    </ol>      <----Note: End of entire list
     
  2. Samstoned

    Samstoned TechSpot Paladin Posts: 1,018

    you discribing the hover state change to lighter color
    if so all works here (firefox)
    may try using full url's
    as some browsers don't convert the same
    should check for dual compliance
    add a browser check to css
    my header for all pages contant only the css link no css code

    m7l.com/catalog css with php
     
  3. SOcRatEs

    SOcRatEs TechSpot Paladin Topic Starter Posts: 966

    I think you are right. Thank you!
    I'm brand new to css, still learning how to construct style sheet, then call it from body of html via tag.

    I'm still using the nested ol:

    <style type="text/css">
    body {
    background-image:
    url('images/bg22.jpg');
    background-attachment: fixed;
    }
    OL { list-style: decimal }

    OL OL { list-style: lower-alpha }

    OL OL OL { list-style: lower-roman }
    </style>
    I don't know how to convert this to my style sheet. but I'm getting there.

    My new layout.css
    Code:
    /* Layout Stylesheet */ 
    
    body{
     margin: 0; padding:0;
     background: #808080; color: #333333; 
      }
    	
    #button {
    	width: 12em;
    	border-right: 1px solid #000;
    	padding: 0 0 1em 0;
    	margin-bottom: 1em;
    	font-family: 'Trebuchet MS', 'Lucida Grande',
    	  Verdana, Lucida, Geneva, Helvetica, 
    	  Arial, sans-serif;
    	background-color: #808080;
    	color: #333;
    	}
    #button ul {
    		list-style: none;
    		margin: 0;
    		padding: 0;
    		border: none;
    		}
    		
    	#button li {
    		border-bottom: 1px solid #DDDDDD;
    		margin: 0;
    		}
    #button li a {
    		display: block;
    		padding: 5px 5px 5px 0.5em;
    		border-left: 10px solid #4B4B4B;
    		border-right: 10px solid #508fc4;
    		background-color: #666666;
    		color: #000000;
    		text-decoration: none;
    		width: 100%;
    		}
    
    	html>body #button li a {
    		width: auto;
    		}
    
    	#button li a:hover {
    		border-left: 10px solid #646464;
    		border-right: 10px solid #C0C0C0;
    		background-color: #969696;
    		color: #242424;
    		}		
    #lh-col{
     position: absolute;
     top: 20px;
     left: 20px;
     width: 180px;
     border: 1px solid #333333;
     background: #c0c0c0;
     color: #333333;
     margin: 0;
     padding: 0;
     height: 500px;
     z-index: 2;
     }
    			
    #rh-col{
     position: absolute;
     top: 20px;
     right: 20px;
     width: 180px;
     border: 1px solid #333333;
     background: #c0c0c0;
     color: #333333;
     margin: 0;
     padding: 0;
     height: 500px;
     z-index: 1;
     }
          
    #c-col{
     position: relative;
     margin: 20px 201px 20px 201px;
     border: 1px solid #333333;
     background: #E8E8E8 ;
     color: #333333;
     padding: 20px;
     z-index: 3;
     }
     
  4. RealBlackStuff

    RealBlackStuff TS Rookie Posts: 6,503

    Install/use Firefox and also get the Firefox extension "Web Developer". It does wonders when checking out your new web pages. It includes CSS as well.
     
  5. SOcRatEs

    SOcRatEs TechSpot Paladin Topic Starter Posts: 966

    You and a few others here got me using FF months ago.
    I did not know about the Web Developer part tho thank you!

    BTW
    How goes the move?

    edit. WOW!
    I've been using view source but this is incredilble!!!
     
  6. RealBlackStuff

    RealBlackStuff TS Rookie Posts: 6,503

    Everyone always likes that Web Developer! I particularly like the Outline function.

    As to the move, our house only went on the market last Friday, first viewers coming in on Monday already. We have de-cluttered and repainted most of the interior, and use temporary storage for the de-cluttered stuff.
    We have several quotations in from movers. Based on that we sold some large furniture, so we can limit it all to a 20-ft. container.
    Right now we are knackered from all the cleaning/painting etc.
     
Topic Status:
Not open for further replies.

Similar Topics

Add New Comment

You need to be a member to leave a comment. Join thousands of tech enthusiasts and participate.
TechSpot Account You may also...