Grow your CSS skills. Land your dream job.

Anything Slider Browser Differences

  • # March 12, 2010 at 11:55 am

    The Anything Slider looks great in Firefox and Chrome for me but there are a couple little problems with it in IE (which 90% of my visitors use). Please see the below image to see. Can anyone tell me if there is a way to fix this in IE?

    (click the thumbnail for full size)
    [img]http://img.photobucket.com/albums/v13/CrystalPistol/tobedeletedlater/th_SLIDERISSUES.png[/img]

    Rob
    # March 12, 2010 at 1:05 pm

    if you could give us access to a live demo that would be awesome.

    But rounded corners aren’t supported by IE – unless you physically make them or use some kind of funky jQuery plugin.

    The gap could be any number of things – a live link would mean we could explore that…

    # March 12, 2010 at 3:07 pm

    Yes, sorry. http://www.dtpss.com/ It’s located directly on the homepage.
    And here’s how it’s called on the page.

    Code:
    • DTP-3225 Microcassette Portable Recorder
    • Transcription Equipment
    • Philips SpeechMike Air
    • Olympus DS-5000 Digital Recorder
    • Contact Us!
    • Dragon Naturally Speaking

    # March 12, 2010 at 3:28 pm

    The rounded corners just are what they are, IE doesn’t do rounded corners with CSS.

    The gap, if nothing else, can be solved by making an IE 8 conditional stylesheet and fixing whatever the problem is.
    http://css-tricks.com/how-to-create-an- … tylesheet/

    # March 12, 2010 at 4:21 pm

    Wonderful! Thank you very much. :)

    Could I slide in a different question? Do you have any idea what in the css could be adjusting my page tabs? My site is in Netsuite which has a custom tag for the tabs (<NLPAGETABS>)so I don’t know how the css is interfering but when I remove the slider css, the tabs go back to their proper position (center). The alignment problem is happening in Firefox, Chrome and Safari. It looks fine in IE.

    http://www.dtpss.com

    Here’s the code that calls my page tabs

    Code:



    # March 15, 2010 at 5:57 pm

    Just thought I’d bump this once to see if anyone has any suggestions to the above question. I’m afraid if I can’t get it straightened out, I’ll have to remove the anything slider from my site which I really don’t want to do.

    # March 17, 2010 at 5:50 am

    Chris’s css contains this:

    Code:
    * { margin: 0; padding: 0; }

    If you change it to look like this:

    Code:
    * { padding: 0; }

    it should fix your menu.

    Next time you create a site you should start your css off with some form of reset ( http://sixrevisions.com/css/css-tips/css-tip-1-resetting-your-styles-with-css-reset/ ). As you can see, Chris uses: * { margin: 0; padding: 0; } which is pretty simple and does the job.

    # March 17, 2010 at 9:39 am

    Thank you SO much!! :D I knew it’d be something simple, I just didn’t know which item. I assumed that anything with a 0 value wouldn’t have been it. Learned something new. :)
    Thank you also for the link to the article. It’s written very simply for beginners and it really made some things click for me. I can’t wait to read it further. YOU WIN! :D

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.

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