SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Evangelist
    Join Date
    Dec 2004
    Posts
    419
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Trouble getting alignment working

    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

    Code 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:

    Code HTML4Strict:
    <div id="sliderWrapper">

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

    Code CSS:
    #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. #2
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    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.

    Code:
    #slideWrapper * { margin: 0; padding: 0; }
    Now only tags inside #slideWrapper will have that applied to it - the rest of your document will not.

  3. #3
    SitePoint Evangelist
    Join Date
    Dec 2004
    Posts
    419
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

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

    Thanks again

  4. #4
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,622
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    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
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  5. #5
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,622
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    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
    Code:
    .anythingSlider .wrapper ul {padding:0;}
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  6. #6
    SitePoint Evangelist
    Join Date
    Dec 2004
    Posts
    419
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Ryan - your geniosity knows no bounds.
    Thanks for helping me out again

  7. #7
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,622
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Glad it worked . You're welcome.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com


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
  •