Why doesn't this container center?

M

Mike Silva

Here's a little test page that should, according to my understanding
and based on what I have read in various places, center the container
box horizontally. It does so on IE, but on Firefox and Safari the box
is on the left. Can somebody explain the problem? Thanks.

<!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">
<title>Test</title>
<style type="text/css">
<!--

body {
margin: 0;
padding: 0;
text-align: center;
}
#container {
width: 600px;
margin 0 auto;
text-align: left;
border: thin solid #000;
}

-->
</style>
</head>

<body>
<div id="container">
Content for id container Goes Here
</div>
</body>
</html>
 
M

Mike Silva

Mike Silva kirjoitti seuraavasti:


Are we missing something? ':' perhaps?

Validating css often reveals errors a human eye can't find.

Well I'll be... I had used the Dreamweaver "validate" and it didn't
catch that. I just tried it again to confirm. Many thanks, now I
know not to count on Dreamweaver "validate".
 
T

Travis Newbury

Well I'll be...  I had used the Dreamweaver "validate" and it didn't
catch that.  I just tried it again to confirm.  Many thanks, now I
know not to count on Dreamweaver "validate".

Dreamweaver CS3 and CS4 catch the error just fine:

"Line 18 Error parsing styles" and lo-and-behold, line 18 is "margin
0 auto;"
 
M

Mike Silva

Dreamweaver CS3 and CS4 catch the error just fine:

"Line 18 Error parsing styles"  and lo-and-behold, line 18 is "margin
0 auto;"

Very odd. I'm using Dreamweaver CS4 Windows, and when I choose
Validate->Markup it reports no errors or warnings found. I just
looked at the Validator settings in preferences and didn't see
anything obviously wrong.

OK, played around a bit more and found it gives the error you report
in "Browser Compatibility" rather than "Validate". Can't say I would
have figured that out on my own. So it seems that validation on
Dreamweave is (at least) a two-step process.
 
D

dorayme

Travis Newbury said:
Dreamweaver CS3 and CS4 catch the error just fine:

"Line 18 Error parsing styles" and lo-and-behold, line 18 is "margin
0 auto;"

Ah Travis, you are like a gunslinger, with DWs in each holster, ready to
quick draw at all times! <g>
 
R

richard

Here's a little test page that should, according to my understanding
and based on what I have read in various places, center the container
box horizontally. It does so on IE, but on Firefox and Safari the box
is on the left. Can somebody explain the problem? Thanks.

<!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">
<title>Test</title>
<style type="text/css">
<!--

body {
margin: 0;
padding: 0;
text-align: center;
}
#container {
width: 600px;
margin 0 auto;
text-align: left;
border: thin solid #000;
}

-->
</style>
</head>

<body>
<div id="container">
Content for id container Goes Here
</div>
</body>
</html>

I believe you are expecting text-align:center to center the division
as well. It does not. It only acts on text.
try giving the division a fixed width, then setting margin-left and
margin-right to auto.
 
R

richard

Dreamweaver CS3 and CS4 catch the error just fine:

"Line 18 Error parsing styles" and lo-and-behold, line 18 is "margin
0 auto;"

No shit sherlock?
Gee a simple typo that you could have fixed easily.
 
R

richard

Here's a little test page that should, according to my understanding
and based on what I have read in various places, center the container
box horizontally. It does so on IE, but on Firefox and Safari the box
is on the left. Can somebody explain the problem? Thanks.
Try this version

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<!-- Created on: 2/26/2009 -->
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=windows-1252">
<title></title>
<meta name="description" content="">
<meta name="keywords" content="">
<style type="text/css">
.test { width:2in; height:2in; background:#ffff7d; margin:auto;}
</style>
</head>
<body>

<div class="test">

sample

</div>

</body>
</html>
 
J

John Hosking

richard said:
Try this version

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<!-- Created on: 2/26/2009 -->
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=windows-1252">
<title></title>
<meta name="description" content="">
<meta name="keywords" content="">
<style type="text/css">
.test { width:2in; height:2in; background:#ffff7d; margin:auto;}
</style>
</head>
<body>

<div class="test">

sample

</div>

</body>
</html>

I am now convinced you're just trolling.
 
R

richard

I am now convinced you're just trolling.


Pardon moi?
Before I put this together I did do research. Everything I see on the
web indicates this is the proper method.
Kindly put foot in mouth and bite hard.
 
D

dorayme

richard said:
I believe you are expecting text-align:center to center the division
as well. It does not. It only acts on text

More than text. All inline stuff.
 
D

dorayme

John Hosking said:
I am now convinced you're just trolling.

What convinced you in particular? The transitional doctype? The use of
inches, bothering about height?
 
M

Mike Silva

No shit sherlock?
Gee a simple typo that you could have fixed easily.

Yes, it was very easy to fix. Not so easy for me to spot, for
whatever reason. Especially given that I thought Dreamweaver was
giving the code a thumbs-up. So I learned two lessons on this one.
 
R

richard

What convinced you in particular? The transitional doctype? The use of
inches, bothering about height?


Well I am totally convinced that most people who post to this group
have no brains, let alone clues, on how to change things to their
liking.
I mean like, sheesh, a simple typo can't possibly be corrected before
tossing it into the validator?

Now why do I use inches instead of pixels or ems?
When you buy space for an ad in a newspaper do they sell that space by
pixels or ems? No they do not. They sell by inches. Then worry about
what can fit, and how it will fit, into that space.

A boundary defined in inches will always be displayed exactly the same
regardless of the screen resolution. I am well aware that there are
those here who will take that presentation to the extreme and see at
what point it fails. While 95% or more of general users never bother
considering changing the text size.

The size of a pixel or em is a variable, an inch is a constant.
 
R

richard

hello. what does this insruction say to do?

I don't see "text-align:center" in the markup, but rather
"text-align:left" so I don't think that is the expectation.


Look in the "body" that is where he attempts to align things in the
center which will not do what he wants.
 
J

John Hosking

dorayme said:
What convinced you in particular? The transitional doctype? The use of
inches, bothering about height?

All of the above, plus the weird "Created on: 2/26/2009", the orphaned
background color, and what seemed a deliberate unwillingness to use the
OP's content as a starting point for comparison or elucidation.
Richard's post seemed to show a single-minded determination to provide
something as *different* from what the OP wanted or needed as possible.

All of the above heaped on a dirty plate which is dropped on the table
in front of the customer, while the waiter grunts a surly, "try this
version," by way of provocative explanation for serving salisbury steak
instead of the T-bone and baked potato the customer was expecting.
 
D

dorayme

richard said:
Now why do I use inches instead of pixels or ems?

You can't believe how excited I am in anticipation. said:
When you buy space for an ad in a newspaper do they sell that space by
pixels or ems? No they do not. They sell by inches. Then worry about
what can fit, and how it will fit, into that space.

A boundary defined in inches will always be displayed exactly the same
regardless of the screen resolution.

On my left screen your yellow box is more than 2" and on my right
screen, it is less than 2". Am I taking presentation to extremes in
saying or noticing this. I only had to reach to my right for my ruler,
honest.

I am well aware that there are
those here who will take that presentation to the extreme and see at
what point it fails. While 95% or more of general users never bother
considering changing the text size.

Not sure text size is quite relevant yet. Perhaps you are thinking ahead
in your defence?
The size of a pixel or em is a variable, an inch is a constant.

The size of a pixel is only variable in the sense that when you go to
the fruit shop, you get a choice of sizes of watermelons. But once you
have bought one and are lugging it home, it is a constant. Bit like a
screen really, when you set it up, a pixel is a fixed size and hard to
change without fiddling about and you would not do this in the easy on
the fly way one does for text sizing.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

Forum statistics

Threads
473,744
Messages
2,569,484
Members
44,903
Latest member
orderPeak8CBDGummies

Latest Threads

Top