20 replies [Last post]
serge4
serge4's picture
Offline
Enthusiast
Last seen: 5 years 21 weeks ago
Timezone: GMT-4
Joined: 2005-07-28
Posts: 54
Points: 0

Hello,

I'm interested in some feedback and suggestions on centering both horizontally and vertically DIV content on the following page.

www.demo.zanzinato.com/center

I am trying to move away from a tables based layout and would like this to be as clean and optimized as possible. I am aiming for fixed horizontal width but fluid vertical height. I've got a pretty good start however I would like to get it working in Mac IE 5.2.3 and it seems to be having trouble with one of the backgrounds.

If you could glance this over I would be most interested in other opinions.

Thanks a lot!

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 1 week 20 hours ago
Joined: 2004-06-30
Posts: 9679
Points: 815

CSS: Efficient Centering of DIV content

Error! File not found!

Verschwindende wrote:
  • CSS doesn't make pies

serge4
serge4's picture
Offline
Enthusiast
Last seen: 5 years 21 weeks ago
Timezone: GMT-4
Joined: 2005-07-28
Posts: 54
Points: 0

CSS: Efficient Centering of DIV content

heh...that's the page! sorry for the confusion...

larmyia
Offline
Elder
London
Last seen: 13 years 18 weeks ago
London
Timezone: GMT+1
Joined: 2005-01-25
Posts: 1060
Points: 0

CSS: Efficient Centering of DIV content

Laughing out loud

good one serge4!

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 1 week 20 hours ago
Joined: 2004-06-30
Posts: 9679
Points: 815

CSS: Efficient Centering of DIV content

ERROR! 404 Not Found.

The requested URL was not found on this server.

Verschwindende wrote:
  • CSS doesn't make pies

larmyia
Offline
Elder
London
Last seen: 13 years 18 weeks ago
London
Timezone: GMT+1
Joined: 2005-01-25
Posts: 1060
Points: 0

CSS: Efficient Centering of DIV content

tph, unless I've read his post wrong, I think the error msg is what he's trying to centre...

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 46 weeks 4 days ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

CSS: Efficient Centering of DIV content

thepineapplehead wrote:
ERROR! 404 Not Found.

The requested URL was not found on this server.
Yes, that is the page in question. Look at the response header.
 
Response Headers - http://www.demo.zanzinato.com/center/ 
 
Date: Fri, 26 Aug 2005 08:56:04 GMT 
Server: Apache/1.3.31 (Unix) DAV/1.0.3 mod_fastcgi/2.4.2 mod_gzip/1.3.26.1a PHP/4.3.10 mod_ssl/2.8.19 OpenSSL/0.9.6c 
Last-Modified: Thu, 25 Aug 2005 16:19:20 GMT 
Etag: "a5734e-664-430def88" 
Accept-Ranges: bytes 
Content-Length: 1636 
Keep-Alive: timeout=15, max=100 
Connection: Keep-Alive 
Content-Type: text/html 
 
200 OK

Compare to an actual 404.
 
Response Headers - http://koko.blues/~gt/webdev/whoodoo.html 
 
Date: Fri, 26 Aug 2005 08:57:49 GMT 
Server: Apache/1.3.33 (Debian GNU/Linux) PHP/4.3.10-15 
Keep-Alive: timeout=15, max=98 
Connection: Keep-Alive 
Transfer-Encoding: chunked 
Content-Type: text/html; charset=iso-8859-1 
 
404 Not Found

I think he got cha. Tongue Laughing out loud

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

larmyia
Offline
Elder
London
Last seen: 13 years 18 weeks ago
London
Timezone: GMT+1
Joined: 2005-01-25
Posts: 1060
Points: 0

CSS: Efficient Centering of DIV content

kk5st wrote:

I think he got cha. Tongue Laughing out loud

twice!

Lorraine
Lorraine's picture
Offline
Elder
UK
Last seen: 15 years 22 weeks ago
UK
Timezone: GMT+1
Joined: 2005-01-04
Posts: 1001
Points: 0

CSS: Efficient Centering of DIV content

:-#

There's a discussion about IE/Mac and centering here, in case it helps
http://www.csscreator.com/css-forum/ftopic1428.html
The link to Stu Nicholl's site may be worth visiting.

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 1 week 20 hours ago
Joined: 2004-06-30
Posts: 9679
Points: 815

CSS: Efficient Centering of DIV content

Well, don't I look stupid :s

And because I couldn't find a relevant smiley . . .

Verschwindende wrote:
  • CSS doesn't make pies

serge4
serge4's picture
Offline
Enthusiast
Last seen: 5 years 21 weeks ago
Timezone: GMT-4
Joined: 2005-07-28
Posts: 54
Points: 0

CSS: Efficient Centering of DIV content

Sorry about the confusion. I should have known.

serge4
serge4's picture
Offline
Enthusiast
Last seen: 5 years 21 weeks ago
Timezone: GMT-4
Joined: 2005-07-28
Posts: 54
Points: 0

CSS: Efficient Centering of DIV content

so back to my initial question...

serge4
serge4's picture
Offline
Enthusiast
Last seen: 5 years 21 weeks ago
Timezone: GMT-4
Joined: 2005-07-28
Posts: 54
Points: 0

CSS: Efficient Centering of DIV content

any thoughts?

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 46 weeks 4 days ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

CSS: Efficient Centering of DIV content

Here is a method using css2. It is hacked to make it work in a certain obsolete browser.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xml:lang="en"
      xmlns="http://www.w3.org/1999/xhtml"
      lang="en">
<head>
  <meta name="generator"
        content="
        HTML Tidy for Linux/x86 (vers 12 April 2005), see www.w3.org" />
        
  <meta name="editor"
        content="Emacs 21" />
  <meta name="author"
        content="Gary Turner" />
  <meta http-equiv="content-type"
        content="text/html; charset=utf-8" />

  <title>v+h centering</title>
<style type="text/css">
/*<![CDATA[*/

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    }

#container {
    border: 1px solid black; /*for clarity*/
    display: table;
    height: 100%;
    width: 90%;
    margin: 0 auto;
    padding: 5px; /*for clarity*/
    }

#content {
    border: 1px solid black; /*for clarity*/
    display: table-cell;
    vertical-align: middle;
    position: relative;
    width: 100%;
    }

#inner {
    border: 1px solid black; /*for clarity*/
    width: 50%;
    margin: 0 auto;
    }

/* \*/
* html #content {
    top: 50%;
    left: 0;
    }

* html #content #inner {
    position: relative;
    top: -50%;
    }
/* */

/*]]>*/

</style>
</head>

<body>
  <div id="container">
    <div id="content">
      <div id="inner">
        <p>v+h centered stuff</p>
      </div><!-- end inner -->
    </div><!-- end content" -->

  </div>
</body>
</html>

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

serge4
serge4's picture
Offline
Enthusiast
Last seen: 5 years 21 weeks ago
Timezone: GMT-4
Joined: 2005-07-28
Posts: 54
Points: 0

CSS: Efficient Centering of DIV content

anyone see any possible way to get that to also work in Mac IE 5.2.3?

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 46 weeks 4 days ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

CSS: Efficient Centering of DIV content

No Mac here, but my info is that IE/Mac grokked display: table && table-cell as of v5.0, so it should work. :shrug:

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

serge4
serge4's picture
Offline
Enthusiast
Last seen: 5 years 21 weeks ago
Timezone: GMT-4
Joined: 2005-07-28
Posts: 54
Points: 0

CSS: Efficient Centering of DIV content

I've been working out a better solution but have run into some issues in Mac IE 5.2.3. If someone could check on Firefox, then check the Mac version, they'll see what i'm talkin bout. this hasn't been PC tested yet so first i'd like to resolve the Mac IE problem. Thx.

demo.zanzinato.com/td

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 46 weeks 4 days ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

CSS: Efficient Centering of DIV content

Just curious, but why are you beating yourself up over IE/Mac? Unless 1) your client is a troglodyte or 2) the layout breaks in IE/Mac, and by break, I mean things get ugly, why would you bother about an obsolete and abandoned browser?

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 7 years 14 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

CSS: Efficient Centering of DIV content

kk5st wrote:
why would you bother about an obsolete and abandoned browser?

I seem to remember someone on here not so long ago arguing that IE5/Mac was still quite commonly used in Europe (can't remember what the rationale for his argument was though).

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 46 weeks 4 days ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

CSS: Efficient Centering of DIV content

I should have talked in terms of breakage vs not looking quite right. IE/Mac is a decent browser and should be considered. I feel that no extraordinary effort should be spent on correcting for renderings that don't break the page.

My own (limited feedback) experience is that IE/Mac does a mostly good job if I don't insist on pixel perfection. Where a layout does fail, it usually fails gracefully. That's good enough for me and it's been good enough for my customers—especialy after I've explained why I'm not expending my effort nor spending their dollars.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

serge4
serge4's picture
Offline
Enthusiast
Last seen: 5 years 21 weeks ago
Timezone: GMT-4
Joined: 2005-07-28
Posts: 54
Points: 0

CSS: Efficient Centering of DIV content

Does anyone have any thoughts on what the problem might be?