Re: vert and hor centering text in <div>

Tom,
Thanks for taking the time to reply and your code example that worked fine in centering the 'page' <div> between the browser window edges. Eventually I tracked down why my html code did not work. It was the DOCTYPE line. Experimentation showed the following:
(BTW I'm using IE6.0.2900 and FireFox {Mozilla/5.0Gecko/20041107 Firefox/1.0})

FireFox always centers the top level 'page' <div>, even without a DOCTYPE line at all.

IE does if the DOCTYPE is (the ones I checked):

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd";>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/strict.dtd";>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/frameset.dtd";>

and perhaps surprisingly:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/zzxya.dtd";>

The following also work:
<!DOCTYPE http://>
<!DOCTYPE>
<!DOCTYPE JOHNS_ML NOTYETWRITTEN "-the quick brown fox" "http://absolutely any text here">

The last line also works. WHAT is IE looking for?

The following does not work unless followed by "http://"; (quotes not needed)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

Further mindless searching showed this is the minimum to STOP the centering working:
<!DOCTYPE " HTML 4.01 Transitional//EN"> /* the leading space is needed! */

So it looks like it is recognising the page as html 4.01 transitional without any quallifying dtd that breaks the auto centering of a <div> in the IE browser window.

UNFORTUNATELY using:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd";>

in a framed page with height="100%" tables then broke! The table size minimised rather than expanding to fill the v height of the window. Just can't win.

Anyway thanks for the inspiration,
Best wishes,
John



tgscott wrote:
1. Horizontal centering a <div> in browser window.

The current trend seems to be to place page content in a fixed width area in the middle of the
browser window. How is this achieved? If I use a top level <div> then I can place it with CSS
attribute 'left:', but this is a fixed offset. Is it possible to have a <div> centered in the
browser window?

2. Verticle centering in <div>

I have a simple link bar at the top of my page with, as you might guess, links to other pages. The
<div> is given a fixed hight to accomodate a background gif. How can CSS be used to vertically
center the text? CSS attribute 'verticle-align:' only seems to center one piece of text against
adjacent text.


Try something like this...
Tom

<!doctype html public "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd";>
<html>
<head>
<title>Home</title>
<style type="text/css">
body{margin:20px}
html {height: 100%;}
#page{position:relative; margin:0 auto; /* these are just examples
--> */ padding:10px; width:760px; height:410px; text-align:left;
background-color:#eee;}
#nav ul {list-style:none; margin: 0 0 0 0; padding:0;}
#nav ul li {display:inline; /* these are just examples --> */
margin:0; padding:10px 10px 10px 10px; background-image:
url(/images/foo.png);}
#nav ul li.selected a {text-decoration:none; color:black;}
#content{padding:10px;}
</style>
</head>
<body>
<div id="page">
<div id="nav">
<ul>
<li class="selected"><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>
<div id="content">
<h1>Homepage</h1>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
diam nonumy eirmod tempor invidunt ut labore. Duis autem vel eum iriure
dolor in hendrerit in vulputate velit esse molestie consequat, vel
illum dolore eu feugiat nulla facilisis.</p>
</div>
</div>
</body>
</html>

.

Relevant Pages

  • Re: Help website veering to the left what to do?
    ... their page on a fixed width web page that is wider than the browser window, ... then you would have to scroll horizontally, ... Publisher has no built-in capability of doing either. ... best you can do is simulate centering. ...
    (microsoft.public.publisher)
  • IE inconsistent scrollbar behaviour
    ... Failing to get a fluid layout only applying CSS, I use Javascript to adapt the second DIV's height so that all three DIVs fit in the browser window. ... Usually scrollbars appear on the second DIV. ...
    (comp.infosystems.www.authoring.stylesheets)
  • Re: vert and hor centering text in

    ... browser window. ... If I use a top level <div> then I can place it with CSS ... Duis autem vel eum iriure ...
    (comp.infosystems.www.authoring.stylesheets)
  • Re: Centering Pub 2003 and 2007 pages. PING dtsclothing, Spike, Jo, br
    ... but just because it is centered in your browser window ... wider default width of 984 pixels for a page to Pub 2007, ... centering your page to whatever size browser window the viewer is using. ... Each of your *.htm files requires ...
    (microsoft.public.publisher.webdesign)
  • Re: newbie: css position of IFRAME
    ... the full height of the browser window, height is set to 100% but it doesn't ... >> I want the iframe to fill the entire space the DIV it is ... with no position property set this is meaningless. ...
    (alt.html)