Skip to content
View in the app

A better way to browse. Learn more.
Web Designer Forum

A full-screen app on your home screen with push notifications, badges and more.

To install this app on iOS and iPadOS
  1. Tap the Share icon in Safari
  2. Scroll the menu and tap Add to Home Screen.
  3. Tap Add in the top-right corner.
To install this app on Android
  1. Tap the 3-dot menu (⋮) in the top-right corner of the browser.
  2. Tap Add to Home screen or Install app.
  3. Confirm by tapping Install.

Pages not validating - Please can you help

slooshy
in Frontend

Featured Replies

I've just tried to validate my pages and its thrown back a lot of errors. I know this is a bit cheeky but can someone have a look at it for me as I don't understand what the validator throws up.

 

Here is my code:

<link rel="stylesheet" type="text/css" style1.css" />

<link rel="stylesheet" href="CSS/style1.css" type="text/css"/>

</head>

<body>

<div id="header">

</div>

<div id="container">

<div id="left"><ul id="nav">

<li><a href="home.html">HomePage</a></li>

<li><a href="about.html">About Lady Elspeth</a></li>

<li><a href="sissymanor.html">About The Sissy Manor</a></li>

<li><a href="ContactUS.html">Contact Us</a></li>

<li><a href="Testimonials.html">Testimonials</a></li>

<li><a href="Pricing.html">Tributes</a></li>

</ul>

<p>

<img src="images/pinkboy.jpg" width="154" height="300"/>

</p>

</div>

<div id="center">

<h2><p><span class="first">W</span>elcome to the Sissy Manor</p></h2>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor

incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud

exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure

dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit

anim id est laborum</p>

<p><img src="images/bow.gif" width="58" heigth="70"/></p> PLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do

 

eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco

 

laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore

 

eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id

 

est laborum

</p>

<p><img src="images/bow.gif" width="58" heigth="70"/></p>

</div>

<div id="right"><img src="images/splash.gif" width="220" height="115" alt "Sarcastic Lady"/> </div>

<div class="clearer"> </div>

</div>

<div id="footer"><p> © Lady Elspeth 2008 </p>

 

 

</p>

</div>

</body>

</html>

</body>

</html>

body {

font-family: Verdana, Arial, Helvetica, sans-serif;

 

font-size: 11px;

color: #333333;

text-align: center;

margin: 0px;

padding-top: 20px;

padding-right: 0px;

padding-bottom: 20px;

padding-left: 0px;

}

#wrapper {

width: 956px;

padding: 10px;

margin-top: 0px;

margin-right: auto;

margin-bottom: 0px;

margin-left: auto;

height: auto;

text-align: left;

border: 1px solid #DDDDDD;

}

#header {

height: 150px;

background-image: url(../images/logo.gif);

background-repeat: no-repeat;

background-position: center;

margin: 0px;

padding: 0px;

width: auto;

background-color: #ffffff;

 

 

}

#container {

padding: 0px;

margin-top: 10px;

margin-right: 0px;

margin-bottom: 0px;

margin-left: 0px;

height: 1%;

width: auto;

}

#left {

margin: 0px;

width: 160px;

padding-top: 10px;

padding-right: 20px;

padding-bottom: 10px;

padding-left: 20px;

float: left;

}

 

#nav {

border: 2px solid pink;

margin: 0px;

padding: 10px 0px 10px 0px;

list-style-image: none;

list-style-type: none;

background-color:#ccccff;

}

#nav li {

margin: 0px;

padding: 0px;

display: block;

background-position: 0px 50%;

}

#nav li a:link, #nav li a:visited, #nav li a:active {

color: #d80090;

text-decoration: none;

display: block;

margin: 0px;

padding-top: 3px;

padding-right: 15px;

padding-bottom: 3px;

padding-left: 15px;

width: 130px;

}

#nav li a:hover {

color: #2b00ff;

background-colour:#ffffff;

text-decoration: none;

 

 

}

#center {

text-align: justify;

color: #d80090;

height: auto;

width: 504px;

padding-top: 10px;

padding-right: 20px;

padding-bottom: 10px;

padding-left: 20px;

float: left;

margin-top: 0px;

margin-right: 0px;

margin-bottom: 0px;

margin-left: 6px;

line-height: 1.8em;

 

}

 

 

h2 {text-align: left;

font-size: 16px;

margin: 0px;

padding: 0px;

color: #cc99ff;

 

}

 

.first{

font-family:Georgia, Serif;

font-size:2.1em;

font-weight:bold;

}

 

 

#right {

background-image: url(../images/sissy.gif);

background-repeat: no-repeat;

padding-top: 10px;

padding-right: 20px;

padding-bottom: 10px;

padding-left: 20px;

height: 400px;

width: 160px;

float: left;

margin-top: 0px;

margin-right: 0px;

margin-bottom: 0px;

margin-left: 6px;

}

 

 

.clearer {

font-size: 0px;

line-height: 0px;

display: block;

margin: 0px;

padding: 0px;

clear: both;

height: 0px;

width: auto;

}

#footer {

margin-top: 10px;

margin-right: 0px;

margin-bottom: 0px;

margin-left: 0px;

text-align: center;

padding-top: 15px;

padding-right: 0px;

padding-bottom: 15px;

padding-left: 0px;

background-color: #f4ccff;

}

#footer p {

color: ##999999;

margin-top: 0px;

margin-right: auto;

margin-bottom: 0px;

margin-left: auto;

padding: 0px;

}

#footer a:link, #footer a:visited, #footer a:active {

color: #999999;

text-decoration: none;

}

#footer a:hover {

color: #CCCCCC;

text-decoration: none;

}

 

Many thanks,

 

Slooshy

Hi

 

Shouldnt really do this but its Saturday, lovely sunshine and a beer.

 

<!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>Untitled Document</title>

<link rel="stylesheet" href="CSS/style1.css" type="text/css"/>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>

<body>

<div id="header">
</div>

<div id="container">

<div id="left">

<ul id="nav">
<li><a href="home.html">HomePage</a></li>
<li><a href="about.html">About Lady Elspeth</a></li>
<li><a href="sissymanor.html">About The Sissy Manor</a></li>
<li><a href="ContactUS.html">Contact Us</a></li>
<li><a href="Testimonials.html">Testimonials</a></li>
<li><a href="Pricing.html">Tributes</a></li>
</ul>

<p>
<img src="images/pinkboy.jpg" alt="me"/>
</p>
</div>
<div id="center">
<h2><span class="first">W</span>elcome to the Sissy Manor</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit
anim id est laborum</p>
<p><img src="images/bow.gif" alt="me"/> PLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do

eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco

laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore

eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id

est laborum
</p>
<p><img src="images/bow.gif" alt="me"/></p>
</div>

<div id="right"><img src="images/splash.gif" alt="Lady"/> </div>
<div class="clearer">

</div>

</div>

<div id="footer"><p> © Lady Elspeth 2008 </p>
</div>

</body>

</html>

 

Your css still has one error but I didnt know what shade of pink you wanted, when you run it through the validator you will see what I mean.

 

body {
font-family: Verdana, Arial, Helvetica, sans-serif;

font-size: 11px;
color: #333333;
text-align: center;
margin: 0px;
padding-top: 20px;
padding-right: 0px;
padding-bottom: 20px;
padding-left: 0px;
}
#wrapper {
width: 956px;
padding: 10px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
height: auto;
text-align: left;
border: 1px solid #DDDDDD;
}
#header {
height: 150px;
background-image: url(../images/logo.gif);
background-repeat: no-repeat;
background-position: center;
margin: 0px;
padding: 0px;
width: auto;
background-color: #ffffff;


}
#container {
padding: 0px;
margin-top: 10px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
height: 1%;
width: auto;
}
#left {
margin: 0px;
width: 160px;
padding-top: 10px;
padding-right: 20px;
padding-bottom: 10px;
padding-left: 20px;
float: left;
}

#nav {
border: 2px solid pink;
margin: 0px;
padding: 10px 0px 10px 0px;
list-style-image: none;
list-style-type: none;
background-color:#ccccff;
}
#nav li {
margin: 0px;
padding: 0px;
display: block;
background-position: 0px 50%;
}
#nav li a:link, #nav li a:visited, #nav li a:active {
color: #d80090;
text-decoration: none;
display: block;
margin: 0px;
padding-top: 3px;
padding-right: 15px;
padding-bottom: 3px;
padding-left: 15px;
width: 130px;
}
#nav li a:hover {
color: #2b00ff;
background-color:#ffffff;
text-decoration: none;


}
#center {
text-align: justify;
color: #d80090;
height: auto;
width: 504px;
padding-top: 10px;
padding-right: 20px;
padding-bottom: 10px;
padding-left: 20px;
float: left;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 6px;
line-height: 1.8em;

}


h2 {text-align: left;
font-size: 16px;
margin: 0px;
padding: 0px;
color: #cc99ff;

}

.first{
font-family:Georgia, Serif;
font-size:2.1em;
font-weight:bold;
}


#right {
background-image: url(../images/sissy.gif);
background-repeat: no-repeat;
padding-top: 10px;
padding-right: 20px;
padding-bottom: 10px;
padding-left: 20px;
height: 400px;
width: 160px;
float: left;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 6px;
}


.clearer {
font-size: 0px;
line-height: 0px;
display: block;
margin: 0px;
padding: 0px;
clear: both;
height: 0px;
width: auto;
}
#footer {
margin-top: 10px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
text-align: center;
padding-top: 15px;
padding-right: 0px;
padding-bottom: 15px;
padding-left: 0px;
background-color: #f4ccff;
}
#footer p {
color: #999999;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
padding: 0px;
}
#footer a:link, #footer a:visited, #footer a:active {
color: #999999;
text-decoration: none;
}
#footer a:hover {
color: #CCCCCC;
text-decoration: none;
}

 

If you compare the code You posted against mine you will see the errors and how they were corrected. Off to get another beer now.

 

Cheers

 

Pat

Create an account or sign in to comment
Go to topic listing

Account

Navigation

Search

Search

Configure browser push notifications
Chrome (Android)
  1. Tap the lock icon next to the address bar.
  2. Tap Permissions → Notifications.
  3. Adjust your preference.
Chrome (Desktop)
  1. Click the padlock icon in the address bar.
  2. Select Site settings.
  3. Find Notifications and adjust your preference.