Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 14 of 14
  1. #1
    $object->toCD-R(LP); vinyl-junkie's Avatar
    Join Date
    Jun 2003
    Posts
    3,092
    Thanks
    2
    Thanked 23 Times in 23 Posts

    Form not centering (and yes, I read the FAQ)

    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:

    Code:
    <html> 
    <head>
    <title>Contact Me</title>
    
    <link rel="stylesheet" href="styles.css" type="text/css">
    </head>
    
    <body>
    
    <div id="contents">
    
    	<div id="line1">
    		<div id="line1right"></div>
    		<div id="line1left"></div>
    	</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:

    Code:
    #line1{
    	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-track-color:#cccccc;
    	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 and my stylesheet is here. Any insight you can offer will be much appreciated. Thanks.
    Music Around The World - Collecting tips, trade
    and want lists, album reviews, & more
    SNAP to it!

  • #2
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    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:
    Code:
    form, input {
     width: 20em;
    }
    Last edited by rmedek; 12-03-2005 at 08:34 PM.

  • #3
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    margin:auto; doesn't work in IE when its in quirksmode meaning you need a proper doctype for margin:auto; to work.

  • #4
    $object->toCD-R(LP); vinyl-junkie's Avatar
    Join Date
    Jun 2003
    Posts
    3,092
    Thanks
    2
    Thanked 23 Times in 23 Posts
    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?
    Music Around The World - Collecting tips, trade
    and want lists, album reviews, & more
    SNAP to it!

  • #5
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Ids shouldn't start with underscores. In order to get your form to center you need to give it a width.

  • #6
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    Quote Originally Posted by _Aerospace_Eng_
    In order to get your form to center you need to give it a width.
    What am I, chopped liver?

  • #7
    $object->toCD-R(LP); vinyl-junkie's Avatar
    Join Date
    Jun 2003
    Posts
    3,092
    Thanks
    2
    Thanked 23 Times in 23 Posts
    Quote Originally Posted by _Aerospace_Eng_
    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 is that page with doctype, and here 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, 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?
    Music Around The World - Collecting tips, trade
    and want lists, album reviews, & more
    SNAP to it!

  • #8
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    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.

  • #9
    $object->toCD-R(LP); vinyl-junkie's Avatar
    Join Date
    Jun 2003
    Posts
    3,092
    Thanks
    2
    Thanked 23 Times in 23 Posts
    Quote Originally Posted by _Aerospace_Eng_
    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.
    Music Around The World - Collecting tips, trade
    and want lists, album reviews, & more
    SNAP to it!

  • #10
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    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.

  • #11
    $object->toCD-R(LP); vinyl-junkie's Avatar
    Join Date
    Jun 2003
    Posts
    3,092
    Thanks
    2
    Thanked 23 Times in 23 Posts
    Quote Originally Posted by _Aerospace_Eng_
    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.
    Music Around The World - Collecting tips, trade
    and want lists, album reviews, & more
    SNAP to it!

  • #12
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    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
    Last edited by _Aerospace_Eng_; 12-05-2005 at 02:15 AM.

  • #13
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    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.

  • #14
    $object->toCD-R(LP); vinyl-junkie's Avatar
    Join Date
    Jun 2003
    Posts
    3,092
    Thanks
    2
    Thanked 23 Times in 23 Posts
    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.
    Music Around The World - Collecting tips, trade
    and want lists, album reviews, & more
    SNAP to it!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •