SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Wizard Bill Posters's Avatar
    Join Date
    Dec 2001
    Location
    UK
    Posts
    1,523
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Vertically centered div in IE5/Mac w/DTD. Progress?

    Been playing around with the (old) div centering 'kludge' (example here).
    Unfortunately, the above kuldge example makes it appear simpler than it really is. It uses a partial HTML 4.01 Transitional DTD without offering a way how to do it in conjunction with a proper, 'compliant mode' DTD.
    I see the use of the partial 'old' DTD as a cheat and not an option for me.
    The partial HTML Transitional DTD triggers 'quirks mode' on many browsers, rather than 'standards mode'.

    Otherwise, I'm getting perfect results with the standards DTD present in all 'compliant*' browsers but IE5(Mac-only?).
    (* based on if (document.getElementById) )

    As soon as the compliant DTD goes in (XHTML Strict in this case) it becomes impossible for IE to correctly recognise the margin-top: 50% (or possibly the body height) attribute used in the kludge.
    The div is left hanging half off of the top of the page (w/o scrollbars)

    Setting body, html { height: 100%; } should fix the problem, but it seems that IE5 interprets 100% more like 150% leaving the div below center. All other compliant browsers tested recognise the height attribute correctly (though actually don't require it to be set explicitly.)

    All is well when using a partial HTML Transitional DTD (w/o the url), but I'd rather not have to degrade the quality of the entire site code just to get IE to behave as it should.

    I'm hoping that there is some way round this without detrimentally effecting the centering in other, more well behaved browsers and without having to compromise the code or the DTD.


    This request rarely throws up any definitive solutions, but I thought I'd ask again to see if any techniques have come to light since the last time the question was raised.

    Thanks in advance.
    Last edited by Bill Posters; May 12, 2003 at 23:03.
    New Plastic Arts: Visual Communication | DesignateOnline

    Mate went to NY and all he got me was this lousy signature

  2. #2
    SitePoint Evangelist S7even's Avatar
    Join Date
    Jun 2002
    Posts
    481
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You observed this problem in IE5 Mac only, or the windows version as well?

  3. #3
    Super Ninja Monkey Travis's Avatar
    Join Date
    Dec 2001
    Location
    Sioux City, Iowa
    Posts
    691
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Why not use negative margins? That seems to work well for horizontal, why wouldn't it for vertical?
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    
    <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <title>CSS Centering: Negative Margin</title>
    <style type="text/css" media="screen">
    body {margin:0px; padding:0px;}
    
    #Content {
    	position: absolute;
    	left: 50%;
            top: 50%;
    	width: 500px;
            height: 200px;
    	margin-top: -100px;
    	margin-left: -250px;
    	text-align: left;
    	background-color: #eee;
    	}
    </style>
    </head>
    <body>
    
    <div id="Content">
        This should be dead center.
    </div>
    
    <!-- BlueRobot was here. -->
    </body>
    </html>
    Why wouldn't that work? (not tested with vertical)
    Travis Watkins - Hyperactive Coder
    My Blog: Realist Anew
    Projects: Alacarte - Gnome Menu Editor

  4. #4
    SitePoint Wizard Bill Posters's Avatar
    Join Date
    Dec 2001
    Location
    UK
    Posts
    1,523
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It won't work for the reasons I spoke about in depth in the first post.
    New Plastic Arts: Visual Communication | DesignateOnline

    Mate went to NY and all he got me was this lousy signature

  5. #5
    SitePoint Evangelist S7even's Avatar
    Join Date
    Jun 2002
    Posts
    481
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The code works in IE6 with and without the <?xml line, so i assume it should work for IE5+ in windows. I guess the problem is with IE5 Mac only. Whats the % of users with that browser? (We have to draw the line somewhere!!!)

  6. #6
    SitePoint Wizard Bill Posters's Avatar
    Join Date
    Dec 2001
    Location
    UK
    Posts
    1,523
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    In instances where the majority of a site's visitors do not reflect the overall browser statistics, it's generally better to make sure you keep your visitors happy rather than some other majority who fall outside your target audience.

    As a graphic designer dealing mostly with print, my world is disproportionately Mac-centric. Within that world, MSIE5 is the most popularly used web browser.
    Ergo, I place the needs of mac-using design agencies above those of the broader statistical majority who, for the most part, fall outside the target audience.

    Indeed we do need to draw the line somewhere. But it's far wiser to draw that line to 'include' your target audience rather than 'exclude' it.
    New Plastic Arts: Visual Communication | DesignateOnline

    Mate went to NY and all he got me was this lousy signature

  7. #7
    gingham dress, army boots... silver trophy redux's Avatar
    Join Date
    Apr 2002
    Location
    Salford / Manchester / UK
    Posts
    4,838
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Bill Posters
    Indeed we do need to draw the line somewhere. But it's far wiser to draw that line to 'include' your target audience rather than 'exclude' it.
    tip of the hard hat to you, bill...i couldn't have expressed it better myself. it's all good and proper being evangelical and "purist" about coding and styles, but when websites hit "the real world" of commercial realities, principles have to sometimes be put aside in favour of the bottom line.
    re·dux (adj.): brought back; returned. used postpositively
    [latin : re-, re- + dux, leader; see duke.]
    WaSP Accessibility Task Force Member
    splintered.co.uk | photographia.co.uk | redux.deviantart.com


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
  •