Stylesheet Help?

Posted by: foxtrot_xray

Stylesheet Help? - 24/04/2004 07:57

Hey guys.. This is probably a real dumb issue, and something I know already, but my brain's not working.

I'm trying to use styles, 'k, and want everything in my page centered. Easy enough:
<div style="text-align: center">
stuff goes here
</div>
Not a problem. Now, IN that main div, I got a paragraph of text. I want the paragraph of text to only be 75% of the screen (parent div) wide, so..
<div style="text-align: center">
one set of stuff
<div style="width: 75%">
more stuff goes here
</div>
</div>

The issue? This displays fine in IE. However, Firefox/Mozilla, the inside div is *NOT* centered. It's thrown to the left. (Default). Since I know those browsers are less tolerant of errors in styles and such, I figure I'm missing something, or doing something wrong.
Is there a way to specify, in the second div's style that I want that whole div to be centered, that's "legal" CSS?

Muchas Thank yous!
Me.
Posted by: wfaulk

Re: Stylesheet Help? - 24/04/2004 10:24

I haven't tested to see if this is valid or even works, but have you tried also specifying "text-align:center" in the width div?
Posted by: foxtrot_xray

Re: Stylesheet Help? - 24/04/2004 10:44

Yes. Does nothing. Well, correction. It DOES center the text IN the div, but does not center the div itself.. Now, I can put the TAG "align" in the div, like:
<div style="..." align="center">...
But I'm not 100% sure that's 'legal' with the latest standard..

Me.
Posted by: wfaulk

Re: Stylesheet Help? - 24/04/2004 11:16

May I suggest http://validator.w3.org/?
Posted by: Cybjorg

Re: Stylesheet Help? - 24/04/2004 14:26

Try this: 

body   { text-align: center; margin: 0; padding: 0 }

#container    { margin: 10px auto 0; padding: 10px 0; width: 400px; border: solid 2px #000 }

p   { text-align: center; margin-right: auto; margin-left: auto; width: 75% }



It works great in the following situation (in both IE and Firefox): 

<html>

<head>

<meta http-equiv="content-type" content="text/html;charset=iso-8859-1" />

<title>Test</title>

<style type="text/css" title="currentStyle">@import url(test.css);</style>

</head>

<body>

<div id="container">

<p>This paragraph should only be 75% of the parent container.  The parent container should be 400 pixels wide and should be centered in the middle of the page.</p>

</div>

</body>

</html>


This, of course, uses an external stylesheet, but the same results can be had with an internal one.