Different results for div align

Different results for div align (Full Version)

All Forums >> [Web Development] >> Cascading Style Sheets

Message

Starhugger -> Different results for div align (4/15/2006 2:33:46)
Can someone help me understand why I'm getting different results with this, please? When I put <div align="center"> right in the body, the div centers. When I put the following in an external CSS file, it won't center: #shell { align: center; } Then in the body I put <div id="shell">, but it doesn't work. I haven't used it more than once in a file either. I've also tried saying "text-align: center" in the external CSS, but nope. I think I've also tried defining it as a class (e.g., ".shell" and then saying <div class="shell"> ) but that doesn't make it work either. It's just puzzling to me because it seems like it should do the same thing. Yet, it only seems to work if I put the centering attribute directly in-line in the div command. Anyone know why it works this way? Am I stating it wrong in the external CSS? Starhugger

Tailslide -> RE: Different results for div align (4/15/2006 3:57:26)
align="center" is deprecated so that might be what's causing the problems when you try to put it in a stylesheet. Try #shell {text-align:center;} which will work for inline stuff such as text or images.

jaybee -> RE: Different results for div align (4/15/2006 7:07:32)
You could also try #shell {margin: auto;} it depends where the div is in relation to other stuff on the page as to what will work.

Starhugger -> RE: Different results for div align (4/15/2006 9:56:18)
Thanks for replying, Tailslide and jaybee. Okay, this seems to be an IE thang. [>:] It seems to work in FF but not in IE. (So what else is new...) Here's what I've got in the external CSS. I've outlined it in red just to make sure everything in the div is centering, not just the text: div.shell { width: 400px; height: 100px; border: solid red 2px; margin: auto; text-align: center; } The HTML goes like this: <body> <div class="shell"> This is centered. </div> </body> It doesn't seem to matter whether I define shell as a class or an ID. When I include "text-align: center" in the div definition, the text centers inside the box but with the box smushed over at the left in IE. If I put "text-align: center" only as an attribute of the body (which I've read sometimes is supposed to align stuff inside the body), both the text and box are left-aligned in IE. My intention in doing this was to use it as a container for the whole page content. I've used a table for it in the past and I'm trying to break the habit. I'm starting to see why many people say the heck with it and just use tables! But I'm not giving up so easily. Starhugger

jaybee -> RE: Different results for div align (4/15/2006 10:12:04)

Is that all you have in the page? If so it should work. Have you used a doctype? Is there a link I can look at?

OK, I've just tried it and it's working in all the browsers. Here's the full page code with internal styles.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>New Page 1</title>
<style type="text/css">
div.shell {
 width: 400px;
 height: 100px;
 border: solid red 2px;
 margin: auto;
 text-align: center;
 } </style>
</head>

<body>
<div class="shell">
This is centered.
</div>
</body>

</html>

Starhugger -> RE: Different results for div align (4/15/2006 10:30:05)
[&o] [8\|] Duh... All it needed was the DocType. It's usually the last thing I add. Okay, I've learned my lesson... [:D] Thanks jaybee!! Starhugger

jaybee -> RE: Different results for div align (4/15/2006 10:46:43)
[:D] ooops.

Page: [1]

0.0625