Does any one trouble shoot css ul ol?

Status
Not open for further replies.

SOcRatEs

Posts: 912   +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
 
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
 
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;
 }
 
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.
 
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!!!
 
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.
 
Status
Not open for further replies.
Back