Grow your CSS skills. Land your dream job.

[Solved] Problems with ULs inside an AnythingSlider

  • # December 4, 2009 at 4:48 pm

    I give up.

    I am trying to spice up a little my web site (http://momsoftco.com) using the excellent AnythingSlider from this very site. The result is much better that the slider I am currently using, but I have a problem thatI don’t know how to solve. The slides inside the Anything slider contain two ULs and their styling is getting broken.

    I have prepared a testing page that shows the result inside AnythingSlider at the top and what the first slide should look like below (the rest are very similar).

    http://momsoftco.com/testing/

    Any help will be appreciated. Thanks in advance,

    – Manuel

    # December 4, 2009 at 5:39 pm

    Looks like you’ve just got an extra margin between the buttons. Change the margin on your ul element:

    Code:
    ul.product_info_btns li, .product_box ul.product_btns li {
    display:inline;
    float:left;
    font-size:1.8em;
    line-height:35px;
    list-style-image:none;
    list-style-position:outside;
    list-style-type:none;
    margin:0; /* < ---- this */
    padding:0;
    }
# December 4, 2009 at 6:32 pm

Jared,

Thank you very much for your answer. I am sorry but I don’t understand your suggestion. The definition of the buttons is:

Code:
ul.product_btns li {
margin:0 5px 0 0;
padding:0;
float:left;
list-style:none;
display:inline;
font-size:18px;
line-height:35px;
}

I think I need the 5px margin-right to separate the buttons. The problem is that this style is being replaced by the style defined in the AnythingSlider package and I don’t know how to prevent that.

# December 4, 2009 at 7:54 pm

What it seems to be is the your UL doesn’t have a specified width. You could specify the width:

Code:
.product_box ul.product_btns {
margin:0;
width:450px;
}

Or your could remove the margin. The the width of the button + margin is pushing your buttons over to a new row and by removing the margin it would look like your template version.

# December 5, 2009 at 6:14 am

Thank you very much for your interest. I think I have solved it!!

I have replaced the definition of my styles to be more specific so that the styles from AnythingSlider are not used.

I used to have:

Code:
.product_details li { … }
.product_btns li { … }

And I have replaced them with:

Code:
div.productbox_blue ul.product_details li,
div.productbox_green ul.product_details li { … }
div.productbox_blue ul.product_btns li,
div.productbox_green ul.product_btns li { … }
Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".