View Full Version : Form not centering (and yes, I read the FAQ)

12-03-2005, 09:15 PM
As the thread title says, I read what the forum FAQ says about centering using CSS. I did that, and still can't get my form to center on my page. I was hoping someone could help me figure out why. (FWIW, I'm viewing this through IE6, 1024 x 768 browser resolution.)

Here's a simplified version of the top of my web page:

<title>Contact Me</title>

<link rel="stylesheet" href="styles.css" type="text/css">


<div id="contents">

<div id="line1">
<div id="line1right"></div>
<div id="line1left"></div>
<div id="line2"></div>
<div id="line3"></div>

<div id="container">

<p class="title">Contact Me</p>

<form class="center_it" runat="server">

Here is the relevant CSS I'm using, with bolding on the style definition that is supposed to center my form:

width: 100%;
height: 65px;
top: 0px;
left: 0px;
background-color: #6d977f;

#line1left {
background: url(http://www.techtipscentral.net/images/TechTipsCentralLogo.jpg) no-repeat top left;
height: 65px;

#line1right {
background: url(http://www.techtipscentral.net/images/topright.jpg) no-repeat top right;
width: 132px;
height: 61px;
float: right;

#line2 {
background-color: #aec4b8;
height: 27px;

#line3 {
background: #808080;
height: 1px;

#contents {
background: url(http://www.techtipscentral.net/images/leftpic.jpg) no-repeat 0px 114px;

#container {
margin: 0 20px 20px 185px;

body {
background: url(http://www.techtipscentral.net/images/leftborder.jpg) repeat-y;
font-family: arial;
font-size: small;
margin: 0;
padding: 0;
scrollbar-face-color: #336600;
scrollbar-arrow-color: #ffffff;

html, body, #contents {
min-height: 100%;
width: 100%;
height: 100%;

html>body, html>body #contents {
height: auto;

.center_it {
margin: 0 auto;

The page I'm working with is here (http://www.techtipscentral.net/data/contact.aspx) and my stylesheet is here (http://www.techtipscentral.net/data/styles.css). Any insight you can offer will be much appreciated. Thanks.

12-03-2005, 09:31 PM
If you add a border to the form you'll see why it isn't centering. The form—a block-level element—is taking up the full width of its container, while the inputs inside don't.

You'll need to give the form a smaller width, preferably just over the size of the total width of the labels and inputs. Something like this will work just fine:

form, input {
width: 20em;

12-03-2005, 09:50 PM
margin:auto; doesn't work in IE when its in quirksmode meaning you need a proper doctype for margin:auto; to work.

12-03-2005, 10:19 PM
I had taken the doctype declaration out of my page because it was wreaking havoc on my page's appearance, and I have no idea why. I think it might have something to do with the fact that this is a .NET page. However, a search of the .NET forum (and of Google) has yielded no answers as to why that is.

Anyway, so I've added the doctype to my page. Not only is my form still not centered, but it has lost all its formatting. Any idea why that is? :confused:

12-04-2005, 07:26 AM
Ids shouldn't start with underscores. In order to get your form to center you need to give it a width.

12-04-2005, 07:27 AM
In order to get your form to center you need to give it a width.
What am I, chopped liver? :D:D

12-04-2005, 09:35 AM
Ids shouldn't start with underscores.

That is an ASP.NET thing. The page code itself is exactly as I posted it in post #1. The rendered code puts those underscores there.

In order to get your form to center you need to give it a width.

I tried that, but it didn't have any effect.

I am beginning to think that this problem has more to do with ASP.NET than it does with CSS. I debated whether or not I should start this thread in this forum or in the ASP.NET forum, and after some more research, I think it may have belonged there instead, although I now have some doubts that they could help. One can always hope.

First of all, there is some weirdness going on with the presence or absence of a doctype declaration. Here (http://www.techtipscentral.net/data/contact_with_doctype.aspx) is that page with doctype, and here (http://www.techtipscentral.net/data/contact_without_doctype.aspx) is that same page without it. That's the only difference between the two. (I made a new stylesheet called test-styles.css so I could continue working on this without altering what you can see for this thread.) Comparing the two, the page loses its formatting when a doctype declaration is present and has formatting without it. Of course, the page still isn't centering, but as I said, I'm starting to think that is an ASP.NET problem.

Further fuel to that argument can be found in this article (http://www.developerfusion.co.uk/show/4641/3/), where they discuss how to work around the fact that ASP.NET doesn't validate for a fairly simple web page. That isn't a centering problem in that discussion, but I think it goes a long way in explaining the kind of thing I'm up against. This article is getting way beyond the original discussion here, but it just illustrates why I think this is an ASP.NET problem.

So what do you think, guys? Should I start a new thread over there or ask a moderator to move this one?

12-04-2005, 09:38 AM
When in quirks mode the css is read, when in standards compliant mode the css becomes invalid. This is due to the underscores. If this is an asp thing then maybe you should find out WHY it does this. Its causing most of your problems.

12-04-2005, 09:44 AM
If this is an asp thing then maybe you should find out WHY it does this. Its causing most of your problems.

But that gets back to my question above. Should I start a new thread or ask a moderator to move this one? I don't want to get the forum police after me by making the wrong decision on that. ;)

12-04-2005, 09:56 AM
I think it would be okay to start a new thread and ask why the asp is adding the underscores to the ids and names.

12-05-2005, 02:49 AM
I think it would be okay to start a new thread and ask why the asp is adding the underscores to the ids and names.
The underscores aren't the problem. They're another ASP.NET thing.

I took your advice and started a thread in the ASP.NET forum here (http://www.codingforums.com/showthread.php?t=74060).

12-05-2005, 03:10 AM
Yes the underscores are the problem its why your css isn't being read, ids should NOT start with an underscore. Its in the specs. You need to just find out why the asp is adding the underscores. http://www.w3.org/TR/REC-CSS2/syndata.html#q4

12-06-2005, 12:54 AM
Give a width to .center_it if you aren't in quirks mode margin:auto; will work but if you are in quirks mode then it won't work in IE so you will need to add text-align:center; to the containing element.

12-06-2005, 02:42 AM
OK, text-align:center; gets the form to center when the doctype is present, but that doesn't work without the doctype there, plus the formatting problem that the doctype itself causes. Looks like there's no way to format everything correctly. :(