CSS2 Alignment Problem

Lucutus · 21-10-2002 1:36pm #1

lo all,

This is one for you cross browser junkies.

I have an XHTML page which is to conform to XHTML Strict Standards.

I have an external CSS2 file to specify color and layout etc.

I can get the body content to align to the center of the page in MS IE, but not in Netscape/Mozilla/Opera.

How does one achieve such a thing?

Remember, the behaviour I want is fine in IE6.

XHTML 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" xml:lang="EN-ie">
<head>
	<title>A CSS2 Alignment Test</title>
	<link type="text/css" href="css/test.css" rel="stylesheet" />
</head>
<body>
<table>
	<tr>
		<td>
		 <p>Here's some content!</p>
		</td>
	</tr>
</table>
</body>
</html>

CSS2 Code:


body
	{
		font-family: Arial, Helvetica, Verdana; 
		color: #000000;
		background-color: #FFFFFF;
		text-align: center;
	}

Anyone?

Luc

Rev Hellfire · 21-10-2002 1:52pm

try displaying the whole page as a bitmap and you'll not have browser problems anymore.

If you need help displaying a bitmap just ask.

Bard · 21-10-2002 1:56pm

Originally posted by Lucutus

Remember, the behaviour I want is fine in IE6.

No, not really... The behaviour you see in IE 6 is apparently due to a bug in that browser. This:

text-align: center ;

does not align anything but inline level content to the center. The correct method per CSS is to set both the left- and right margins to "auto".

This works in Opera, Mozilla, NS 7 and Konqueror. For IE 6 you must take care to get it into some sort of mode which you may be able to decipher from: here.

Hope this helps.

Lucutus · 21-10-2002 1:59pm

Thank you for your reply RevHellfire.

However, display the 'content' as bitmap is not an option in this particular instance.

Thanks again for your valued input, a "Spin Goodybag" is winging it's way to you as I post this.

Luc

logic1 · 21-10-2002 1:59pm

Originally posted by Lucutus
<td>
		 <p>Here's some content!</p>
		</td>
Luc

Doesn't look like you've applied the CSS class body to any text Luc?

Just because you've named the CSS Class body doesn't mean it applies to the body of the document.

Try:

td>
		 <p class="body">Here's some content!</p>
		</td>

.logic.

Lucutus · 21-10-2002 2:01pm

Ah Bard,

I should have known it would be you, as you seem to be one of the few with clue in this area, Unlike Rev there

I'll have a read and get back in 10 mins

Thanks

Luc

Bard · 21-10-2002 2:04pm

Probably obvious to you Luc, but putting in a class parameter in the <p> tag as Logic suggested shouldn't be necessary as your stylesheet applies the required style to the <body> tag itself, which is the top container for the page.

Lucutus · 21-10-2002 2:08pm

Yes, that was obvious enough.

Yet, logic still recieves a goodybag for effort.

I can't seem to get the auto thing you speak of working tho,

	margin-left: auto;
	margin-right: auto;

doesn't seem to wanna work in any browser. /me boggles

continuing to read that page tho.

Luc

Bard · 21-10-2002 2:13pm

I'll have a root around and see what I can find out... haven't done much with CSS lately - apart from a couple of small projects, I've been more or less out of the web dev scene for a while.

Lucutus · 21-10-2002 2:26pm

Ok,

This thread has helped me write this css2 code which seems to work in all recent browsers.

body
	{
		font-family: Arial, helvetica, Verdana; 
		color: #000000;
		background-color: #FFFFFF;
		text-align: center;
	}
body table
	{ 
		margin-left: auto; 
		margin-right: auto;
	}

Thanks for the assistance gentlemen

Luc

afdarcy · 21-10-2002 2:44pm

Originally posted by Lucutus
I can't seem to get the auto thing you speak of working tho,
	margin-left: auto;
	margin-right: auto;	
doesn't seem to wanna work in any browser. /me boggles

Have you tried a container div, rather than applying the style to the body? Something like:

<div class="container">

<p>Your text here</p>

</div>

Then the CSS:

div.container{
margin-left: auto;
margin-right: auto;
width: 70%;
border: 1px #000 solid;
}

That should work, but I haven't tried anything other than IE6. You need to specify the width, otherwise the margin-left/right: auto trick won't work. Don't think you can specify the width of the body though.

Some good CSS links:

CSS-Edge
glish.com
Real World Style

AD

Bard · 21-10-2002 2:46pm

Ah, apparently you need to apply margin-left: auto and margin-right: auto to the table itself, not the body,

i.e.:

table {
	margin-left: auto;
	margin-right: auto
}

/... any help?

Do I get a goodie bag too?

[edit]: ah, just noticed your last post here Luc... oh well...

glad to see you got it sorted!

logic1 · 21-10-2002 2:52pm

Originally posted by Bard
Probably obvious to you Luc, but putting in a class parameter in the <p> tag as Logic suggested shouldn't be necessary as your stylesheet applies the required style to the <body> tag itself, which is the top container for the page.

:rolleyes: I'll try to tone down my trolls for you in future Brad. Please try to keep up.

.logic.

Bard · 21-10-2002 3:42pm

Originally posted by logic1
:rolleyes: I'll try to tone down my trolls for you in future Brad. Please try to keep up.

.logic.

No problem, ligoc.

CSS2 Alignment Problem

Comments