SitePoint Sponsor |
|
User Tag List
Results 1 to 12 of 12
-
Oct 10, 2007, 06:07 #1
- 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 {
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>
-
Oct 10, 2007, 06:57 #2
- 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%; } 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>
Last edited by DaveWoods; Oct 11, 2007 at 00:52. Reason: Edited per Dan's comment.
-
Oct 10, 2007, 19:35 #3
- 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.01Save the Internet - Use Opera | May my mother rest in peace: 1943-2009
Dan Schulz - Design Team Advisor | Follow me on Twitter
SitePoint References: HTML CSS JavaScript | Become A Guru
WordPress SEO Checklist | What WordPress Plugins Do You Use?
Web Standards Curriculum | Image Free Equal Height Columns
-
Oct 11, 2007, 00:53 #4
- 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
-
Oct 11, 2007, 02:06 #5
- 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).
-
Oct 11, 2007, 02:33 #6
- 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.
Save the Internet - Use Opera | May my mother rest in peace: 1943-2009
Dan Schulz - Design Team Advisor | Follow me on Twitter
SitePoint References: HTML CSS JavaScript | Become A Guru
WordPress SEO Checklist | What WordPress Plugins Do You Use?
Web Standards Curriculum | Image Free Equal Height Columns
-
Oct 11, 2007, 02:38 #7
- 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
-
Oct 11, 2007, 05:25 #8
- 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> ?
-
Oct 11, 2007, 05:37 #9
- 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.
-
Oct 11, 2007, 06:17 #10
- 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>
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>
-
Oct 11, 2007, 06:32 #11
- 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 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.
-
Oct 11, 2007, 06:36 #12
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 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