Help with validation..

**Alex** · Aug 20, 2004, 06:16

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?

**Paul O'B** · Aug 20, 2004, 06:28

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

**Alex** · Aug 20, 2004, 06:32

It made sense but caused problems...

**Alex** · Aug 20, 2004, 06:32

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?

**Paul O'B** · Aug 20, 2004, 06:36

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">
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> 
	  &nbsp; &nbsp; &nbsp; <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>

Paul

**Alex** · Aug 20, 2004, 06:40

Once again, view www.shockedstyle.com/ss with FireFox. Check my CSS and code and tell me why.

**Paul O'B** · Aug 20, 2004, 06:41

Hold on - I'll just grab your page and try it locally !

**Alex** · Aug 20, 2004, 06:45

Thanks!

**Paul O'B** · Aug 20, 2004, 06:45

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;
}

Your image is bigger than the content so you need to center the content inside the image holder.

Paul

**Paul O'B** · Aug 20, 2004, 06:52

You might be better off repating the background on the body if you want it always to be full length.

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> 
	  &nbsp; &nbsp; &nbsp; <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>

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.

Paul

**Alex** · Aug 20, 2004, 06:57

http://www.shockedstyle.com/ss/

Hoyl crap are things messed up now. Test in FF.

**Paul O'B** · Aug 20, 2004, 07:03

wrong link I think!

My code above works fine in firefox!

**Alex** · Aug 20, 2004, 07:27

Well, I redid it a little, what do you think?

www.shockedstyle.com/ss

**Paul O'B** · Aug 20, 2004, 07:30

Well, I redid it a little, what do you think?

Honestly

I think my last version was better and gives you 100% height.

But its your choice and some peole prefer left-aligned pages

Paul

The SitePoint Forums have moved.

User Tag List

Thread: Help with validation..

Thread Tools

Display

Help with validation..

Bookmarks

Bookmarks

Posting Permissions