[Solved] Problems with ULs inside an AnythingSlider

[momsoft]

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

[JaredAM]

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

[momsoft]

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.

[JaredAM]

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.

[momsoft]

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 { … }

[Author]

Posts