JQuery UI CSS style sheet not working

Question

Regardless of what I do, the CSS style sheet will not work. I've been trying for days with no luck. Even when I download a demo, some of the style does not work. See here:

https://i.sstatic.net/oXdqd.png (tested in Chrome and Firefox)

So, I made this test code using Google's CDN in hopes that someone else can see what I'm doing wrong.

<html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
    <meta http-equiv="content-type" content="text-html; charset=utf-8" />
    <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/themes/sunny/jquery-ui.css" type="text/css" />
    <title>JQuery UI Test</title>
</head>
<body>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js" type="text/javascript"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js" type="text/javascript"></script>
<script type="text/javascript">
</script>

    <!-- Accordion -->
    <h2 class="demoHeaders">Accordion</h2>
    <div id="accordion">
        <div>
            <h3><a href="#">First</a></h3>
            <div>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</div>
        </div>
        <div>
            <h3><a href="#">Second</a></h3>
            <div>Phasellus mattis tincidunt nibh.</div>
        </div>
        <div>
            <h3><a href="#">Third</a></h3>
            <div>Nam dui erat, auctor a, dignissim quis.</div>
        </div>
    </div>

    <!-- Button -->
    <h2 class="demoHeaders">Button</h2>
    <button id="button">A button element</button>
    <form style="margin-top: 1em;">
        <div id="radioset">
            <input type="radio" id="radio1" name="radio" /><label for="radio1">Choice 1</label>
            <input type="radio" id="radio2" name="radio" checked="checked" /><label for="radio2">Choice 2</label>
            <input type="radio" id="radio3" name="radio" /><label for="radio3">Choice 3</label>
        </div>
    </form>


</body>
</html>

This is what I get from the above code: https://i.sstatic.net/YiHQD.png

I would think this should be straightforward, but I must be doing something wrong. Thank you very much in advance!

what result are you expecting? The buttons in both images look the same to me. Are you expecting it to look different somehow? — MrOBrian
– MrOBrian, Commented Sep 5, 2012 at 0:01

PiTheNumber · Accepted Answer · 2015-04-24 08:43:54Z

4

To create any jQuery UI elements, you have to write a javascript code to create them.

Something like this:

<script type="text/javascript">
    $(function() {
        $("#accordion").accordion();
        $("#button").button();
    });
</script>

Take a look at jQuery UI's documentation for more information: http://jqueryui.com/demos/

edited Apr 24, 2015 at 8:43

PiTheNumber

23.7k17 gold badges114 silver badges191 bronze badges

answered Sep 5, 2012 at 0:06

Vic

9,0817 gold badges48 silver badges56 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user353885 Over a year ago

Not sure why I couldn't find this in the JQuery documentation - thanks for the simple answer. The CSS is still not appearing properly, but at least some of the style is showing now.

Nal Over a year ago

You do not need the "http:" in the src. see this

Collectives™ on Stack Overflow

JQuery UI CSS style sheet not working

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related