SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Enthusiast
    Join Date
    Sep 2003
    Location
    pa
    Posts
    79
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Centering container on IE PC not working

    I don't know why this isn't working on IE PC.

    It works on Firefox PC and IE Mac and Firefox Mac.


    CSS CODE:
    /* CSS Document */

    html,body {
    height: 100%;
    min-height: 1%;
    margin:0;
    padding:0;
    }

    body {
    padding: 0;
    margin: 0;
    background-color: #FFF;
    background-image: url(images/bgbg.gif);
    background-position: left top;
    }

    #container {
    width: 759px;
    background-image: url(images/containerbg.gif);
    background-position: center top;
    padding: 0;
    margin: 0px auto;
    position:relative;

    }

    #header {
    background-position: center top;
    background-image: url(images/header.jpg);
    background-repeat: no-repeat;
    width: 751px;
    padding: 0;
    margin: 0px auto;
    }

    #address
    {

    float:right;
    font-family: Arial, Helvetica, sans-serif;
    color: #000;
    font-weight: bold;
    text-decoration: none;
    font-size: 10px;
    text-align:right;
    margin: 15px 5px 0 0;
    line-height: 16px;
    }

    /* Top Nav */
    #navlist
    {
    float:right;
    margin: 30px 0 0 0;
    padding: 0 0 0 10px;
    }

    #navlist ul, #navlist li
    {
    margin: 0;
    padding: 0;
    display: inline;
    list-style-type: none;
    }

    #navlist a:link, #navlist a:visited
    {
    font-family: Arial, Helvetica, sans-serif;
    float: right;
    line-height: 14px;
    font-weight: bold;
    margin: 0 10px 2px 10px;
    text-decoration: none;
    color: #999;
    font-size:11px;
    }

    #navlist a:link#current, #navlist a:visited#current, #navlist a:hover
    {
    color: #000;
    }

    /*Left Nav*/

    #leftnav ul
    {
    margin: 0;
    padding: 0;
    list-style-type: none;
    font-family: Arial, Helvetica, sans-serif;
    font-size:12px;
    }

    #leftnav a
    {
    display: block;
    padding-top: 2px;
    padding-bottom: 2px;
    padding-left: 3px;
    background-color: #EDDCE4;
    border-bottom: 1px solid #777;
    text-decoration: none;
    margin:0;
    }

    #leftnav a:link, #leftnav a:visited
    {
    color: #000;
    text-decoration: none;
    margin:0;
    }

    #leftnav a:hover
    {
    background-color: #FDF1F6;
    color: #000;
    }

    #leftnav a#current
    {
    background-color: #FDF1F6;
    color: #000;
    }


    /* Floats */
    .clearer {
    height:1%;
    overflow:hidden;
    clear:both;
    margin-top:-1px;
    }

    /*Left Side*/


    #left{
    float: left;
    width: 132px;
    margin:0;
    padding:0;
    background-color: #EDDCE4;
    border-right: 1px solid #777;
    position:relative;
    }

    #catalog
    {
    width: 132px;
    background-color: #DEBECC;
    }

    .entryLeft{
    border: 1px solid #777;
    background-color: #EDDCE4;
    padding: 0;
    margin:15px;
    }

    .entryLeft p{
    font-family: Verdana, Tahoma, Arial, Helvetica, sans-serif;
    font-size: 11px;
    font-weight: normal;
    color: #002773;
    margin: 10px 8px;
    padding: 5px;
    text-align:left;
    }

    .entryLeftMin{

    min-height: 300px;}


    .innerLeft{
    float: left;
    width: 60%;
    margin:0;
    padding:0;
    }


    /*Right Side*/
    #right{
    float:right;
    width: 615px;
    margin:0;
    padding:0;
    background-color: #FFF;
    position:relative;

    }


    .entryRight{
    width: 475px;
    border: 1px solid #002773;
    background-color: #FFF;
    padding:0;
    margin: 15px 10px;
    }

    .rightImage
    {float:right;
    margin: 15px 10px;
    }

    .subhead
    {float:right;
    margin: 0 10px 5px;
    color: #BFC9DC;
    font-family: Georgia, Times, Times New Roman, serif;
    font-size: 24px;
    font-weight: bold;
    }

    .entryRight p{
    font-family: Verdana, Tahoma, Arial, Helvetica, sans-serif;
    font-size: 11px;
    font-weight: normal;
    color: #002773;
    margin: 10px 8px;
    padding-right: 0;
    text-align:left;
    }

    .entryRight li{

    font-family: Verdana, Tahoma, Arial, Helvetica, sans-serif;
    font-size: 11px;
    font-weight: normal;
    color: #002773;
    margin: 10px 8px;
    padding-right: 0;
    text-align:left;
    }

    /* text */

    h5
    {font-size: 10px;
    font-family: Arial, Helvetica, sans-serif;
    color: black;}


    /*Design Elements*/
    .solidGreyLine
    {
    border-top: 1px solid #777;
    margin: 0;
    padding:0;
    }

    /*Forms*/

    .formHeader
    {font-family: Georgia, Times New Roman, Times, serif;
    font-size: 14px;
    color: #F15A22;
    margin: 10px 4px;
    padding: 0;
    text-align:left;
    }




    .formText{
    font-family: Verdana, Tahoma, Arial, Helvetica, sans-serif;
    font-size: 11px;
    font-weight: normal;
    color: #002773;
    margin: 10px 8px;
    padding: 0;
    text-align:left;
    }

    .pinkButton
    {font-family:arial, sans-serif;
    border-top:solid 1px #eee;
    border-left:solid 1px #eee;
    border-bottom:solid 1px #737373;
    border-right:solid 1px #737373;
    background-color:#DEBECC;
    color:#000;

    }

    textarea, select, input {
    font-size: 11px;
    font-family:arial, sans-serif;
    border-top:solid 1px #737373;
    border-left:solid 1px #737373;
    border-bottom:solid 1px #737373;
    border-right:solid 1px #737373;
    background-color:#fff;
    color:#666;
    padding:2px;
    margin-top: 2px;
    }

  2. #2
    SitePoint Member
    Join Date
    Nov 2003
    Location
    USA
    Posts
    24
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Are you using a transitional or strict doctype?

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,516
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Have a look at the FAQ on centering a page to see what swishstudios is talking about.

    Basically ie5 and ie5.5. and ie6 in quirks mode don't rcognise that margin-left:auto and margin-right:auto should centre an element.

    Instead they wrongly assume that text-align:center will not only centre text but also nested block level elements.

    Therefore if you need to satisfy the above requirements you also need to specify text-align:center on a parent (such as the body).
    Code:
    body {text-align:center}
    You will then also need to reset the text to text-align:left on the nested container to set the text back to normal.

    Hope that helps.

    Paul

  4. #4
    SitePoint Enthusiast
    Join Date
    Sep 2003
    Location
    pa
    Posts
    79
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ahh, I see. I read that post before I posted, duh. I did two other sites the same way and they centered. I guess I had text-align: center in the body but didn't realize it's full purpose.

    I didn't see anything about what swishstudios was referring to in the FAQ thread on centering a page, or at least I didn't get it.

    Well thanks again.

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,516
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    I didn't see anything about what swishstudios was referring to in the FAQ thread on centering a page, or at least I didn't get it.
    My mistake - I thought I mentioned it in there. What swishstudios should really have said is are you in quirks or standards mode. If you don't use a doctype , or use a partial doctype, or use the xml prologue then ie6 reverts to quirks mode and behaves in some manners (although not all) similar to ie5 and 5.5.

    Strict or transitional in fact makes no difference at all Its quirks or standards mode that has the effect.

    Paul


Bookmarks

Posting Permissions

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