Question

I pretty much tried everything to center #accordion ul.

Any suggestions?

Code:

css:

.container {
    margin: 0 auto;
    overflow: hidden;
    width: 960px;
}

    #accordion {
        float: left;
        position: relative;
        width: 940px;
        height: 200px;
        overflow: hidden;
        margin: 25px 0px 0px;
    }

    #accordion ul {
        list-style: none;
        margin: 0px;
        display: block;
        height: 200px;
        width: 940px;

        }

    #accordion ul li {
        float: left;
    }

    #accordion ul li a {
        background:#FFFFFF none repeat scroll 0%;
        border-right: 2px solid #fff;
        cursor:pointer;
        display:block;
        overflow:hidden;
        width:78px;
        height: 200px;
    }

    #accordion ul li.landscapes a {
        background: url(../images/landscapes.jpg) repeat scroll 0%;
    }

    #accordion ul li.people a {
        background: url(../images/people.jpg) repeat scroll 0%;
    }

    #accordion ul li.nature a {
        background: url(../images/nature.jpg) repeat scroll 0%;
    }
    #accordion ul li.abstract a {
        background: url(../images/abstract.jpg) repeat scroll 0%;
    }

    #accordion ul li.urban a {
        background: url(../images/urban.jpg) repeat scroll 0%;
        min-width:310px;

    }

php:

<div id="intro">
    <div class="container">
        <div id="accordion">
            <ul>
                <?php // Create and run custom loop
                    $custom_posts = new WP_Query();
                    $custom_posts->query('post_type=page_content&page_sections=Slider (Front Page)');
                    while ($custom_posts->have_posts()) : $custom_posts->the_post();
                ?>
                <li class="landscapes"><?php the_content(); ?><></li>
                <?php endwhile; ?>
            </endwhileul>
        </div>
    </div><!-- .container -->
</div><!-- #intro -->

Reference Image:

Answer 1

What if you reduce the width of #accordion ul, either to auto, or just something much smaller? It looks like its set to 940, and its container is 960px. Also could you could try setting margin: 0 auto, on the ul after reducing its size, or text-align: center for #accordian.