SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member Xireon's Avatar
    Join Date
    Oct 2004
    Location
    The Netherlands
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Centered <DIV> displaying false in IE

    Hi all,

    Let me start by saying I'm a total n00b in CSS webdesign.
    I bought the HTML Utopia book (which is great btw) but I have one major issue I cannot solve by myself.

    I'm building a site with a big <DIV> container holding everything else.
    This container is fixed at 770px, so it displays correct on all resolutions starting at 800x600, without needing a horizontal scrollbar.
    I also have this container centered on the page, so no matter the resolution, it stays centered.
    This displays perfectly in Mozilla Firefox 1.0PR, But on the latest IE (6.something) this container appears left justified.
    I've tried several doctypes, but that doesn't solve anything.
    I'm pretty sure it's not the box model bug.
    Does anyone have an idea???

    Thanks in advance.

    Here's my (simplified) code:
    Code:
    <html>
      <head>
        <title>Some title</title>
        <style>
        .centered
          {
            position: absolute;
            top: 5px;
            right: 0;
            bottom: 10px;
            left: 0;
            width: 770px;
            height: 1000px;
            margin: auto;
            border: 1px dashed black;
            z-index: 5;
         }
        </style>
      </head>
      <body>
        <div class="centered">Content goes here.</div>
      </body>
    </html>

  2. #2
    Is Still Alive silver trophybronze trophy RetroNetro's Avatar
    Join Date
    Jul 2003
    Location
    Texas
    Posts
    6,883
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Hello

    try this:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
      <head>
        <title>
          sometitle
        </title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <style type="text/css">
        .centered{
            margin: auto;
            width: 770px;
            height: 1000px;
            border: 1px dashed black;
            z-index: 5;
            }
        </style>
      </head>
      <body>
        <div class="centered">Content goes here.</div>
      </body>
    </html>
    It needs to have a DTD at the top plus I removed the absolutely positioned elements you has also.

    Later
    Johnny

  3. #3
    SitePoint Member Xireon's Avatar
    Join Date
    Oct 2004
    Location
    The Netherlands
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That did the trick... Thanx!!!!

    Just curious... I've tried a doctype before posting here.
    Could the "position: absolute;" be the error then?

    /Edit: Tried it.
    "position: absolute;" gives the problem.
    Can someone pls explain why?

  4. #4
    Is Still Alive silver trophybronze trophy RetroNetro's Avatar
    Join Date
    Jul 2003
    Location
    Texas
    Posts
    6,883
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Hello

    Yeah I think it was. I did not read that you had already tried that until after I posted so that must have been it

    Code:
    position: absolute;
            top: 5px;
            right: 0;
            bottom: 10px;
            left: 0;
    Cause that is telling the division to be absolutely positioned, in accordance to the browser window.

    Glad you got it straightened out.

    Johnny


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
  •