CODEWITHSUNDEEP
jqueryjquery-pluginsjquery-ui-accordionhorizontal-accordion
Arief
Arief

Reputation: 139

jQuery Lite Accordion Image Positioning

I am looking at jQuery LiteAccordion V2. I use everything as default set up as they can be downloaded from: https://github.com/nikki/liteAccordion, as well as the images. I am kind of learning for this plug in.

However, I have encountered a problem where the image is not sitting at the right place. Please take a look at below screen shot:

enter image description here

I am using Firefox. So with the element inspector, you can see that the image is going a little bit to the bottom and to the right. I do not change all settings. They are still the same. I have followed guide provided in the website.

I did try to look at css file, I could not find one that control the image position.

Please, any thoughts would be very helpful for me.

Thank you so much in advance for help.

Edit - Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Lite Accordion Test Lab</title>

        <link href="css/liteaccordion.css" rel="stylesheet" type="text/css" />

        <script src="js/jquery-1.7.1.min.js" type="text/javascript"></script>
        <script src="js/liteaccordion.jquery.js" type="text/javascript"></script>
        <script src="js/my_jquery.js" type="text/javascript"></script>  

    </head>

    <body>

        <div id="lite_accordion">
            <ol>
                <li>
                    <h2><span>Slide One</span></h2>
                    <div>
                        <figure>
                            <img src="images/1.jpg" />
                            <figcaption>Slide 1</figcaption>
                        </figure>
                    </div>
                </li>
                <li>
                    <h2><span>Slide Two</span></h2>
                    <div>
                        <figure>
                            <img src="images/2.jpg" />
                            <figcaption>Slide 2</figcaption>
                        </figure>
                    </div>
                </li>
            </ol>
            <noscript>
                <p>Please enable JavaScript to get the full experience.</p>
            </noscript>
        </div>
    </body>
</html>

The css can be found here: https://github.com/nikki/liteAccordion/blob/master/css/liteaccordion.css

I don't change the css code, it's still the same as it is.

You can check the sample at: http://jsfiddle.net/aJhYk/1/

Upvotes: 0

Views: 1825

Answers (1)

nikki
nikki

Reputation: 306

You haven't compensated for the <figure>'s default margin. Easiest thing to do would be to remove the <figure> element.

Upvotes: 0

Related Questions