SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Zealot KarmaDungyu's Avatar
    Join Date
    May 2003
    Location
    Colchester
    Posts
    116
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    IE6 and 7 centering container issue

    Hi all,

    I'm trying to do a quick makeover on part of a site what was created long time back with old school tables layout. I want to make it look similar to the newer parts which use css layout. In brief, I've taken a fluid full width tables based layout, wrapped all the tables into a containing div, and want this to centre horizontally on the page.

    The container div centres perfectly in Firefox (pc), but is left aligned in IE 6 and 7 (pc). I've changed all the html, body and container code to the correctly aligned new style css layout page, but it still aligns to the left of the browser in IE6 and 7. As I'm banging my head looking at the same code without any more ideas, I wonder if anyone could shed light on why this is happening please?

    many, many thanks in advance,

    Karmadungyu


    My newstyle css based layout which centres fine in IE is at:
    http://www.defactosoftware.com/stagi...es_ledger.html
    http://www.defactosoftware.com/stagi...stylesheet.css

    The incorrectly aligned oldschool tables based layout (now wrapped in a div) is at:
    http://www.defactosoftware.com/stagi..._facto_s5.html
    http://www.defactosoftware.com/stagi...et_interim.css

    The start of each stylesheet is the same code:

    Code:
    html {
    	height:100%;
    }
    body {
    	margin:0px;
    	padding: 40px 0px 4px 0px;
    	background: url("../images/utility/background/back.gif") repeat-x top left #043047;
    }
    #wrap {
    	position:relative;
    	border:1px solid #000;
    	margin:auto;
    	min-height:100%;
    	width:780px;
    	background-color:#ffffff;
    	color:#000000;
    }
    Website Design : Chotrul Web Design and SEO

    Dharma Blog : Luminous Emptiness

  2. #2
    SitePoint Zealot KarmaDungyu's Avatar
    Join Date
    May 2003
    Location
    Colchester
    Posts
    116
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ah ... think I've got it ....

    think it is because I had this in the html:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

    instead of
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

    :-(

    just checking it through ....
    Website Design : Chotrul Web Design and SEO

    Dharma Blog : Luminous Emptiness

  3. #3
    Design Your Site Team bronze trophy Erik J's Avatar
    Join Date
    May 2007
    Location
    Countryside, Sweden
    Posts
    3,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    For IE6 I think you need "text-align:center" in the body-rules to make #wrap centered.

    In standard mode, IE7 understands the rule "margin:0 auto" for #wrap.
    Happy ADD/ADHD with Asperger's

  4. #4
    SitePoint Zealot KarmaDungyu's Avatar
    Join Date
    May 2003
    Location
    Colchester
    Posts
    116
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi ... thanks for that ... .seems to work fine in IE6 without that - just the DTD change.

    I've altered the html and css ... so you won't be seeing the same code at the url's anymore ....

    many thanks for your help,

    Mark
    Website Design : Chotrul Web Design and SEO

    Dharma Blog : Luminous Emptiness

  5. #5
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by erik.j View Post
    For IE6 I think you need "text-align:center" in the body-rules to make #wrap centered.

    In standard mode, IE7 understands the rule "margin:0 auto" for #wrap.
    Erik, the text-align: center; trick is not necessary if IE 6 has a complete and proper DOCTYPE since it forces IE 6 into standards mode.

  6. #6
    Design Your Site Team bronze trophy Erik J's Avatar
    Join Date
    May 2007
    Location
    Countryside, Sweden
    Posts
    3,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Dan Schulz View Post
    Erik, the text-align: center; trick is not necessary if IE 6 has a complete and proper DOCTYPE since it forces IE 6 into standards mode.
    Thanks, I'm learning.
    Happy ADD/ADHD with Asperger's

  7. #7
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    No problem.


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
  •