Trouble getting alignment working

HTML & CSS
1

I set up this AnythingSlider:
http://css-tricks.com/examples/AnythingSlider/

On my homepage:
http://jimpix.co.uk/

In order for the AnythingSlider to work, I need this in my CSS file:
http://jimpix.co.uk/css1/fresh.css

* { margin: 0; padding: 0; }

However, that has messed up the way my tables and <li> elements display.

So I commented that out, which fixes the rest of the site, but knocks the alignment of the slider out so that the slides are pushed too far to the right.

I wondered if there is any way around having that * bit apply only to the AnythingSlider.

The slider appears in this DIV:

<div id="sliderWrapper">

I tried editing the slider CSS by adding in these bits::

#sliderWrapper img                      { border:0px; margin:0px; }
.anythingSlider img                     { border:0px; margin:0px; }

Anyway, I seem to be way out of my depth, but wondered if anyone might be able to advise how to fix the Slider without having to put the * bit back at the top of the css file.

Any advice much appreciated.

Thanks!

2

I lied :). THe problem is that on the sliders <ul> you don’t have padding set to 0, so thus it has an extra 16px pushing it to the right. Set the padding to 0 for this element

.anythingSlider .wrapper ul {padding:0;}
3

Hi, could you give me a pge without either fixes? I can’t override your *{margin:0;padding:0;} rule in your first page and as a result I can’t get to the problem/get a fix :wink:

4

Glad it worked :). You’re welcome.

5

Hi Ryan - your geniosity knows no bounds.
Thanks for helping me out again :slight_smile:

6

Thanks for your reply and suggestion.

I have made that change on a test page:
http://jimpix.co.uk/default2.asp

Unfortunately, that doesn’t seem to have done the trick :frowning:

It’s a shame, because I really like the slider widget, but I can’t work out how to resolve this one.

Thanks again

7

That universal reset is filled with problems - it’s likely also boning your form elements like INPUT and TEXTAREA - which is why it shouldn’t be used on deployment code.

If just the contents of that slider element need it, just target the contents of that slider.


#slideWrapper * { margin: 0; padding: 0; }

Now only tags inside #slideWrapper will have that applied to it - the rest of your document will not.