SitePoint Sponsor

User Tag List

Results 1 to 16 of 16
  1. #1
    SitePoint Evangelist Alluvian's Avatar
    Join Date
    Jan 2007
    Location
    Orlando, FL
    Posts
    417
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    really stupid question. Centering image in IE6

    The example is using an inline style just to remove as much room for typos as possible. I could have SWORN this used to work. I thought only IE5.5 ignored the 'auto' value for margins?

    In IE 6, this image is not centered. Could someone point out what I am doing wrong/stupidly?

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <html>
    <head>
    <title>LOTRO Family</title>
    
    </head>
    <body>
    
    <img style="display:block;margin-left:auto;margin-right:auto;padding:5px;" src="/images/lotro-adopt1.jpg">
    
    </body>
    </html>
    This sample code is live right now at www.thebrasse.com/lotro/family2.php

  2. #2
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You need a complete doctype to get IE out of quirks mode, and the encoding should be specified as well.
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

  3. #3
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    I don't think that's true. I managed to centre an image in IE6 using the following code:
    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
    <title>A simple PHP photo gallery, database not obligatory</title>
    <img style="display:block;margin-left:auto;margin-right:auto;padding:5px;" src="misc/IMG_4135.jpg">
    It also works if the doctype is simply this:
    HTML Code:
    <!DOCTYPE
    So it seems that's what IE looks for. If you take the E off DOCTYPE, then quirks mode is triggered.

    Also, in strict mode inline content (like images, spans, etc.) isn't allowed to be a direct child of the body. The body can only contain block-level elements.

  4. #4
    SitePoint Evangelist Alluvian's Avatar
    Join Date
    Jan 2007
    Location
    Orlando, FL
    Posts
    417
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This is a stripped down version of the real page of course. In the real page all content is inside div tags that are wrappers for the positioned content.

    Adding that back in still does not center the image.

    Any ideas?

    New code, image still not centered.
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <html>
    <head>
    <title>LOTRO Family</title>
    
    </head>
    <body>
    <div>
      <img style="display:block;margin-left:auto;margin-right:auto;padding:5px;" src="/images/lotro-adopt1.jpg">
    </div>
    </body>
    </html>

  5. #5
    SitePoint Evangelist Alluvian's Avatar
    Join Date
    Jan 2007
    Location
    Orlando, FL
    Posts
    417
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hrm. Interesting. Maybe it was quirks mode...

    This centers now, but the above does not. Only change is doctype.


    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>LOTRO Family</title>
    
    </head>
    <body>
    <div>
    <img style="display:block;margin-left:auto;margin-right:auto;padding:5px;" src="/images/lotro-adopt1.jpg">
    </div>
    </body>
    </html>

  6. #6
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Contrary to another poster's view, IE is still in quirks mode until the full url section of the doctype is included. You should also include the encoding section I included above.

    Glad to see you got it working.

  7. #7
    SitePoint Evangelist Alluvian's Avatar
    Join Date
    Jan 2007
    Location
    Orlando, FL
    Posts
    417
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the help. Still some things after months that I am setting right in my brain. Learning anything from the internet is a dangerous thing. My doctype was cut and pasted from some site that seemed to have good information, who knows what that site was these days.

    Going to have to go through and update all my pages. I note that it also changes how a few of my borders work even in firefox. Odd. Hopefully it does not put too much out of place, but better to fix now than later.

  8. #8
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    I still maintain that you don't need the URL in the doctype. See this table.

    Alluvian, the thing is that you have been swapping between Transitional and Strict doctypes. A Transitional doctype minus the URL does trigger quirks mode, but a Strict doctype minus the URL does not.

    Transitional doctypes should be avoided. Use a strict doctype (like in your last post) and you can put the URL in if you want.

  9. #9
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Interesting article. I certainly wasn't aware that strict doctypes could omit the url. However, as some types DO require the url, it would make sense to include it in ANY doctype, such as recommended by that article's author.

  10. #10
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    As Raffles said its the html 4 transitional doctype without URI (not URL) that will trigger IE into quirks mode.

    In quirks mode IE6 does not understand the margin:auto method of centring and defaults to the same behaviour that ie5 and 5.5. have at all times regardless of doctype.

    Therefore if you also want to center in ie5.+ you will need to add text-align:center to the parent of the image. Of course if you left the image as display;inline then text-align center on the parent would center it for all browsers anyway

  11. #11
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Paul, why isn't it a URL? I'm confused.

  12. #12
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Paul, why isn't it a URL? I'm confused.
    lol - I knew that would confuse

    A URI is a "Uniform Resource Identifier" and a URL is a subset of a URI that is a "Uniform Resource Locator".

    One identifies the resource and one locates it. All Url's are URI's but not vice versa.

    Quote Originally Posted by http://gbiv.com/protocols/uri/rfc/rfc3986.html
    A URI can be further classified as a locator, a name, or both. The term "Uniform Resource Locator" (URL) refers to the subset of URIs that, in addition to identifying a resource, provide a means of locating the resource by describing its primary access mechanism (e.g., its network "location").
    More info here:
    http://www-128.ibm.com/developerwork...y/x-urlni.html

  13. #13
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    I understand that, but I still don't see why this isn't a URL:
    Code:
    http://www.w3.org/TR/html4/strict.dtd
    It fits in with what you've quoted there, unless I'm missing something crucial (wouldn't be the first time).

  14. #14
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    No, Its a URI as it identifies the resource. A URL would take you to an actual webpage.

  15. #15
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    OK, I get it. Thanks.

  16. #16
    SitePoint Wizard bronze trophy Black Max's Avatar
    Join Date
    Apr 2007
    Posts
    4,029
    Mentioned
    12 Post(s)
    Tagged
    0 Thread(s)
    I asked a similar question in the main forum (shoulda been in the CSS forum):

    my question on centering

    Sounds like you've got it under control, but I thought I'd make it available for those who might have a similar question.

    I hear ya on the doctype controversy. I'm still wrestling with the results of switching my 100+ page site from what I thought was the proper transitional doctype (it wasn't -- omitted the URI and was in quirks mode the entire time) to a strict doctype. Fun, fun, fun.


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
  •