IE7 margin auto not functioning correctly

Go To StackoverFlow.com

0

I know this question is asked a lot but I've already looked through pretty much everything with no good result, yet.

Basically my wrapper has a margin: 40px auto; to it. It's centered nicely in every browser I've tried except for IE7. For some reason it only centers the navigation menu and then it's like the wrapper auto-closes itself making everything else float to the left. Which is hideous.

HTML CODE

            <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

        <head>

            <title>Demo</title>
            <meta http-equiv="content-type" content="text/html; charset=utf-8" />
            <link rel="StyleSheet" href="ext/styles/default.css" type="text/css" />
            <link href="ext/styles/jflow.style.css" type="text/css" rel="stylesheet"/>
            <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
            <script src="ext/js/jflow.plus.js" type="text/javascript"></script>

            <script type="text/javascript">
                $(document).ready(function(){
                    $("#myController").jFlow({
                        controller: ".jFlowControl", // must be class, use . sign               
                        slideWrapper : "#jFlowSlider", // must be id, use # sign                    
                        slides: "#mySlides",  // the div where all your sliding divs are nested in                  
                        selectedWrapper: "jFlowSelected",  // just pure text, no sign                   
                        effect: "flow", //this is the slide effect (rewind or flow)                 
                        width: "783px",  // this is the width for the content-slider                    
                        height: "331px",  // this is the height for the content-slider                  
                        duration: 400,  // time in milliseconds to transition one slide                 
                        pause: 5000, //time between transitions                 
                        prev: ".jFlowPrev", // must be class, use . sign                    
                        next: ".jFlowNext", // must be class, use . sign                
                        auto: false                 
                    });
                });
            </script>

        </head>

        <body>

            <noscript>
                    <h1 style="float: left; color: red; margin-bottom: 5000px;">JavaScript behövs för att korrekt visa denna sida</h1>
            </noscript>

            <div id="wrapper">

                <div id="nav">
                    <div class="menu">
                        <ul>
                            <li class="start"><!-- /!/ --></li>
                            <div class="minus-left">
                                <li class="norm"><a class="active" href="#">hem</a></li>
                                <li class="norm"><a href="portfolio.html">portfolio</a></li>
                                <li class="norm"><a href="om.html">om</a></li>
                                <li class="norm"><a href="kontakt.html">kontakta</a></li>
                            </div>
                            <li class="end"><!-- /!/ --></li>
                        </ul>
                    </div>
                </div>

                <div id="rotator">
                    <div id="shadow"><img src="ext/imgs/img_shadow.png" alt="Shadow" /></div>

                    <div id="controller">
                        <div class="prev">
                            <img src="ext/imgs/left_arrow.png" class="jFlowPrev" alt="Left Arrow" />
                        </div>

                        <div class="next">
                            <img src="ext/imgs/right_arrow.png" class="jFlowNext" alt="Right Arrow" />
                        </div>
                    </div>

                    <div id="mySlides">
                        <div id="slide1" class="slide"> <img src="ext/slides/slide_1.png" alt="Slide 1 jFlow Plus" />
                            <div class="slideContent">
                                <h3>Bespoke Booklet...</h3>
                                <p>... for Offsite Design Studio to showcase their services.</p>
                            </div>
                        </div>
                        <div id="slide2" class="slide"> <img src="ext/slides/slide_2.png" alt="Slide 2 jFlow Plus" />
                            <div class="slideContent">
                                <h3>Aggregate</h3>
                                <p>Professional high-quality Wordpress theme from ElegantThemes.</p>
                            </div>
                        </div>
                        <div id="slide3" class="slide"> <img src="ext/slides/slide_3.png" alt="Slide 3 jFlow Plus" />
                            <div class="slideContent">
                                <h3>Deep Focus</h3>
                                <p>Professional high-quality Wordpress theme from ElegantThemes.</p>
                            </div>
                        </div>
                    </div>

                    <div id="myController"> 
                        <span class="jFlowControl"></span> 
                        <span class="jFlowControl"></span> 
                        <span class="jFlowControl"></span> 
                    </div>
                </div>

                <div class="content_sep_top" style="margin-top: 70px; margin-bottom: 15px;"></div>

                <div class="single_page line_height_15">
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ac ante nisi, sed laoreet dui. Sed imperdiet euismod scelerisque. Quisque id massa a nunc convallis congue. Sed venenatis cursus rhoncus. Nam a purus in elit vehicula faucibus. Integer ornare elementum magna sed mattis. Duis dui velit, semper ac dignissim aliquet, eleifend sit amet augue. Donec at arcu quis ipsum volutpat rhoncus. Cras orci orci, congue at tincidunt ut, imperdiet at lorem. Duis ultricies diam a elit vulputate auctor. Nam congue leo et neque imperdiet elementum. Vestibulum vulputate, ante at consectetur eleifend, diam enim vulputate odio, sit amet facilisis neque nibh sed nisl.
                    </p>
                </div>

                <div class="content_sep_top" style="margin-top: 15px;"></div>

            </div>
        </body>
    </html>

CSS CODE.

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

    body {
        font-family: helvetica, arial, verdana, sans-serif;
        font-size: 13px;
        font-style: normal;
        font-variant: normal;
        font-weight: normal;
        line-height: 18px;
        background-image: url(../imgs/bg.png);
        background-repeat: repeat-y;
        background-color: #D7D7D7;
        background-position: center;
        text-align: center;
        color: #616161;
        width: 100%;
    }

    #wrapper {
        width: 801px;
        margin: 40px auto;
        text-align: left;
    }

    #nav {
        float: left;
        width: 801px;
        position: relative;
        height: 60px;
    }

    .menu {
        position: absolute;
        left: 50%;
        margin-left: -395px;
        background-image: url(../imgs/middle_nav.png);
        background-repeat: repeat-x;
        width: 791px;
    }

    .menu ul {
        list-style-type: none;
    }

    .menu li {
        float: left;
    }

    .menu li.start {
        background-image: url(../imgs/left_nav.png);
        float: left;
        background-repeat: no-repeat;
        height: 60px;
        width: 9px;
        margin-left: -9px;
    }

    .menu li.norm {
        background-image: url(../imgs/nav_sep.png);
        background-repeat: no-repeat;
        background-position: right;
        padding: 17px;
        text-transform: capitalize;
    }

    .menu li.norm a {
        color: #B2B2B2;
        text-decoration: none;
        font-size: 14px;
    }

    .menu li.norm a:hover {
        color: #747474;
    }

    .menu li a.active {
        color: #747474;
    }

    .menu li.end {
        background-image: url(../imgs/right_nav.png);
        float: right;
        background-repeat: no-repeat;
        height: 60px;
        width: 10px;
        margin-right: -10px;
    }

    #rotator {
        margin-top: 40px;
        float: left;
        background-color: white;
        width: 781px;
        height: 329px;
        padding: 10px 10px 10px 10px;
        position: relative;
    }

    #shadow {
        position: absolute;
        float: left;
        width: 801px;
        height: 379px;
        margin-left: -13px;
        margin-top: 0px;
        z-index: -1;
    }

    #controller {
        float: left;
        position: absolute;
        left: 50%;
        margin-left: -86px;
        margin-top: -18px;
        background-image: url(../imgs/controller.png);
        width: 172px;
        height: 54px;
        z-index: 2;
    }

    #mySlides {
        width: 781px;
        height: 329px;
    }

    #slide1, #slide2, #slide3 {
        width: 781px;
        height: 329px;
        border: 1px solid #c6c6c6;
    }

    .prev {
        float: left;
        margin-top: 16px;
        margin-left: 26px;
    }

    .next{
        float: right;
        margin-top: 16px;
        margin-right: 26px;
    }

    .next img,
    .prev img {
        border: 0px;
        outline: 0px;
        cursor: pointer;
    }

    ul, li {
        list-style-type: none;
    }

    .content_sep {
        background-image: url(../imgs/content_sep.png);
        background-repeat: repeat-x;
        width: 801px;
        height: 2px;
        float: left;
    }

    .content_sep_top {
        background-image: url(../imgs/content_sep.png);
        background-repeat: repeat-x;
        width: 801px;
        height: 2px;
        float: left;
    }

    .container {
        margin-top: 40px;
        float: left;
    }

    .left {
        width: 532px;
        float: left;
    }

    .left p {
        width: 500px;
    }

    .left ul {
        padding-left: 10px;
    }

    .img {
        width: 502px;
        height: 402px;
        padding: 10px;
        background-color: white;
        position: relative;
    }

    .left  .img img {
        border: 1px solid #c6c6c6;
    }

    .right {
        width: 265px;
        float: right;
        text-align: right;
    }

    .right li {
        float: left;
        margin-left: 10px;
        margin-bottom: 10px;
        width: 102px;
        height: 102px;
        padding: 10px;
        background-color: white;
    }

    .right li img {
        border: 1px solid #c6c6c6;
    }

    .info {
        width: 500px;
    }

    ul.side {
        padding: 0px;
        margin: 0px;
    }

    ul.head {
        margin-top: 30px;
    }

    .side {
        float: right;
        width: 350px;
    }

    .img_overlay {
        background: url("../imgs/contentBg.png") repeat scroll 0 0 transparent; 
        position: absolute; 
        padding: 10px; 
        width: 462px;
        left: 20px;
        bottom: 20px;
    }

    .img_overlay p {
        font-family: Georgia, serif; 
        color: #FFF;  
        margin: 0;
    }

    .single_page {
        width: 771px;
        padding-left: 15px;
        padding-right: 15px;
        float: left;
    }

    .left h1,
    .single_page h1 {
        text-align: center;
        font-family: Georgia, serif;
        color: #bababa;
        font-size: 28px;
        font-style: italic;
    }

    .line_height_15 {
        line-height: 15px;
    }

    .img h3 {
        font-family: Georgia, serif; 
        color: #FFF; 
        font-size: 28px; 
        font-style: italic; 
        margin: 5px 0 5px 0;
    }

    .left_top {
        margin-top: 40px;
        float: left;
        margin-left: 10px;
    }

    .padding_left_10 {
        padding-left: 10px;
    }

    .fields {
        outline: 0px;
        padding: 3px;
        width: 50%;
    }

    .width_70 {
        width: 70%;
        height: 150px;
    }

    .submit{
        float: right;
        margin-right: 140px;
        padding: 3px;
    }

    .minus-left {
        margin-left: -4px;
        float: left;
    }

I would LOVE any help I can get. As I said above, when I view the source in IE7 it looks like the wrapper closes itself right after the navigation but I don't see how.

I am really desperate right now and also please don't comment on how messy/repetitive the code is unless it would actually help solve the problem. The code is just a draft right now, I don't mean to sound rude.

Thanks in advance!

2012-04-03 23:39
by Ecaz


0

one small things you change the #rotator remove the float:left; the technique is follows The star symbol why i am using it apply only ie-7 . try do this... #rotator { *float:none; } .single_page { *float:none; text-alignL:left; } The star symbol why i am using it apply only ie-7 . try do this...

2012-04-24 14:03
by ram
Ads