Results 1 to 9 of 9
  1. #1
    Join Date
    Mar 2006
    Location
    Melbourne, Australia
    Posts
    308
    Plugin Contributions
    0

    Default 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.

  2. #2
    Join Date
    Jul 2005
    Location
    Upstate NY
    Posts
    21,828
    Plugin Contributions
    25

    Default 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

  3. #3
    Join Date
    Mar 2006
    Location
    Melbourne, Australia
    Posts
    308
    Plugin Contributions
    0

    Default 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

  4. #4
    Join Date
    Jul 2005
    Location
    Upstate NY
    Posts
    21,828
    Plugin Contributions
    25

    Default 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.

  5. #5
    Join Date
    Mar 2006
    Location
    Melbourne, Australia
    Posts
    308
    Plugin Contributions
    0

    Default 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?

  6. #6
    Join Date
    Jul 2005
    Location
    Upstate NY
    Posts
    21,828
    Plugin Contributions
    25

    Default 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.

  7. #7
    Join Date
    Mar 2006
    Location
    Melbourne, Australia
    Posts
    308
    Plugin Contributions
    0

    Default 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.

  8. #8
    Join Date
    Jul 2005
    Location
    Upstate NY
    Posts
    21,828
    Plugin Contributions
    25

    Default 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 }.

  9. #9
    Join Date
    Mar 2006
    Location
    Melbourne, Australia
    Posts
    308
    Plugin Contributions
    0

    Default Re: Styling list in product description

    Just got back to this. Can't thank you enough Glenn. Couldn't see that for looking.

 

 

Similar Threads

  1. Product list html unique description
    By store.lakewood in forum Templates, Stylesheets, Page Layout
    Replies: 6
    Last Post: 10 Aug 2011, 03:44 AM
  2. Product List Styling
    By coxdabd in forum Templates, Stylesheets, Page Layout
    Replies: 3
    Last Post: 8 Nov 2010, 09:46 AM
  3. Removing product description from product list
    By amaroczek in forum Templates, Stylesheets, Page Layout
    Replies: 2
    Last Post: 8 Dec 2008, 11:42 PM
  4. Add Product List to Product Description Page
    By haasPlay in forum Templates, Stylesheets, Page Layout
    Replies: 0
    Last Post: 28 Apr 2007, 05:20 AM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •