www.webdeveloper.com
Results 1 to 10 of 10

Thread: Stupid centering problem

  1. #1
    Join Date
    Jun 2011
    Posts
    140

    Stupid centering problem

    I am so angry at myself for having to post this here because I would like to think with my basic knowledge I would be able to sort this out but here goes: My wrapper div won't centre!!

    CSS:
    Code:
    *			{padding: 0; margin: 0; outline: 0; border: 0;}
    body		{background-image: url('tile.png'); text-align: justify; font-family: Tahoma, Arial, Helvetica, sans-serif; font-size: 11px; overflow: scroll;}
    #wrapper	{width: 900px; height: 100%; margin: 0px auto; background-image: url('wrapper.png');}
    Now, my impression was if an element has a width and margin: 0 auto, it should centre, but it's not!

    Why?!

  2. #2
    Join Date
    Aug 2006
    Posts
    1,905
    1) width 2) margin auto 3) doctype

    Do you have a doctype?

    Dave

  3. #3
    Join Date
    Jun 2011
    Posts
    140
    I narrowed this down to the doctype.
    I was using this:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    which is the default DOCTYPE when starting a new page on Editplus...

    Changed it to this:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
    which I got from the w3 website and it seems to work, although there is not a great difference between the two?

    Really don't know why that first one didn't work, have always used that in the past.

  4. #4
    Join Date
    Aug 2006
    Posts
    1,905
    Dunno for sure, but I certainly wouldn't use a frameset doctype unless you're using frames.

    html4.0 was old news around 1999, so instead drop in html4.01 (transitional if you must):
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">

    Strict would be better:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">

    Dave

  5. #5
    Join Date
    Jun 2011
    Posts
    140
    Thanks Dave, that one works fine for me.
    Can I just ask your opinion on something else quickly, I am using jQuery show/hide features on a list, so on loading the page in IE it gives you all that Active X control crap etc...
    What would you do to ensure that the user has this enabled so they are viewing your page how it is meant to be viewed?

  6. #6
    Join Date
    Aug 2006
    Posts
    1,905
    Is this happening with your files on a server, or just when you browse the side locally on your machine?

  7. #7
    Join Date
    Jun 2011
    Posts
    140
    Its just local at the mo, just presumed it might have done it once uploaded too but is this not the case?

  8. #8
    Join Date
    Aug 2006
    Posts
    1,905
    No, it should be fine once you're running it off a server.

  9. #9
    Join Date
    Jun 2011
    Posts
    140
    OK Cheers Dave

  10. #10
    Join Date
    May 2005
    Location
    Gold Coast (MS)
    Posts
    2,211
    Quote Originally Posted by djadejones View Post
    I narrowed this down to the doctype.
    I was using this:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    which is the default DOCTYPE when starting a new page on Editplus...

    Changed it to this:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
    which I got from the w3 website and it seems to work, although there is not a great difference between the two?

    Really don't know why that first one didn't work, have always used that in the past.
    One is an HTML doctype that is missing the URI part: ""http://www.w3.org/TR/html4/frameset.dtd""

    The other is a frameset doctype used with frame pages.

    Centering:

    Centering an element requires setting a width that is less than 100%, using a proper document type and using the CSS property: margin: 0 auto; This is done in the CSS that styles the element. Example:

    Example as an ID:

    Code:
    #selector_name{
    width: 90%;
    height: 600px; /* optional */
    margin: 0 auto;
    background: #fff url(path to non-tiled image) no-repeat center scroll;
    }

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles