92 users online (0 members and 92 guests)  




  Results 1 to 4 of 4
Digg button stumble

Related

  1. Replies: 2
  2. Ie mysterious margin around my box...    Forum: CSS Forum
    Replies: 1
  3. Margin?    Forum: CSS Forum
    Replies: 4
  1. #1
    althegud1srtaken's Avatar
    New User

    Status
    Offline
    Join Date
    Jun 2007
    Posts
    8

    margin:0 auto; centers divs in all but IE

    ie doesn't seem to respond to the 'auto' setting the same way as firefox/safari etc do, and my divs go to the left. any ideas? i've looked at other sites that seem to be doing it the same way that work in ie. here's the code incase you need it, thanks.
    Code:
    /*-- CSS file for online@vcu homepage, created 06/2007 by eric halverson.  halversonea at vcu.edu --*/
    
    
    
    
    
    /*--background for entire site, spans vertically--*/
    
    body {
    
        background: #999 url("./images/body-bg2.gif") 50% 0 repeat-y;
    
        margin:0 auto;
    
    }
    
    
    
    /*--banner across top of page, spans horizontally--*/
    
    #header {
    
        text-align:center;
    
        position:relative;
    
        width:100%;
    
        height:104px;
    
        background:#ffffff url("./images/header-bg.gif") repeat-x top left;
    
        padding:0;
    
        margin:0 auto;
    
    }
    
    
    
    /*--menu portion of banner across top of page, spans horizontally--*/
    
    #menu {
    
        text-align:center;
    
        margin:0 auto;
    
        width:100%;
    
        border-top:3px solid #ffffff;
    
        border-bottom:3px solid #ffffff;
    
        height:37px;
    
        line-height:37px;
    
        background:#ffcc00 url("./images/menu-bg.gif") repeat-x top left;
    
    }
    
    
    
    #menu a {
    
        font-size:17px;
    
        padding:3px;
    
        text-decoration:none;
    
        color:#000000;
    
    }
    
    
    
    #menu a:hover {
    
        background:#000000;
    
        color:#ffcc00;
    
    }
    
    
    
    /*-------------------------------------------------------------------------------------------------
    
    set up the body of the page.  left is grey left panel, main holds the primary content of the page,
    
    and specials is the light grey panel to the right with specials on it, unique to this page (note
    
    other css file for other pages), and right is the grey panel to the right.
    
    -------------------------------------------------------------------------------------------------*/
    
    
    
    #container {
    
        /*clear:both;/*trying this*/
    
        /*position:relative;/*trying this*/
        /*display:inline;/*trying this*/
        /*padding:0;/*trying this*/
    
        margin:0 auto;/*this line here is the problem, ie doesn't like x auto*/
    
        width:890px;
    
        text-align:left;
    
        font-size:12px;
    
    }
    
    
    
        #left {
    
            width:62px;
    
            float:left;
    
            background-color: #999999;
    
        }
    
    
    
        #main {
    
            width:585px;
    
            float:left;
    
            border-left:3px solid #ffffff;
    
            padding:0;
    
            margin:0 auto;
    
            position:relative;
    
        }
    
    
    
        #specials {
    
            width:175px;
    
            float:left;
    
            background-color: #d2d2d2;
    
            border-right:3px solid #ffffff;
    
        }
    
        
    
        #right {
    
            width:62px;
    
            float:left;
    
            background-color: #999999;
    
        }
    
        
    
    #footer {
    
        clear:both;
    
        margin-left:63px;
    
        position:relative;
    
        width:760px;
    
        font-size:11px;
    
        vertical-align:bottom;
    
        bottom:0;
    
    }
    
    
    
    p.footer {font-size:11px;}
    
    p.body_c {font-size:12px;text-align:center;}
    
    p.body {font-size:12px;}
    
    p.big {font-size:15px;}
    Code:
    <!-- index.html file for online@vcu homepage, created 06/2007 by eric halverson.  halversonea at vcu.edu -->
    
    
    
    <html>
    
    <head>
    
        <link rel="stylesheet" type="text/css" href="index.css" />
    
        <title>Online@VCU</title>
    
    </head>
    
    
    
    <body>
    
        <!-- this section has the header with all the logos that link to other pages -->
    
        <div id="header">
            <center>
    
                <table id="Table_01" width="800" height="104" border="0" cellpadding="0" cellspacing="0">
    
                    <tr>
    
                        <td>
    
                            <a href="http://www.vcu.edu/">
    
                                <img src="images/top-logo_01.gif" width="705" height="50" border="0" alt=""></a></td>
    
                        <td>
    
                            <img src="images/top-logo_02.gif" width="8" height="50" alt=""></td>
    
                        <td>
    
                            <a href="http://www.bsv.vcu.edu/retailstr/">
    
                                <img src="images/top-logo_03.gif" width="87" height="50" border="0" alt=""></a></td>
    
                    </tr>
    
                    <tr>
    
                        <td colspan="3">
    
                            <a href="http://www.bsv.vcu.edu/online%40vcu/">
    
                                <img src="images/top-logo_04.gif" width="800" height="54" border="0" alt=""></a></td>
    
                    </tr>
    
                </table>
            </center>
    
        </div>
    
        
    
        <!-- menu section, will automatically scale with more/less buttons -->
    
        <div id="menu">
    
            <a href="./hardware.html">Hardware</a> |
    
            <a href="./software.html">Software</a> |
    
            <a href="./internet.html">Internet Service</a> |
    
            <a href="./repairs.html">Repairs & Upgrades</a> |
    
            <a href="./g2g.html">G2G</a> |
    
            <a href="./general.html">General Information</a> |
    
            <a href="./faq.html">FAQ</a> |
    
            <a href="./contact.html">Contact Us</a>
    
        </div>
    
    
    
        <div id="container">
    
            <div id="left">
    
                <p>
    
                    left text
    
                </p>
    
            </div>
    
    
    
            <!-- put all main page content in this section -->
    
            <div id="main">
    
                <table align=center cellpadding=15>
    
                    <tr>
    
                        <td>
    
                            <img src="./images/onlinepic.jpg">
    
                        </td>
    
                        <td>
    
                            <p class="body_c">
    
                            Located on the Monroe Park Campus:
    
                            <br>
    
                            University Student Commons Building
    
                            <br>
    
                            1st Floor across from the Food Court
    
                            <br>
    
                            907 Floyd Avenue, Box 843012
    
                            <br>
    
                            Richmond, VA 23284-3012
    
                            <br>
    
                            <br>
    
                            Phone: (804)828-7295
    
                            <br>
    
                            Fax: (804)828-8231
    
                            <br>
    
                            Email: <a href="mailto:Online@VCU">Online@VCU</a>
    
                            </p>
    
                        </td>
    
                    </tr>
    
                </table>
    
                <center>
    
                <br>
    
                <br>
    
                ACADEMIC DISCOUNTS ON HARDWARE, SOFTWARE, INTERNET SERVICE, AND REPAIRS
    
                <br>
    
                FREE DELIVERIES TO CAMPUS MAILBOXES
    
                <br>
    
                <br>
    
                <br>
    
                OWNED AND OPERATED BY VIRGINIA COMMONWEALTH UNIVERSITY
    
                <br>
    
                A PORTION OF EVERY SALE GOES TO SUPPORT UNIVERSITY PROGRAMS
    
                </center>
    
            </div>
    
    
    
            <!-- put links to images on specials here, must be no more than 175px by x, be sure to put them inside the center tags -->
    
            <div id="specials">
    
                <p>
    
                    <center>
    
                        Specials
    
                    </center>
    
                </p>
    
            </div>
    
    
    
            <div id="right">
    
                <p>
    
                    right text
    
                </p>
    
            </div>
    
    
    
            <div id="footer">
    
                <br>
    
                <table width="760" border="0" cellspacing="0" cellpadding="0">
    
                    <tr>
    
                        <td height="10" colspan="2" valign="top">
    
                            <img src="./images/borders.jpg" width="760" height="2" alt="">
    
                        </td>
    
                    </tr>
    
                    <tr>
    
                        <td width="482">
    
                            
    
                            <p class="footer">
    
                                <a href="http://www.vcu.edu" target="_blank">Virginia Commonwealth University</a> |
    
                                <a href="http://www.bsv.vcu.edu" target="_blank">Department of Business Services</a> |
    
                                <a href="http://www.bsv.vcu.edu/online@vcu">Online@VCU</a>
    
                                <br>
    
                                <a href="mailto:bllawson@vcu.edu">Contact Department Webmaster</a><br>
    
                                Date Last Modified: 
    
                                <!-- #BeginDate format:Am1 -->June, 2007<!-- #EndDate -->
    
                            </p>
    
                        </td>
    
                        <td width="238" align="right" valign="top" class="footer">
    
                            <p class="footer">
    
                                Business Services
    
                                <br>
    
                                1111 W. Broad Street
    
                                <br>
    
                                Richmond, Virginia 23298-0208
    
                                <br>
    
                                Phone: (804)828-3894<br>
    
                            </p>
    
                        </td>
    
                      </tr>
    
                </table>
    
            </div>
    
        </div>
    
    </body>
    
    </html>



  2. #2
    coothead's Avatar
    bald headed old fart

    Status
    Offline
    Join Date
    Aug 2003
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    702

    Re: margin:0 auto; centers divs in all but IE

    Hi there althegud1srtaken,
    margin:0 auto; centers divs in all but IE
    The reason for this is that IE does not recognize margin:auto when in Quirks Mode.

    If you get into the habit of using a valid dtd IE will behave correctly.

    Here is a basic example for you to try...
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    
    <style type="text/css">
    #lorem {
        width:30em;
        border:0.35em double #999;
        padding:1em;
        margin:auto;
     }
    #lorem p {
        margin:0;
        font-family:verdana,aial,helvetica,sans-serif;
        font-size:1em;
        text-align:justify;
     }
    </style>
    
    <script type="text/javascript">
    
    </script>
    
    </head>
    <body>
    
    <div id="lorem">
    <p>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin massa. Nam vehicula. 
    Morbi velit nisi, mollis id, ultrices luctus, adipiscing sit amet, lectus. Nunc rhoncus 
    nisl ac enim. Maecenas vestibulum dolor ut velit. Maecenas condimentum pulvinar purus. 
    Pellentesque ac ipsum. Curabitur sodales, elit vel molestie hendrerit, elit odio rhoncus tellus, 
    nec gravida enim urna id velit. Donec nec tellus. Vestibulum nulla. Curabitur enim arcu, 
    ornare id, placerat eget, nonummy vitae, mauris. Nulla rutrum semper odio. Duis vulputate 
    ornare mauris. Praesent eget nibh sed ante ultricies scelerisque. Duis eget felis ut arcu porta 
    bibendum. Mauris rutrum. Vivamus consectetuer purus sit amet mi. Suspendisse eu augue.
    </p>
    </div>
    
    </body>
    </html>
    

  3. #3
    althegud1srtaken's Avatar
    New User

    Status
    Offline
    Join Date
    Jun 2007
    Posts
    8

    Re: margin:0 auto; centers divs in all but IE

    i tried setting various doctypes and it still didn't center my divs and they all wound up screwing with my images, putting a little space below them and screwing up my alignment, not quite sure why. i know i should really set one, but i foound that all is well if instead of
    Code:
    margin: 0 auto
    i use
    Code:
    left: 50%;
    margin-left: -380px;
    with 380px being half the width of the div. i know that i should still fix the doctype, but for the time being it's not at the top of my list

  4. #4
    coothead's Avatar
    bald headed old fart

    Status
    Offline
    Join Date
    Aug 2003
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    702

    Re: margin:0 auto; centers divs in all but IE

    Hi there althegud1srtaken,

    I would have to see your code or better still a link to the site in question to see what you are doing wrong.



Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •