IE content aligned left

Page 1 of 1

7 Replies - 332 Views - Last Post: 20 February 2012 - 01:15 PM

#1 NewToJava2011  Icon User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 121
  • Joined: 21-November 11

IE content aligned left

Posted 19 February 2012 - 09:35 AM

I know it's a common problem but I've tried the usual fixes such as text-align: center and margin 0 auto.

Anyone see anything obvious why the whole container is pulled left in IE only.

This should be enough of the CSS

* { margin:0; padding:0; }
body, div, p, a, img, ul, li { border:0; }
body { 
    padding: 0; 
    background: #fff url("../img/bg.jpg") repeat-x; 
    font: 0.8em/1.5 "arial",sans-serif; 
    color: #354146; 
    text-align: center; 
}

/* General Reference -------------------------------------------------------- */
a {color:#1666a3;}
a:link {color:#1666a3;}
a:hover {color:#0b4775;}

/* Headings ----------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 { margin:15px 0 10px 0; }
h1 { font-size:200%; font-family: Georgia;}
h1#logo a{color: #ced1d2; text-decoration: none; display: block;padding: 18px 0 17px; font-weight: normal;}
h1#logo a:hover{color: #fff;}
h2 { font-size:130%; color: #354146;font-weight: bold; padding: 0;margin:0; }
h3 { font-size:120%; }
h4 { font-size:120%; }
h5 { font-size:100%; }

/* Layout ------------------------------------------------------------------- */
#layout { 
    text-align:left; 
}
#container { 
    margin: 0 auto; 
    text-align: center; 
    clear: both;
}
#intro{
    background: #e6e8e9;height: auto;
}
#intro-in{
    width:891px; 
    margin:0 auto; 
    padding: 20px 0;
}

/* Header ------------------------------------------------------------------- */
#header {width:891px; 
         margin:0 auto; }


Is This A Good Question/Topic? 0
  • +

Replies To: IE content aligned left

#2 floppyspace  Icon User is offline

  • D.I.C Head

Reputation: 25
  • View blog
  • Posts: 187
  • Joined: 04-February 10

Re: IE content aligned left

Posted 20 February 2012 - 06:45 AM

Would it help to add a width to the container?

#container { 
    width: 891px;
    margin: 0 auto; 
    text-align: center; 
    clear: both;
}

Was This Post Helpful? 0
  • +
  • -

#3 NewToJava2011  Icon User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 121
  • Joined: 21-November 11

Re: IE content aligned left

Posted 20 February 2012 - 10:17 AM

View Postfloppyspace, on 20 February 2012 - 06:45 AM, said:

Would it help to add a width to the container?

#container { 
    width: 891px;
    margin: 0 auto; 
    text-align: center; 
    clear: both;
}


Good thought, but no luck
Was This Post Helpful? 0
  • +
  • -

#4 revolutionx  Icon User is offline

  • D.I.C Head

Reputation: 60
  • View blog
  • Posts: 229
  • Joined: 23-July 09

Re: IE content aligned left

Posted 20 February 2012 - 10:37 AM

Can you post your HTML that have you so far.
Was This Post Helpful? 0
  • +
  • -

#5 NewToJava2011  Icon User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 121
  • Joined: 21-November 11

Re: IE content aligned left

Posted 20 February 2012 - 10:44 AM

View Postrevolutionx, on 20 February 2012 - 10:37 AM, said:

Can you post your HTML that have you so far.


This should be enough of the HTML. This is something I should have addressed in the beginning stages rather than reverse engineering it. Built the project using Chrome and Firefox. 

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <link href="css/screen.css" type="text/css" rel="stylesheet" media="screen,projection" />
        <link rel="stylesheet" media="print" type="text/css" href="css/print.css" />
        <title>Twinz | 
            <?php
            if (isset($tabTitle))
                echo $tabTitle
                ?>
        </title>
    </head>
    <body>
        <div id="layout">
            <div id="header">
                <h1 id="logo"><a href="index.php" title="Twinz">Twinz</a></h1>
            </div>
            <div id="nav" class="box">
                <ul>
                      <li <?php echo $active['index.php'] ?>><a href="index.php">Home</a></li>
                      <li <?php echo $active[2] ?>><a href="#">Maps</a></li>   
                </ul>
           </div>
           <div id="intro">
               <div id="intro-in">
                   <h2>
                        <?php
                        if (isset($pageIntroductionHeading)) {
                             echo $pageIntroductionHeading;
                        }
                        ?>
                   </h2>
                   <p class="intro">
                         <?php
                         if (isset($pageIntroductionContent)) {
                              echo $pageIntroductionContent;
                         }
                   ?>
                  </p>
              </div>
          </div>
          <div id="obsah" class="content box">
    <div class="in">
        <div class="shadow">
            <img src="./img/threeCities.jpg" alt="Three Cities Banner" title="Three Cities" class="thumb" />
        </div>
        <ul class="columns">
            <li class="col1">
                <?php
                displayColumnContent($columnHeadings, $currentPage, $weatherSource, $columnSubheading, $currencySource, $photoSource);
                ?>
            </li>
            <li class="col2">
                <?php
                displayColumnContent($columnHeadings, $currentPage, $weatherSource, $columnSubheading, $currencySource, $photoSource);
                ?>             
            </li>
            <li class="col3">
                <?php
                displayColumnContent($columnHeadings, $currentPage, $weatherSource, $columnSubheading, $currencySource, $photoSource);
                ?>                 
            </li>
        </ul>
        <div class="clear"></div>
        </div>
    </div>

    <?php require 'footer.php'; ?>

This post has been edited by NewToJava2011: 20 February 2012 - 10:45 AM

Was This Post Helpful? 0
  • +
  • -

#6 revolutionx  Icon User is offline

  • D.I.C Head

Reputation: 60
  • View blog
  • Posts: 229
  • Joined: 23-July 09

Re: IE content aligned left

Posted 20 February 2012 - 12:04 PM

Try the following:

#layout { 
    text-align:left; 
    width:980px; 
    margin:0 auto;
}

Was This Post Helpful? 0
  • +
  • -

#7 NewToJava2011  Icon User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 121
  • Joined: 21-November 11

Re: IE content aligned left

Posted 20 February 2012 - 12:09 PM

View Postrevolutionx, on 20 February 2012 - 12:04 PM, said:

Try the following:

#layout { 
    text-align:left; 
    width:980px; 
    margin:0 auto;
}


That throws my header out. No worries. Thanks anyway. I can't really see what it is.
Was This Post Helpful? 0
  • +
  • -

#8 revolutionx  Icon User is offline

  • D.I.C Head

Reputation: 60
  • View blog
  • Posts: 229
  • Joined: 23-July 09

Re: IE content aligned left

Posted 20 February 2012 - 01:15 PM

If you set the Container div to the same width as the header that should work. This is how you would center a fixed width layout.
Was This Post Helpful? 0
  • +
  • -
Page 1 of 1