http://validator.w3.org/check?uri=ht...le.com%2Fss%2F
What can I do to make my page function the same, but validate as XHTML Strict?
Printable View
http://validator.w3.org/check?uri=ht...le.com%2Fss%2F
What can I do to make my page function the same, but validate as XHTML Strict?
Use css instead of the align attribute.
See my faq sticky thread on how to center things with css.
If that makes no sense then shout :)
paul
It made sense but caused problems...
Do you have an instant messenger i can contact you on?
Edit: Didn't want to make anotherp ost.
Here is your sticky idea implimented: http://www.shockedstyle.com/ss/ See how messed up it is in FireFox?
PaulCode:<!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>.::SHOCKEDSTYLE::. The Next Generation Of Webdesign</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style typer="text/css">
body {
background-color: #DEDEDE;
margin: 0px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
}
img {
border: 0px;
}
div.header {
width: 660px;
height: 30px;
text-align: center;
border-top: 5px solid #B00000;
border-bottom: 1px solid #8A8A8A;
background-color: #FFFFFF;
padding: 15px 0px 15px 0px;
}
div.bg {
width: 730px;
height: 100%;
background-image: url(img/bg.gif);
background-repeat: repeat-y;
padding-top: 30px;
}
.content {
height: 100px;
width: 100%;
background-color: #FFFFFF;
}
/* Begin Navigation */
a.navi:link {
font-weight: bold;
color: #333333;
text-decoration: none;
border-left: 1px solid #777777;
padding: 0px 10px 0px 10px;
}
a.navi:visited {
font-weight: bold;
color: #333333;
text-decoration: none;
border-left: 1px solid #777777;
padding: 0px 10px 0px 10px;
}
a.navi:hover {
font-weight: bold;
color: #B00000;
text-decoration: none;
border-left: 1px solid #777777;
padding: 0px 10px 0px 10px;
}
a.navir:link {
font-weight: bold;
color: #333333;
text-decoration: none;
border-left: 1px solid #777777;
border-right: 1px solid #777777;
padding: 0px 10px 0px 10px;
}
a.navir:visited {
font-weight: bold;
color: #333333;
text-decoration: none;
border-left: 1px solid #777777;
border-right: 1px solid #777777;
padding: 0px 10px 0px 10px;
}
a.navir:hover {
font-weight: bold;
color: #B00000;
text-decoration: none;
border-left: 1px solid #777777;
border-right: 1px solid #777777;
padding: 0px 10px 0px 10px;
}
/* End Navigation */
div.header a, div.header img {vertical-align:middle}
body {text-align:center}/* center for ie5 and 5.5.*/
#wrapper {
width:730px;
margin-left:auto;/* center for compliant browsers*/
margin-right:auto;/* center for compliant browsers*/
}
</style>
</head>
<body>
<div id="wrapper">
<div class="bg">
<div class="header"> <a href="index.htm" class="navi">HOME</a> <a href="index.htm" class="navi">PORTFOLIO</a>
<a href="index.htm" class="navi">ARTICLES</a> <a href="index.htm" class="navi">TUTORIALS</a>
<a href="index.htm" class="navi">FORUM</a> <a href="index.htm" class="navir">CONTACT</a>
<img src="http://www.wv-online.nl/shockedstyle/img/logo.gif" alt="ShockedStyle" title="ShockedStyle" />
</div>
</div>
<p> <a href="http://validator.w3.org/check?uri=referer"><img
src="http://www.w3.org/Icons/valid-xhtml10"
alt="Valid XHTML 1.0!" height="31" width="88" class="validate"/></a>
<a href="http://jigsaw.w3.org/css-validator/check/referer"><img
src="http://www.w3schools.com/images/vcss.gif"
alt="Valid CSS2!" height="31" width="88" class="validate"/></a> </p>
</div>
</body>
</html>
Once again, view www.shockedstyle.com/ss with FireFox. Check my CSS and code and tell me why.
Hold on - I'll just grab your page and try it locally !
Thanks!
Your image is bigger than the content so you need to center the content inside the image holder.Code:div.header {
width: 660px;
height: 30px;
text-align: center;
border-top: 5px solid #B00000;
border-bottom: 1px solid #8A8A8A;
background-color: #FFFFFF;
padding: 15px 0px 15px 0px;
margin-left:auto;
margin-right:auto;
}
Paul
You might be better off repating the background on the body if you want it always to be full length.
Sometimes Ie will round the image down by a pixel when the screen is resized so you have to be careful if content is tight to the images edge. If this is a problem then you can use the previous method.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>.::SHOCKEDSTYLE::. The Next Generation Of Webdesign</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style typer="text/css">
html,body {margin:0;padding:0}
body {
background-color: #DEDEDE;
margin: 0px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
background: url(http://www.shockedstyle.com/ss/img/bg.gif) repeat-y center top;
}
body {text-align:center}/* center for ie5 and 5.5.*/
#wrapper {
width:660px;
margin-left:auto;/* center for compliant browsers*/
margin-right:auto;/* center for compliant browsers*/
padding-top: 30px;
}
img {
border: 0px;
}
div.header {
width: 660px;
height: 30px;
text-align: center;
border-top: 5px solid #B00000;
border-bottom: 1px solid #8A8A8A;
background-color: #FFFFFF;
padding: 15px 0px 15px 0px;
}
.content {
height: 100px;
background-color: #FFFFFF;
}
/* Begin Navigation */
a.navi:link {
font-weight: bold;
color: #333333;
text-decoration: none;
border-left: 1px solid #777777;
padding: 0px 10px 0px 10px;
}
a.navi:visited {
font-weight: bold;
color: #333333;
text-decoration: none;
border-left: 1px solid #777777;
padding: 0px 10px 0px 10px;
}
a.navi:hover {
font-weight: bold;
color: #B00000;
text-decoration: none;
border-left: 1px solid #777777;
padding: 0px 10px 0px 10px;
}
a.navir:link {
font-weight: bold;
color: #333333;
text-decoration: none;
border-left: 1px solid #777777;
border-right: 1px solid #777777;
padding: 0px 10px 0px 10px;
}
a.navir:visited {
font-weight: bold;
color: #333333;
text-decoration: none;
border-left: 1px solid #777777;
border-right: 1px solid #777777;
padding: 0px 10px 0px 10px;
}
a.navir:hover {
font-weight: bold;
color: #B00000;
text-decoration: none;
border-left: 1px solid #777777;
border-right: 1px solid #777777;
padding: 0px 10px 0px 10px;
}
/* End Navigation */
div.header a, div.header img {vertical-align:middle}
</style>
</head>
<body>
<div id="wrapper">
<div class="header"> <a href="index.htm" class="navi">HOME</a> <a href="index.htm" class="navi">PORTFOLIO</a>
<a href="index.htm" class="navi">ARTICLES</a> <a href="index.htm" class="navi">TUTORIALS</a>
<a href="index.htm" class="navi">FORUM</a> <a href="index.htm" class="navir">CONTACT</a>
<img src="http://www.wv-online.nl/shockedstyle/img/logo.gif" alt="ShockedStyle" title="ShockedStyle" />
</div>
<p> <a href="http://validator.w3.org/check?uri=referer"><img
src="http://www.w3.org/Icons/valid-xhtml10"
alt="Valid XHTML 1.0!" height="31" width="88" class="validate"/></a>
<a href="http://jigsaw.w3.org/css-validator/check/referer"><img
src="http://www.w3schools.com/images/vcss.gif"
alt="Valid CSS2!" height="31" width="88" class="validate"/></a> </p>
</div>
</body>
</html>
Paul
http://www.shockedstyle.com/ss/
Hoyl crap are things messed up now. Test in FF.
wrong link I think!
My code above works fine in firefox!
Well, I redid it a little, what do you think?
www.shockedstyle.com/ss
Honestly :) I think my last version was better and gives you 100% height.Quote:
Well, I redid it a little, what do you think?
But its your choice and some peole prefer left-aligned pages ;)
Paul