not working: IE problem too far right and horizontal center

**johnCash** · Oct 10, 2007, 06:07

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 {

  margin: 0 auto;

  width: 950px;

  background: #fff;

  /*text-align: left;*/

  text-align: center;

  position: relative;

  min-height: 100%; /* For Modern Browsers */

  height: auto !important; /* For Modern Browsers */

  height: 100%; /* For IE */

}



#container-head {

  text-align: right;    

  background: #fff;

}



#container-foot {

  /*text-align: right;*/

  width: 100%;

  background: #ffffff;

  position: absolute;

  bottom: 0 !important;

  bottom: -1px; /* For Certain IE widths */

  height: 40px;

}



#foot {

  text-align: right;

  padding: 0 1em;

  line-height: 40px;

  /*text-align: left;*/

}



#content {

  position: relative; /* Needed for Safari */

  margin: auto; /* Takes care of horizontal alignment in standards compliant browsers */

  text-align: left;

  width: 260px;

  height: 200px;

  background-color: #fff;

  }



#main-nav {

  text-align: right;

  padding: 0 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>

**DaveWoods** · Oct 10, 2007, 06:57

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.

**Dan Schulz** · Oct 10, 2007, 19:35

Off Topic:

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

**DaveWoods** · Oct 11, 2007, 00:53

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

**znebojsa** · Oct 11, 2007, 02:06

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).

**Dan Schulz** · Oct 11, 2007, 02:33

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.

**DaveWoods** · Oct 11, 2007, 02:38

The HTML validator will pick up missing 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

**znebojsa** · Oct 11, 2007, 05:25

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 ?

**DaveWoods** · Oct 11, 2007, 05:37

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.

**znebojsa** · Oct 11, 2007, 06:17

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>

**DaveWoods** · Oct 11, 2007, 06:32

Wow, learn something new everyday.

I can only presume that the 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 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 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> etc and therefore it picks up on there being an open 

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

**Paul O'B** · Oct 11, 2007, 06:36

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

The SitePoint Forums have moved.

User Tag List

Thread: not working: IE problem too far right and horizontal center

Thread Tools

Display

not working: IE problem too far right and horizontal center

Bookmarks

Bookmarks

Posting Permissions