Read with Formatting | Join TechSpot! (it's free) | Bookmark / Share this



Does any one trouble shoot css ul ol?

SOcRatEs
05-02-2006, 07:29 PM
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 (http://www.my-yardsale.com/4.html)
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!!


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

Samstoned
05-03-2006, 05:07 PM
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

Ad
05-03-2006, 05:07 PM

SOcRatEs
05-03-2006, 05:38 PM
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

/* 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;
}

RealBlackStuff
05-05-2006, 02:01 AM
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.

SOcRatEs
05-05-2006, 02:04 AM
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!!!

RealBlackStuff
05-07-2006, 01:52 AM
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.

 Top Technology News

 Software Downloads

Copyright © 1998-2008 TechSpot.com. TechSpot is a registered trademark. All Rights Reserved.