Styling list in product description
Whatever combination of div id and class, I cannot seem to have any effect on the style of a list I create in a product description. What should the id and class of such a list be?
id="productDescription" class="productGeneral biggerText"?
id="productDescription"?
If it needs a class, what should in be in my .css file?
Experimentation has got me nowhere.
Re: Styling list in product description
If you have a list inside a container with an id, you only need that id to isolate the list (as long as other kinds of pages don't also have the same id for different purposes). Exactly what selectors are you using for your rule? Something like
#productDescription ul {}
or
#productDescription li {}
should work, depending on exactly what you are trying to do.
If you want to distinguish between lists inside one product description, or between different products' lists, you could add a class to that list, like
HTML Code:
text text text text
<ul class="doohickyList">
<li>text text </li>
<li>text </li>
<li>text text text </li>
</ul>
text text
Re: Styling list in product description
Thanks for your reply Glen,
I just got back to this, happy with your clarification. But I still can't do anything to have an effect on the list appearance. Here is my list:
<ul id="productDescription">
<li>Washed buffalo skin upper</li>
<li>Leather sole/injected rubber</li>
<li>Stacked leather heel</li>
<li>Full calf leather lining</li>
<li><a href="http://www.124shoes.com.au/collection/index.php?main_page=construction">Rapid blake construction</a></li>
<li>Made in Italy</li>
<ul>
And the CSS:
#productDescription ul {
margin-left:5.0em;
padding-left:0.2em;
margin-bottom:1em;
}
#productDescription li {
padding-left: 1.08em;
list-style: none !important;
}
And the appearance:
http://www.1 2 4 s h o e s.com.au/collection/160876/product.php?cPath=2_13&product_type=1&pID=60&action=new_product
Re: Styling list in product description
The whole product description already has an id of #productDescription, and giving the <ul> the same id might cause problems with styling. You can give your <ul> any class or id you want that is not already used on the page.
#productDescription ul {} means a ul that is inside the #productDescription element; a list named #productDescription as you showed would be identified in the stylesheet as ul#productDescription {}. But don't do this, because it is invalid CSS to have two elements with the same id on the same page. #productDescription is already taken, so you need to use something else.
Re: Styling list in product description
I have tried the following css:
#infoProduct ul {
margin-left:5.0em;
padding-left:0.2em;
margin-bottom:1em;
background-color: #eee;
}
and then
.infoList li {
padding-left: 1.08em;
list-style: none !important;
color:#ff0000;
making the appropriate changes to the text each time, and get absolutely no effect. Not even with list-style. What on earth am I missing here?
Re: Styling list in product description
I can't tell you that without knowing exactly what class or id tags you have given to which elements. If you named the <ul> with id="infoProduct", then the rule you give ( #infoProduct ul { ...} ) could never apply to anything because it says "the list INSIDE #infoProduct", not "the list named #infoProduct".
If you named the <ul> with class="infoList", then a rule like
.infoList li {}
should apply to list items inside that list.
I have to go now, but when I get time will look at the address you gave and see what I can see about your situation.
Re: Styling list in product description
Thanks Glenn,
I've spent hours trying to sort this, and I appreciate your efforts. I just looked through Chrome web developer to see that my css elements are not appearing.
Re: Styling list in product description
You have an error in your stylesheet in the product listing section, and this causes CSS to ignore the entire rest of the stylesheet (including your #infoProduct rules).
Code:
/*bof product listing*/
.listingDescription {text-align:left;color:#eee;display:none;}
#productListing {background-color:#212121;width:687px;
/*-moz-opacity: 0.90;opacity: 0.90;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha"(Opacity=90);}*/
.productListing-even {border:1px solid #ccc;}
The */ closing the comment is outside the } and is the cause of your problems. Move it to before the }.
Re: Styling list in product description
Just got back to this. Can't thank you enough Glenn. Couldn't see that for looking.