Styling dynamic content
Posted: Mon Oct 16, 2006 6:08 pm
I have a list of letters that, when clicked, generate html inside of a div w/id "show_category". So it looks like this...
The showLetter function just makes a list that was previously invisible appear inside the show_category div... it looks like this...
Now I attempt to style my ul:
Does nothing!
Does nothing!
Does nothing!
Does nothing!
WHY??
Code: Select all
<a href="#" onclick="showLetter('A', 'show_category'); new Effect.Appear('show_category');">A</a>
<a href="#" onclick="showLetter('B', 'show_category'); new Effect.Appear('show_category');">B</a>
<a href="#" onclick="showLetter('C', 'show_category'); new Effect.Appear('show_category');">C</a>
<a href="#" onclick="showLetter('D', 'show_category'); new Effect.Appear('show_category');">D</a>
<a href="#" onclick="showLetter('E', 'show_category'); new Effect.Appear('show_category');">E</a>
<div id="show_category"></div>Code: Select all
<ul id="category_G" class="category">
<li><a href="member/view/category/golf-courseshop">Golf Course/Shop</a></li>
<li><a href="member/view/category/government-officesagencies">Government Offices/Agencies</a></li>
<li><a href="member/view/category/graphic-design">Graphic Design</a></li>
<li><a href="member/view/category/groceries">Groceries</a></li>
</ul>Code: Select all
.category ul{
list-style-type: none;
margin: 20px;
}Code: Select all
#show_category ul{
list-style-type: none;
margin: 20px;
}Code: Select all
#categories ul{
list-style-type: none;
margin: 20px;
}Code: Select all
ul{
list-style-type: none;
margin: 20px;
}WHY??