SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    SitePoint Addict
    Join Date
    Oct 2006
    Posts
    216
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    not working: IE problem too far right and horizontal center

    I want to horizontally center "Hello welcome to mysite". Horizontal centering is not working.

    Footer is lined up in a way such that it's out of wack in IE 6, I have to scroll right past the defined width of 950px, more like 9500px, to get to link "about, contact"?

    I also have attached the my.html file.

    PHP Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"
    >

    <
    html xmlns="http://www.w3.org/1999/xhtml">

    <
    head>
        <
    style type="text/css">

    #container-page {
      
    margin0 auto;
      
    width950px;
      
    background#fff;
      /*text-align: left;*/
      
    text-aligncenter;
      
    positionrelative;
      
    min-height100%; /* For Modern Browsers */
      
    heightauto !important/* For Modern Browsers */
      
    height100%; /* For IE */
    }

    #container-head {
      
    text-alignright;    
      
    background#fff;
    }

    #container-foot {
      /*text-align: right;*/
      
    width100%;
      
    background#ffffff;
      
    positionabsolute;
      
    bottom!important;
      
    bottom: -1px/* For Certain IE widths */
      
    height40px;
    }

    #foot {
      
    text-alignright;
      
    padding0 1em;
      
    line-height40px;
      
    /*text-align: left;*/
    }

    #content {
      
    positionrelative/* Needed for Safari */
      
    marginauto/* Takes care of horizontal alignment in standards compliant browsers */
      
    text-alignleft;
      
    width260px;
      
    height200px;
      
    background-color#fff;
      
    }

    #main-nav {
      
    text-alignright;
      
    padding0 1em;
    }
        </
    style>

    </
    head>

    <
    body>
         <
    div id="container-page"
            <
    div id="container-head">
                
                <
    div id="main-nav">
                        <
    a href="http://www.mysite.com/login/"Login </a>
                </
    div> <!-- End of main-nav -->
                
           </
    div>  <!-- End of container-head -->
                <
    div id="content">
                    <
    p>
                        
    Hello welcome to my site 
                    
    </p>
                </
    div>

           <
    div id="container-foot">
             <
    div id="foot">
                <
    a href="http://www.mysite.com/about/">about</a
                <
    a href="http://www.mysite.com/contact/">contact</a
                    
                
            </
    div> <!-- End of foot -->
        </
    div> <!--End of container-foot -->

     </
    div>  <!--  End of container-page -->
    </
    body>

    </
    html
    Attached Files Attached Files

  2. #2
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You're over complicating things a little as there's no need for the hacks or relative/absolute positioning to achieve a layout like that.

    You're also using an XHTML 1.1 doctype which you don't need so go for the HTML4.01 doctype unless you really do need to deliver XHTML (in which case use XHTML 1.0).

    Try something like this

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Demo</title>
    <style type="text/css">
    * {
        padding: 0;
        margin: 0;    
    }
    body {
        padding: 10px;
        width: 950px;
        margin: 0 auto;
        font-family: verdana, arial, helvetica, sans-serif;
        font-size: 73&#37;;
    }
    h1 {
        font-size: 100%;
        text-align: center;
        padding-bottom: 5px;
    }
    p {
        padding-bottom: 0.7em;    
    }
    #container {
        background-color: #B4CDB3;
        padding: 5px;
    }
    #mainnav {
        text-align: right;
        width: 100%;
        background-color: #CDB3B3;
    }
    #mainnav li {
        display: inline;
    }
    #maincontent {
        width: 260px;
        margin: 5px auto;
        background-color: #B3C4CD;
    }
    #footer {
        text-align: right;
        width: 100%;
        background-color: #CDB3B3;
    }
    #footer li {
        display: inline;
        padding-left: 5px;
    }
    
    </style>
    </head>
    <body>
    <div id="container">
        <ul id="mainnav">
            <li><a href="http://www.mysite.com/login/"> Login </a></li>
        </ul>
        <div id="maincontent">
            <h1>Hello, Welcome to my site</h1>
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In dictum lectus fermentum erat. Pellentesque eu felis. Nullam vitae sapien eget velit tincidunt convallis. Donec neque. Mauris non mi.</p>
            <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cras vitae magna. Integer quis quam nec sapien interdum consectetuer. Quisque dolor. Donec luctus ultrices elit. Suspendisse justo. Nunc mauris neque, porta at, viverra quis, feugiat id, sapien. Integer et metus.</p>
        </div>
        <ul id="footer">
            <li><a href="http://www.mysite.com/about/">about</a></li>
              <li><a href="http://www.mysite.com/contact/">contact</a></li>
        </ul>
    </div>
    </body>
    </html>
    I've added background colours so you can see what's happening for each element but feel free to remove these.
    Last edited by DaveWoods; Oct 11, 2007 at 00:52. Reason: Edited per Dan's comment.

  3. #3
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Off Topic:

    Dave, you should remove the empty space and the forward slash from that META tag if you're using HTML 4.01

  4. #4
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Off Topic:


    Well spotted, I'd used the initial code to start from and then updated it and got it to validate before I spotted the XHTML1.1 doctype so made that change and forgot to validate before posting

    All fixed now though, thanks

  5. #5
    SitePoint Addict
    Join Date
    Jun 2007
    Location
    Sydney, Australia
    Posts
    253
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Off Topic:


    Recently I decided to start using XHTML 1.0 over HTML 4.01 for the simple reason that the w3 validator is stricker for XHTML. For example, sometimes I may have forgotten to end a paragraph or something. the HTML validator will not pick up on this (and if the paragraph has margin or something, it would keep the margin on the following element).

  6. #6
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It's not more strict than HTML. The type of DOCTYPE you use (Transitional or Strict) is what matters, not which flavor of (X)HTML you use.

  7. #7
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The HTML validator will pick up missing </p> tags whether you use XHTML strict, transitional or HTML strict, transitional.

    People tend to use XHTML because they perceive it as being the next step on from HTML (including myself a few years ago) but developers are slowly switching back as they see that it has no real advantages currently.

    There are no problems using an XHTML doctype though if you want to, my point was that the original poster was using XHTML1.1 and not XHTML1.0

  8. #8
    SitePoint Addict
    Join Date
    Jun 2007
    Location
    Sydney, Australia
    Posts
    253
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes I understand. What I was saying is that the w3 validator when validating an HTML Strict doctype, compared to an XHTML Strict doctype. Am i wrong in thinking that using HTML 4.01 Strict, the validator will not pick up a missing </p> ?

  9. #9
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes you are wrong, any syntax problems like that will be highlighted no matter which doctype.

    The main difference is that transitional will allow deprecated code whilst strict won't, but both of these apply whether you use HTML or XHTML doctypes.

  10. #10
    SitePoint Addict
    Join Date
    Jun 2007
    Location
    Sydney, Australia
    Posts
    253
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I am afraid you are wrong , I just checked.

    The following validates:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>Hello</title>
    </head>
    <body>
    <h1>Hello</h1>
    <p>hello
    </body>
    </html>
    While the following does not:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Hello</title>
    </head>
    <body>
    <h1>Hello</h1>
    <p>hello
    </body>
    </html>

  11. #11
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Wow, learn something new everyday.

    I can only presume that the <p> tag performs some kind of self-close when the next element starts and therefore an HTML doctype allows it.

    For example

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    <title>Hello</title>
    <style type="text/css">
    p {
        color: #C00;    
    }
    </style>
    </head>
    <body>
    <h1>Hello</h1>
    <p>hello
    <div>Hello</div>
    </body>
    </html>
    I'd usually expect the <p> styling to pass onto the following <div> as there's no closing tag which suggest to me that it is actually being closed.

    I presume that the <p> is an isolated incident that this occurs though as I tried this with other elements and the validator reported an error even with an HTML doctype.

    The reason that the XHTML doctype will return an error is because ALL tags require closing <img><br> etc and therefore it picks up on there being an open <p>

    Presumably you could have <p /> and it would validate although obviously wouldn't make semantic sense to have an empty paragraph.

  12. #12
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    In html some end tags are optional and indeed some start tags are also optional.

    http://www.w3.org/TR/html4/intro/sgmltut.html#h-3.2.1
    http://virtuelvis.com/archives/2004/10/tags-elements


Bookmarks

Posting Permissions

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