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 11 of 11
  1. #1
    Regular Coder
    Join Date
    Nov 2005
    Posts
    750
    Thanks
    138
    Thanked 1 Time in 1 Post

    Page alignment issue

    Hello

    I have 4-5 HTML pages on a test server

    http://www.proofreading4students.com/index.html

    and all pages are aligned in the same way: they are all governed by the same external style sheet. Except for one: the contact form. The contact form page is completely left-aligned when it shouldn't be - it should look as the other pages do.

    Even so, this code has been copied and pasted from one of the other pages, so I am not sure where the problem lies. The only difference with the contact form is that is contains ASP to process the form, but that should not interfere with the page layout.

    I have gone through this a couple of times - checking that tags are closed, that the <div></div> tags correspond to what is determined by the CSS style sheet, etc.

    What else should I be checking, please?

    Thank you.

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,749
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Hello SteveH,
    Look at containing .form_settings. It is the same width as parent #content.


    Code:
    .form_settings {
        background: #f00; /*just to show size of element*/
        margin: 15px 0 0;
    }
    Try giving that a width and center it within #content. Like this maybe -
    Code:
    .form_settings {
        margin: 15px auto 0;
        width: 600px;
    }
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    Regular Coder
    Join Date
    Nov 2005
    Posts
    750
    Thanks
    138
    Thanked 1 Time in 1 Post
    Hello Excavator

    I can't seem to get that amendment to make a difference, but I think you are right to point out form_settings because the remaining code on the page is identical to the HTML pages.

    Many thanks for your reply.

    Steve

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,749
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Quote Originally Posted by SteveH View Post
    Hello Excavator

    I can't seem to get that amendment to make a difference, but I think you are right to point out form_settings because the remaining code on the page is identical to the HTML pages.

    Many thanks for your reply.

    Steve
    I see you've updated your site with this bit -
    Code:
    .button_small a
    { color: #000;
      text-shadow: 1px 1px #FFF;
      padding-left: 5px;}
    
    
    
    
    
    
    
    .form_settings { 
    
       margin: 15px auto 0;
       width: 600px;
    }
    
    
    
    
    
    
    
    
    .form_settings p
    { padding: 0 0 4px 0;}
    
    .form_settings span
    { float: left; 
      width: 280px; 
      text-align: left;
    Maybe you just need to refresh your cache to see the changes. Or, maybe you're trying to see this center in IE? You would need a DocType for it to work in that case -
    To center an element you need three things:
    1. a valid DocType
    2. an element with a width
    3. that elements right/left margins set to auto



    ..
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #5
    Regular Coder
    Join Date
    Nov 2005
    Posts
    750
    Thanks
    138
    Thanked 1 Time in 1 Post
    Hello Excavator

    Sorry to be a nuisance.

    In the other Web pages I am using: <!DOCTYPE html> and I can see those pages centered. Yes, I am using IE 9. I have now cleared the History files and Temp Internet files, but that stubborn form page is still not centered, which basically means that something is preventing it from being centered.

    I am just downloading Safari so see if things are different.

    Thanks for your patience....

    Steve

  • #6
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,749
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Quote Originally Posted by SteveH View Post
    but that stubborn form page is still not centered, which basically means that something is preventing it from being centered.
    The page I looked at had something in front of the DocType. DocType declaration needs to be the very first line.

    http://validator.w3.org/check?verbos...ontact_us1.asp
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #7
    Regular Coder
    Join Date
    Nov 2005
    Posts
    750
    Thanks
    138
    Thanked 1 Time in 1 Post
    I experimented with 'Transitional', 'Loose' and 'Strict', but they made no difference, so I have gone back to <!DOCTYPE html> which is what it was originally.

    I can see the page just fine in Safari, but not in IE9.

    I DO have something in front of it namely ASP code and this:

    Code:
    Send the form in ASP
    %>
    
    <font size="2" color="#8AF3C8">Thank you message to the sender
    
    <% =Replace(ContactUs_Body,vbCr,"<br>") %>
    
    </font>
    <% Else %>
    
    
    
    <form action="contact_us1.asp" method="post">
    <input type="hidden" name="Action" value="SendEmail">
    Should I then put <!DOCTYPE html> at the extreme top of the page above all server-side code?

    Thank you.

  • #8
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,749
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Quote Originally Posted by SteveH View Post
    I experimented with 'Transitional', 'Loose' and 'Strict', but they made no difference, so I have gone back to <!DOCTYPE html> which is what it was originally.
    IE needs the DocType declaration on the first line. Move it up there and see margin: 0 auto; center your .form_settings.

    You should double check to see where your ASP code belongs.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    SteveH (03-26-2013)

  • #9
    Regular Coder
    Join Date
    Nov 2005
    Posts
    750
    Thanks
    138
    Thanked 1 Time in 1 Post
    Hello Excavator

    If I move <!DOCTYPE html> to the very top of the page as in:

    Code:
    <!DOCTYPE html>
    
    <%@ LANGUAGE="VBSCRIPT" %>
    <% option explicit %>
    I get a '500 - Internal server error', but if I do this:

    Code:
    <%@ LANGUAGE="VBSCRIPT" %>
    <% option explicit %>
    
    <!DOCTYPE html>
    the page gets centered.

    There seems to be a difference in views. ASP people insist that

    Code:
    <%@ LANGUAGE="VBSCRIPT" %>
    <% option explicit %>
    goes at the very top, while HTML/CSS people insist the <!DOCTYPE goes at the top.

    Anyway, I am hoping it is resolved now. The page was centered when I looked at it earlier today.

    Many thanks for all your time and patience yesterday. I am grateful.

    Steve

    PS: I bet you're cold up there!

  • #10
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,749
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    ASP people insist that
    Code:
    <%@ LANGUAGE="VBSCRIPT" %>
    <% option explicit %>
    goes at the very top, while HTML/CSS people insist the <!DOCTYPE goes at the top
    Yes, I knew that was coming though I don't know ASP at all. I'm glad you sorted it out though! What does the validator say about it now?

    It is cool here, about 0 right now. I just stoked the fire. We were having spring but it just dumped a foot of snow on us.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #11
    Regular Coder
    Join Date
    Nov 2005
    Posts
    750
    Thanks
    138
    Thanked 1 Time in 1 Post
    I am quite happy with the validation. Some errors are tiny or the validator is just wrong. For example, error:

    <meta name="description" content="website description" />
    This "meta" tag is not in the "head" section....
    when it plainly is:


    Code:
    <head>
      <title>bayingwolf Productions - contact us</title>
      <meta name="description" content="website description" />
      <meta name="keywords" content="website keywords, website keywords" />
      <meta http-equiv="content-type" content="text/html; charset=windows-1252" />
      <link rel="stylesheet" type="text/css" href="css/style.css" />
      <!-- modernizr enables HTML5 elements and feature detects -->
      <script type="text/javascript" src="js/modernizr-1.5.min.js"></script>
    </head>
    It's 1 degree here.

    Thanks again.

    Steve


  •  

    Posting Permissions

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