Is it OK to use <p3> and </p3> instead of <p class="style3"> and </p>

Hi,

Can someone explain to me what I should be using:

<p3> and </p3>

or

<p class=“style3”> and </p>

Also my code is not working properly. Do you know why? Style3 below looks fine in Dreamweaver but does not show up properly online. Even with 30px it just shows it about size 12px! Is this a conflict in CSS coding? How do I solve the problem?

p3
{
font-size: 18px;
text-align:left;
}

.style3{
font-family: Arial, Helvetica, sans-serif;
font-size: 30px;
color: #000000;
}

Thanks,

Matt.

Try copying and pasting your HTML script to the following free Html validation service:

and also validate your CSS:

http://jigsaw.w3.org/css-validator/validator

Can you supply a link to your page or paste the script.

I tried your CSS and was most surprised to discover that p3 was acceptable?????

OK - Thanks.

As I said my style3 is not working. I’ve looked in to the problem and found using FireBug in Firefox that rather than using ‘style3’ it is using the CSS for the ‘body’. Why is it using body when it should be using style 3?

How can I get around this problem because I am using <p> </p> tags which I DO want using the body CSS. But I do not want ‘style3’ using the ‘body’ CSS.

How can I solve this CSS problem?

Matt.

Can you supply a link to your page or paste the script.

My body and style3 are:

body {
font-family: Arial, Helvetica, sans-serif;
font-size:87.5%;
}

.style3{
font-family: Arial, Helvetica, sans-serif;
font-size: 30px;
color: #000000;
}

Why is it using body when I want it to use style3?

Matt.

The CSS script looks OK and should not cause any problems.

Please supply a link to the page or copy and paste the full HTML page and your style sheet.

Here you are…the text in question is "Places beginning with the letter B - Speed camera locations " - it should be size 30px.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Red light and traffic speed cameras explained and how they work</title>
<meta name="description" content="Traffic light cameras are triggered either by using ground loops that are cut into the road surface or using radar technology. When using loops, as the traffic lights turn red the system becomes active, any vehicle passing over the sensor in the road after this time is then photographed. Radar based traffic light cameras work in the same manner as fixed Gatso speed cameras.">
<link href="../../css/styles.css" rel="stylesheet" type="text/css" />

</head>

<body>

<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_GB/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

<div id='container'>
<div id='topmenu'><div id='linkstop'><div id='link'>
<ul>
   <li><a href='../../terms-and-conditions.htm'>Terms and Condtions</a></li>
   <li><a href='../../delivery-information-speedcamerasuk.htm'>Delivery</a></li>
   <li><a href='../../speedcamerasuk-about.htm'>About Us</a></li>
   <li><a href='../../speedcamerasuk-contact.htm'>Contact Us</a></li>
      </ul>
</div>
</div>
</div>

<div id='topofpage'>
<div id='logo'><img src="../../images/navigation/speedcamerasuk-logo.gif" width="115" height="120" /> </div>

<div id='adverttop'>
<p></p><script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- SCUKv3 -->
<ins class="adsbygoogle"
     style="display:inline-block;width:728px;height:90px"
     data-ad-client="ca-pub-0889991974194840"
     data-ad-slot="8618719741"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
</div>



<div id='navigation'>
<div id='cssmenu'>
 <ul>
   <li><a href='../../index.htm'>Home</a></li>
   <li><a href='../../speed-camera-database.htm'>Speed Camera Database</a>
 <ul>
     <li><a href='../east-england.htm'>East of England</a></li>
     <li><a href='../east-midlands.htm'>East Midlands</a></li>
     <li><a href='../greater-london.htm'>Greater London</a></li>
     <li><a href='../north-east-england.htm'>North East England</a></li>
     <li><a href='../north-west-england.htm'>North West England</a></li>
     <li><a href='../northern-ireland.htm'>Northern Ireland</a></li>
     <li><a href='../scotland.htm'>Scotland</a></li>
     <li><a href='../south-east-england.htm'>South East England</a></li>
     <li><a href='../south-west-england.htm'>South West England</a></li>
     <li><a href='../wales.htm'>Wales</a></li>
     <li><a href='../west-midlands.htm'>West Midlands</a></li>
     <li><a href='../yorkshire.htm'>Yorkshire</a></li>
     <li><a href='../../speed-camera-location.htm'>Report new camera</a></li>
     <li><a href='../../speed-camera-database-guide.htm'>User Guide</a></li>
  </ul>
    </li>
    <li><a href='../../speed-camera-types.htm'>Camera Types</a>
  <ul>
     <li><a href='../../gatso.htm'>Gatso</a></li>
     <li><a href='../../truvelo-d-cam.htm'>New Truvelo</a></li>
     <li><a href='../../truvelo.htm'>Truvelo</a></li>
     <li><a href='../../mobile-speed-camera.htm'>Mobile</a></li>
     <li><a href='../../specs.htm'>SPECS</a></li>
     <li><a href='../../traffic-light-camera.htm'>Traffic Light</a></li>
     <li><a href='../../speedcurb.htm'>SpeedCurb</a></li>
     <li><a href='../../peek.htm'>Peek</a></li>
     <li><a href='../../ds2.htm'>DS2</a></li>
     <li><a href='../../watchman.htm'>Watchman</a></li>
     <li><a href='../../speedspike-speed-camera.htm'>SpeedSpike</a></li>
  </ul>
     </li>   
     <li><a href='../../speeding-ticket.htm'>Speeding Fines</a>
  <ul>
     <li><a href='../../speeding-ticket.htm'>Speeding Tickets</a></li>
     <li><a href='../../motoring-insurance-premiums.htm'>Car Insurance</a></li>
  </ul>
   </li>
     <li><a href='../../speed-camera-detector.htm'>Detector Guide</a>
  <ul>
     <li><a href='../../speed-camera-detector-guide.htm'>Speed Camera Detectors</a></li>
     <li><a href='../../radar-laser-detector.htm'>Radar and Laser Detectors</a></li>
     <li><a href='../../sat-nav-detector-guide.htm'>Sat Navs with speed cameras</a></li>
     <li><a href='../../smartphone-speed-camera-app-guide.htm'>Smartphone Apps</a></li>
  </ul>
   </li>
     <li><a href='../../shop.htm'>Shop</a>
  <ul>
     <li><a href='../../speed-camera-detector-shop.htm'>Speed Camera Detectors</a></li>
     <li><a href='../../sat-nav-shop.htm'>Sat Navs with speed cameras</a></li>
  </ul>
   </li>   
   <li><a href='../../members.htm'>Members</a>
  <ul>
     <li><a href='../../new-members.htm'>New Members</a></li>
     <li><a href='../../current-members.htm'>Current Members</a></li>
  </ul>
   </li>
   <li><a href='../../speed-camera-news.htm'>News</a>   </li>
</ul>
</div>
</div>
<div id='divcontainer'>
<div id='div1'>




<div id='databasemain'>
<h1>Traffic Light Speed/Camera explained</h1>
<p>Welcome to the speed camera database for Cambridgeshire and Peterborough - included in our database are the locations of both fixed and mobile speed cameras across the county.</p>
<p>All of the speed camera locations below have been sent into us by motorists. If you know of a speed camera location that doesn't appear below, please click here to report it.</p>
<p>The safety camera partnership (Police and local authority) website that covers this area is Cambridgeshire Safety Camera Partnership and is a sub group of the Cambridgeshire and Peterborough Road Safety Partnership. Their aim is to reduce casualties by targeting speeding.</p>
<p></p></div> 

<div id='databasemain'>
<p>Listings in alphabetical order for speed camera locations in Cambridgeshire and Peterborough</p>
<p>A B C D E F G H I J K L M N O P Q R S T U V W X Y Z. </p>
<p></p>
</div> 

<div id='homepage'>
  <p3>
  <img class="left" src="../../images/camera-database/20mph-speed-limit.gif" width="62" height="62" /><img class="left" src="../../images/camera-database/gatso-speed-camera.gif" width="66" height="62" />Peterborough - Goldhay Way
  </p3>
</div> 
<div id='homepage'>
<p3>
<img class="left" src="../../images/camera-database/20mph-speed-limit.gif" width="62" height="62" /><img class="left" src="../../images/camera-database/gatso-speed-camera.gif" width="66" height="62" />Barton A603  - Goldhay Way
</p3>
</div>
<div id='homepage'>
<p3>
<img class="left" src="../../images/camera-database/20mph-speed-limit.gif" width="62" height="62" /><img class="left" src="../../images/camera-database/gatso-speed-camera.gif" width="66" height="62" />Barton A603  - 
</p3>
</div>
<div id='homepage'>
<p3>
<img class="left" src="../../images/camera-database/20mph-speed-limit.gif" width="62" height="62" /><img class="left" src="../../images/camera-database/gatso-speed-camera.gif" width="66" height="62" />Barton A603  - Goldhay Way
</p3>
</div>
<div id='homepage'>
<p3>
<img class="left" src="../../images/camera-database/20mph-speed-limit.gif" width="62" height="62" /><img class="left" src="../../images/camera-database/gatso-speed-camera.gif" width="66" height="62" />Barton A603  - Goldhay Way
</p3>
</div>

<div id='divider'>
<p></p><p class='style3'><center>
Places beginning with the letter B - Speed camera locations
</center></p><p></p>
</div>

<div id='homepage'>
<p3>
<img class="left" src="../../images/camera-database/20mph-speed-limit.gif" width="62" height="62" /><img class="left" src="../../images/camera-database/gatso-speed-camera.gif" width="66" height="62" />Barton A603  - Goldhay Way
</p3>
</div>
<div id='homepage'>
<p3>
<img class="left" src="../../images/camera-database/20mph-speed-limit.gif" width="62" height="62" /><img class="left" src="../../images/camera-database/gatso-speed-camera.gif" width="66" height="62" />Barton A603  - Goldhay Way
</p3>
</div>

</div>
<div id='div2'>
<p></p><img src="../../images/side/speed-camera-detector-shop.jpg" width="300" height="230" />
  <p></p>
  <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- SCUKsidenav -->
<ins class="adsbygoogle"
     style="display:inline-block;width:300px;height:250px"
     data-ad-client="ca-pub-0889991974194840"
     data-ad-slot="2836039939"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<p></p>
<iframe width="300" height="169" src="//www.youtube.com/embed/5SclBSMn-AY" frameborder="0" allowfullscreen></iframe>
<p></p>
<div class="fb-like-box" data-href="https://www.facebook.com/SpeedCamerasUK " data-width="300" data-colorscheme="light" data-show-faces="true" data-header="true" data-stream="false" data-show-border="true"></div>
<p></p>
<!-- Place this tag where you want the widget to render. -->
<div class="g-page" data-href="//plus.google.com/118085000225419367133" data-layout="landscape" data-showtagline="false" data-showcoverphoto="false" data-rel="publisher"></div>

<!-- Place this tag after the last widget tag. -->
<script type="text/javascript">
  window.___gcfg = {lang: 'en-GB'};

  (function() {
    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
    po.src = 'https://apis.google.com/js/platform.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
  })();
</script>
</div>
</div>


<div id='footer'>

<div id='speedcamerasuk'>
<p>Speed Cameras UK</p>
<div id='footlink'>
<ul>
<li><a href="../../speedcamerasuk-about.htm">About Us</a></li>
<li><a href="../../speedcamerasuk-contact.htm">Contact Us</a></li>
<li><a href="../../terms-and-conditions.htm">Terms and Conditions</a></li>
<li><a href="../../advertisers.htm">Advertising</a></li>
</ul>
</div>
</div>
<div id='speedcamerasuk'>
<p>Shop</p>
<div id='footlink'>
<ul>
<li><a href="../../speed-camera-detector-shop.htm">Speed Trap Detectors</a></li>
<li><a href="../../sat-nav-shop.htm">Sat Navs with speed cameras</a></li>
<li><a href="../../cookies.htm">Cookies</a></li>
</ul>
</div
></div>
<div id='speedcamerasuk'>
<p>Site Maps</p>
<div id='footlink'>
<ul>
<li><a href="../../sitemap.htm">Site Map</a></li>
<li><a href="../../sitemap.xml">XML Site Map</a></li>
<li><a href="../../privacy-policy.htm">Privacy Policy</a></li>
<li><a href="../../terms-use.htm">Terms of Use</a></li>
</ul>
</div>
</div>
<div id='speedcamerasuk'>
<p>Social Media</p>
<div id='footlink'>
<ul>
<li><a href="http://www.facebook.com/SpeedCamerasUK" target="_blank">Facebook</a></li>
<li><a href="http://www.youtube.com/user/SpeedCameras" target="_blank">YouTube</a></li>
<li><a href="https://twitter.com/SpeedCamerasUK" target="_blank">Twitter</a></li>
<li><a href="https://plus.google.com/b/118085000225419367133/+Speedcamerasuk" target="_blank">Google +</a></li>
</ul>
</div>
</div>

</div>
<div id='copyright'>
<p></p>
<p2>&copy; Copyright <a href="../../index.htm">SpeedCamerasUK.com</a> 2000-2014</p2>
</div>
<div class="clear"></div>
</div>







</body>
</html>



h1{font-size:20px;font-family:Arial;font-weight:500;color: #000000;}
h2{font-size:20px;font-family:Arial;font-weight:500;color: #000000;}
h3{font-size:20px;font-family:Arial;font-weight:500;color: #000000;}
h4{font-size:20px;font-family:Arial;font-weight:500;color: #000000;}
h5{font-size:20px;font-family:Arial;font-weight:500;color: #000000;}
h6{font-size:20px;font-family:Arial;font-weight:500;color: #000000;}

h1, h2, h3, h4, h5, h6{
  margin-top:20px;
  margin-bottom:10px;
}


button {
	font: 14px "Trebuchet MS", sans-serif;

}
.button {
	padding: 8px 16px;
display:inline-block;
text-decoration:none;
border-radius:3px;
background-color: #ccc;

}
.button-primary {
	background:#DBDBDB;
	color:white;
}
.button-primary:hover {
	background:lightslategrey;
	color:#fff;
}


a:link{
color: #0099ff;
text-decoration: none;
}
a:visited{ 
text-decoration: none;
color: #0099ff;
}
a:hover{
color: #0099ff;
text-decoration:underline;
}
a:active{
text-decoration: none;
color: #0099ff;
}

#cssmenu {
  border: none;
  border: 0px;
  margin: 0px;
  padding: 0px;
  font: 67.5% Helvetica;
  font-size: 15px;
  font-weight: bold;
  width: 975px;
}
#cssmenu ul {
  background: #0099ff;
  height: 40px;
  list-style: none;
  margin: 0;
  padding: 0;
}
#cssmenu li {
  float: left;
  padding: 0px;
}
#cssmenu li a {
  background: #0099ff  url(../images/navigation/line.gif) bottom right no-repeat;
  display: block;
  font-weight: normal;
  line-height: 40px;
  margin: 0px;
  padding: 0px 18px;
  text-align: center;
  text-decoration: none;
}
#cssmenu > ul > li > a {
  color: white;
}
#cssmenu ul ul a {
  color: white;
}
#cssmenu li > a:hover,
#cssmenu ul li:hover > a {
  background: #003399;
  color: #FFFFFF;
  text-decoration: none;
}
#cssmenu li ul {
  background: #0099ff;
  display: none;
  height: auto;
  padding: 0px;
  margin: 0px;
  border: 0px;
  position: absolute;
  width: 190px;
  z-index: 200;

}
#cssmenu li:hover ul {
  display: block;
}
#cssmenu li li {

  display: block;
  float: none;
  margin: 0px;
  padding: 0px;
  width: 190px;
}
#cssmenu li:hover li a {
  background: none;
}
#cssmenu li ul a {
  display: block;
  height: 40px;
  font-size: 12px;
  font-style: normal;
  margin: 0px;
  padding: 0px 10px 0px 15px;
  text-align: left;
}
#cssmenu li ul a:hover,
#cssmenu li ul li:hover > a {
  background: #003399;
  border: 0px;
  color: #ffffff;
  text-decoration: underline;
}
#cssmenu p {
  clear: left;
}


#topmenu {
overflow:hidden;
width: 970px;
float: left;
background-color:#DBF2FA;
}


#link{
font: 80% Arial;
font-size:14px;
}
#link ul
{
list-style-type:none;
margin:0;
padding:0;

}
#link li
{
float:left;
padding:10px;
}
#link a:link,a:visited
{
display:block;
color:black;
background-color:none;
text-align:center;

text-decoration:none;
}
#link a:hover,a:active
{
background-color:none;
text-decoration: underline;
}


#linkstop
{
float:right;
width:410px;
}

#topofpage {
overflow:hidden;
width: 969px;
float: left;
background-color:#DBF2FA;

}

#logo
{
width: 235px;
float: left;
}

#adverttop
{
width: 730px;
float: right;
}

#container {
	width:975px;
      margin:0 auto;
      padding:5px;
      border:1px solid #cccccc;
      background:#ffffff;
	  
	   }
	   
#divcontainer {
overflow:hidden;
width: 970px;
float: left;
}

#div1 {
width: 630px;
float: left;
}

#div2 {
width: 305px;
float: right;
}

#database{
width: 628px;
float: left;
}

#database1{
width: 240px;
float: left;
margin: 0px 0px 0px 30px;
}

#database2{
width: 350px;
float: right;
}

#databasemain{
width: 620px;
float: left;
}
	
#homepage
{
width: 300px;
float: left;
margin: 0px 0px 0px 10px;
}

#divider
{
width: 600px;
float: left;
}
 
body {
  font-family: Arial, Helvetica, sans-serif;
  font-size:87.5%;
  background:url(../images/background/gatso-speed-camera.jpg) no-repeat fixed 50% 0;
  }

p2
{
font-size: 12px;
text-align:left;
}

p3
{
font-size: 18px;
text-align:left;
}

.style3{
font-family: Arial, Helvetica, sans-serif;
font-size: 30px;
color: #000000;
}
	
#navigation
{  
width: 974px;
float: left;
}

#cameratype
{
width:630px;
float:left;
}

#location
{
width: 275px;
height:275px;
float: left;
border:1px solid #0099ff;
margin:10px 0px 10px 10px;
padding:10px;
}




#footer {
overflow:hidden;
width: 969px;
float: left;
}

#speedcamerasuk
{
width: 210px;
float: left;
border:1px solid #0099ff;
margin:0px 0px 0px 10px;
padding:10px;
background-color:#DBF2FA;
}

#footlink{
font: 80% Arial;
font-size:12px;
}
#footlink ul
{
list-style-type:none;
margin:0;
padding:0;

}
#footlink li
{
padding:1px;
}
#footlink a:link,a:visited
{

color:black;
background-color:none;
text-align:left;
text-color:#003399;
text-decoration:none;
}
#footlink a:hover,a:active
{
background-color:none;
text-decoration: underline;
text-colour:#003399;
}

#copyright
{
width: 975px;
float: left;
margin:0px 0px 0px 10px;
padding:10px;
}

.clear {
    clear: both;
}

.center  
{
display: block;
margin-left: auto;
margin-right:auto;
}


.right  
{
float:right;
}

.left  
{
float:left;
}

There is no such element as <p3>, so you shouldn’t use it. Some browsers will apply styling but otherwise won’t. I’ll have a look at the rest of the code when I get back to a PC.

Try moving the styles into the <head> and the JavaScript to the bottom of the </body>

[B]I removed the p2 and p3 tags and replaced them with style2 and style 4 classes.

Removed empty <p></p> tags.

Also changed footlink, speedcamerasuk, [/B]databasemain and homepage made into classes as id can only be used once per page


<?php # ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="description" content="Traffic light cameras are triggered either by using ground loops that are cut into the road surface or using radar technology. When using loops, as the traffic lights turn red the system becomes active, any vehicle passing over the sensor in the road after this time is then photographed. Radar based traffic light cameras work in the same manner as fixed Gatso speed cameras." />
<link href="sp_test_style.css" rel="stylesheet" type="text/css" />
<title>Red light and traffic speed cameras explained and how they work</title>
</head>


<body>


<div id="fb-root"></div>
<script type='text/javascript' >(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_GB/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>


<div id='container'>
<div id='topmenu'><div id='linkstop'><div id='link'>
<ul>
<li><a href='../../terms-and-conditions.htm'>Terms and Condtions</a></li>
<li><a href='../../delivery-information-speedcamerasuk.htm'>Delivery</a></li>
<li><a href='../../speedcamerasuk-about.htm'>About Us</a></li>
<li><a href='../../speedcamerasuk-contact.htm'>Contact Us</a></li>
</ul>
</div>
</div>
</div>


<div id='topofpage'>
<div id='logo'><img src="../../images/navigation/speedcamerasuk-logo.gif" width="115" height="120" /> </div>


<div id='adverttop'>


<script type='text/javascript' async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- SCUKv3 -->
<ins class="adsbygoogle"
style="display:inline-block;width:728px;height:90px"
data-ad-client="ca-pub-0889991974194840"
data-ad-slot="8618719741"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
</div>






<div id='navigation'>
<div id='cssmenu'>
<ul>
<li><a href='../../index.htm'>Home</a></li>
<li><a href='../../speed-camera-database.htm'>Speed Camera Database</a>
<ul>
<li><a href='../east-england.htm'>East of England</a></li>
<li><a href='../east-midlands.htm'>East Midlands</a></li>
<li><a href='../greater-london.htm'>Greater London</a></li>
<li><a href='../north-east-england.htm'>North East England</a></li>
<li><a href='../north-west-england.htm'>North West England</a></li>
<li><a href='../northern-ireland.htm'>Northern Ireland</a></li>
<li><a href='../scotland.htm'>Scotland</a></li>
<li><a href='../south-east-england.htm'>South East England</a></li>
<li><a href='../south-west-england.htm'>South West England</a></li>
<li><a href='../wales.htm'>Wales</a></li>
<li><a href='../west-midlands.htm'>West Midlands</a></li>
<li><a href='../yorkshire.htm'>Yorkshire</a></li>
<li><a href='../../speed-camera-location.htm'>Report new camera</a></li>
<li><a href='../../speed-camera-database-guide.htm'>User Guide</a></li>
</ul>
</li>
<li><a href='../../speed-camera-types.htm'>Camera Types</a>
<ul>
<li><a href='../../gatso.htm'>Gatso</a></li>
<li><a href='../../truvelo-d-cam.htm'>New Truvelo</a></li>
<li><a href='../../truvelo.htm'>Truvelo</a></li>
<li><a href='../../mobile-speed-camera.htm'>Mobile</a></li>
<li><a href='../../specs.htm'>SPECS</a></li>
<li><a href='../../traffic-light-camera.htm'>Traffic Light</a></li>
<li><a href='../../speedcurb.htm'>SpeedCurb</a></li>
<li><a href='../../peek.htm'>Peek</a></li>
<li><a href='../../ds2.htm'>DS2</a></li>
<li><a href='../../watchman.htm'>Watchman</a></li>
<li><a href='../../speedspike-speed-camera.htm'>SpeedSpike</a></li>
</ul>
</li> 
<li><a href='../../speeding-ticket.htm'>Speeding Fines</a>
<ul>
<li><a href='../../speeding-ticket.htm'>Speeding Tickets</a></li>
<li><a href='../../motoring-insurance-premiums.htm'>Car Insurance</a></li>
</ul>
</li>
<li><a href='../../speed-camera-detector.htm'>Detector Guide</a>
<ul>
<li><a href='../../speed-camera-detector-guide.htm'>Speed Camera Detectors</a></li>
<li><a href='../../radar-laser-detector.htm'>Radar and Laser Detectors</a></li>
<li><a href='../../sat-nav-detector-guide.htm'>Sat Navs with speed cameras</a></li>
<li><a href='../../smartphone-speed-camera-app-guide.htm'>Smartphone Apps</a></li>
</ul>
</li>
<li><a href='../../shop.htm'>Shop</a>
<ul>
<li><a href='../../speed-camera-detector-shop.htm'>Speed Camera Detectors</a></li>
<li><a href='../../sat-nav-shop.htm'>Sat Navs with speed cameras</a></li>
</ul>
</li> 
<li><a href='../../members.htm'>Members</a>
<ul>
<li><a href='../../new-members.htm'>New Members</a></li>
<li><a href='../../current-members.htm'>Current Members</a></li>
</ul>
</li>
<li><a href='../../speed-camera-news.htm'>News</a> </li>
</ul>
</div>
</div>
<div id='divcontainer'>
<div id='div1'>


<div class='databasemain'>
<h1>Traffic Light Speed/Camera explained</h1>
<p>Welcome to the speed camera database for Cambridgeshire and Peterborough - included in our database are the locations of both fixed and mobile speed cameras across the county.</p>
<p>All of the speed camera locations below have been sent into us by motorists. If you know of a speed camera location that doesn't appear below, please click here to report it.</p>
<p>The safety camera partnership (Police and local authority) website that covers this area is Cambridgeshire Safety Camera Partnership and is a sub group of the Cambridgeshire and Peterborough Road Safety Partnership. Their aim is to reduce casualties by targeting speeding.</p>
</div> 


<div class='databasemain'>
<p>Listings in alphabetical order for speed camera locations in Cambridgeshire and Peterborough</p>
<p>A B C D E F G H I J K L M N O P Q R S T U V W X Y Z. </p>


</div> 


<div class='homepage'>
<p class='style3'>
<img class="left" src="../../images/camera-database/20mph-speed-limit.gif" width="62" height="62" /><img class="left" src="../../images/camera-database/gatso-speed-camera.gif" width="66" height="62" />Peterborough - Goldhay Way
</p>
</div> 
<div class='homepage'>
<p class='style3'>
<img class="left" src="../../images/camera-database/20mph-speed-limit.gif" width="62" height="62" /><img class="left" src="../../images/camera-database/gatso-speed-camera.gif" width="66" height="62" />Barton A603 - Goldhay Way
</p>
</div>
<div class='homepage'>
<p class='style3'>
<img class="left" src="../../images/camera-database/20mph-speed-limit.gif" width="62" height="62" /><img class="left" src="../../images/camera-database/gatso-speed-camera.gif" width="66" height="62" />Barton A603 - 
</p>
</div>
<div class='homepage'>
<p class='style3'>
<img class="left" src="../../images/camera-database/20mph-speed-limit.gif" width="62" height="62" /><img class="left" src="../../images/camera-database/gatso-speed-camera.gif" width="66" height="62" />Barton A603 - Goldhay Way
</p>
</div>
<div class='homepage'>
<p class='style3'>
<img class="left" src="../../images/camera-database/20mph-speed-limit.gif" width="62" height="62" /><img class="left" src="../../images/camera-database/gatso-speed-camera.gif" width="66" height="62" />Barton A603 - Goldhay Way
</p>
</div>


<div id='divider'>
<p class='style3 tac'>
		Places beginning with the letter B - Speed camera locations
</p>
</div>


<div class='homepage'>
<p class='style3'>
<img class="left" src="../../images/camera-database/20mph-speed-limit.gif" width="62" height="62" /><img class="left" src="../../images/camera-database/gatso-speed-camera.gif" width="66" height="62" />Barton A603 - Goldhay Way
</p>
</div>
<div class='homepage'>
<p class='style3'>
<img class="left" src="../../images/camera-database/20mph-speed-limit.gif" width="62" height="62" /><img class="left" src="../../images/camera-database/gatso-speed-camera.gif" width="66" height="62" />Barton A603 - Goldhay Way
</p>
</div>


</div>
<div id='div2'>
<img src="../../images/side/speed-camera-detector-shop.jpg" width="300" height="230" />


<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- SCUKsidenav -->
<ins class="adsbygoogle"
style="display:inline-block;width:300px;height:250px"
data-ad-client="ca-pub-0889991974194840"
data-ad-slot="2836039939"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>


<iframe width="300" height="169" src="//www.youtube.com/embed/5SclBSMn-AY" frameborder="0" allowfullscreen></iframe>


<div class="fb-like-box" data-href="https://www.facebook.com/SpeedCamerasUK " data-width="300" data-colorscheme="light" data-show-faces="true" data-header="true" data-stream="false" data-show-border="true"></div>


<!-- Place this tag where you want the widget to render. -->
<div class="g-page" data-href="//plus.google.com/118085000225419367133" data-layout="landscape" data-showtagline="false" data-showcoverphoto="false" data-rel="publisher"></div>


<!-- Place this tag after the last widget tag. -->
<script type="text/javascript">
window.___gcfg = {lang: 'en-GB'};


(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/platform.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>
</div>
</div>




<div id='footer'>


<div class='speedcamerasuk'>
<p>Speed Cameras UK</p>
<div class='footlink'>
<ul>
<li><a href="../../speedcamerasuk-about.htm">About Us</a></li>
<li><a href="../../speedcamerasuk-contact.htm">Contact Us</a></li>
<li><a href="../../terms-and-conditions.htm">Terms and Conditions</a></li>
<li><a href="../../advertisers.htm">Advertising</a></li>
</ul>
</div>
</div>
<div class='speedcamerasuk'>
<p>Shop</p>
<div class='footlink'>
<ul>
<li><a href="../../speed-camera-detector-shop.htm">Speed Trap Detectors</a></li>
<li><a href="../../sat-nav-shop.htm">Sat Navs with speed cameras</a></li>
<li><a href="../../cookies.htm">Cookies</a></li>
</ul>
</div
></div>
<div class='speedcamerasuk'>
<p>Site Maps</p>
<div class='footlink'>
<ul>
<li><a href="../../sitemap.htm">Site Map</a></li>
<li><a href="../../sitemap.xml">XML Site Map</a></li>
<li><a href="../../privacy-policy.htm">Privacy Policy</a></li>
<li><a href="../../terms-use.htm">Terms of Use</a></li>
</ul>
</div>
</div>
<div class='speedcamerasuk'>
<p>Social Media</p>
<div class='footlink'>
<ul>
<li><a href="http://www.facebook.com/SpeedCamerasUK" target="_blank">Facebook</a></li>
<li><a href="http://www.youtube.com/user/SpeedCameras" target="_blank">YouTube</a></li>
<li><a href="https://twitter.com/SpeedCamerasUK" target="_blank">Twitter</a></li>
<li><a href="https://plus.google.com/b/118085000225419367133/+Speedcamerasuk" target="_blank">Google +</a></li>
</ul>
</div>
</div>


</div>
<div id='copyright'>


<p class='style2'>
	&copy; Copyright <a href="../../index.htm">SpeedCamerasUK.com</a> 2000-2014
</p>
</div>
<div class="clear"></div>
</div>
</body>
</html>


h1{font-size:20px;font-family:Arial;font-weight:500;color: #000000;}
h2{font-size:20px;font-family:Arial;font-weight:500;color: #000000;}
h3{font-size:20px;font-family:Arial;font-weight:500;color: #000000;}
h4{font-size:20px;font-family:Arial;font-weight:500;color: #000000;}
h5{font-size:20px;font-family:Arial;font-weight:500;color: #000000;}
h6{font-size:20px;font-family:Arial;font-weight:500;color: #000000;}


h1, h2, h3, h4, h5, h6{
margin-top:20px;
margin-bottom:10px;
}




button {
font: 14px "Trebuchet MS", sans-serif;


}
.button {
padding: 8px 16px;
display:inline-block;
text-decoration:none;
border-radius:3px;
background-color: #ccc;


}
.button-primary {
background:#DBDBDB;
color:white;
}
.button-primary:hover {
background:lightslategrey;
color:#fff;
}




a:link{
color: #0099ff;
text-decoration: none;
}
a:visited{ 
text-decoration: none;
color: #0099ff;
}
a:hover{
color: #0099ff;
text-decoration:underline;
}
a:active{
text-decoration: none;
color: #0099ff;
}


#cssmenu {
border: none;
border: 0px;
margin: 0px;
padding: 0px;
font: 67.5% Helvetica;
font-size: 15px;
font-weight: bold;
width: 975px;
}
#cssmenu ul {
background: #0099ff;
height: 40px;
list-style: none;
margin: 0;
padding: 0;
}
#cssmenu li {
float: left;
padding: 0px;
}
#cssmenu li a {
background: #0099ff url(../images/navigation/line.gif) bottom right no-repeat;
display: block;
font-weight: normal;
line-height: 40px;
margin: 0px;
padding: 0px 18px;
text-align: center;
text-decoration: none;
}
#cssmenu > ul > li > a {
color: white;
}
#cssmenu ul ul a {
color: white;
}
#cssmenu li > a:hover,
#cssmenu ul li:hover > a {
background: #003399;
color: #FFFFFF;
text-decoration: none;
}
#cssmenu li ul {
background: #0099ff;
display: none;
height: auto;
padding: 0px;
margin: 0px;
border: 0px;
position: absolute;
width: 190px;
z-index: 200;


}
#cssmenu li:hover ul {
display: block;
}
#cssmenu li li {


display: block;
float: none;
margin: 0px;
padding: 0px;
width: 190px;
}
#cssmenu li:hover li a {
background: none;
}
#cssmenu li ul a {
display: block;
height: 40px;
font-size: 12px;
font-style: normal;
margin: 0px;
padding: 0px 10px 0px 15px;
text-align: left;
}
#cssmenu li ul a:hover,
#cssmenu li ul li:hover > a {
background: #003399;
border: 0px;
color: #ffffff;
text-decoration: underline;
}
#cssmenu p {
clear: left;
}




#topmenu {
overflow:hidden;
width: 970px;
float: left;
background-color:#DBF2FA;
}




#link{
font: 80% Arial;
font-size:14px;
}
#link ul
{
list-style-type:none;
margin:0;
padding:0;


}
#link li
{
float:left;
padding:10px;
}
#link a:link,a:visited
{
display:block;
color:black;
background-color:none;
text-align:center;


text-decoration:none;
}
#link a:hover,a:active
{
background-color:none;
text-decoration: underline;
}




#linkstop
{
float:right;
width:410px;
}


#topofpage {
overflow:hidden;
width: 969px;
float: left;
background-color:#DBF2FA;


}


#logo
{
width: 235px;
float: left;
}


#adverttop
{
width: 730px;
float: right;
}


#container {
width:975px;
margin:0 auto;
padding:5px;
border:1px solid #cccccc;
background:#ffffff;


}


#divcontainer {
overflow:hidden;
width: 970px;
float: left;
}


#div1 {
width: 630px;
float: left;
}


#div2 {
width: 305px;
float: right;
}


#database{
width: 628px;
float: left;
}


#database1{
width: 240px;
float: left;
margin: 0px 0px 0px 30px;
}


#database2{
width: 350px;
float: right;
}


.databasemain{
width: 620px;
float: left;
}


.homepage
{
width: 300px;
float: left;
margin: 0px 0px 0px 10px;
}


#divider
{
width: 600px;
float: left;
}


body {
font-family: Arial, Helvetica, sans-serif;
font-size:87.5%;
background:url(../images/background/gatso-speed-camera.jpg) no-repeat fixed 50% 0;
}


.style1
{
font-size: 18px;
text-align:left;
background-color:#ffc;
}


.style2
{
font-size: 12px;
text-align:left;
background-color:#cff;
}




.style3{
font-family: Arial, Helvetica, sans-serif;
font-size: 30px;
color: #000000;
background-color:#cfc;
}


#navigation
{ 
width: 974px;
float: left;
}


#cameratype
{
width:630px;
float:left;
}


#location
{
width: 275px;
height:275px;
float: left;
border:1px solid #0099ff;
margin:10px 0px 10px 10px;
padding:10px;
}








#footer {
overflow:hidden;
width: 969px;
float: left;
}


.speedcamerasuk
{
width: 210px;
float: left;
border:1px solid #0099ff;
margin:0px 0px 0px 10px;
padding:10px;
background-color:#DBF2FA;
}


.footlink{
font: 80% Arial;
font-size:12px;
}
.footlink ul
{
list-style-type:none;
margin:0;
padding:0;


}
.footlink li
{
padding:1px;
}
.footlink a:link,a:visited
{


color:black;
background-color:none;
text-align:left;
text-color:#003399;
text-decoration:none;
}
#footlink a:hover,a:active
{
background-color:none;
text-decoration: underline;
text-colour:#003399;
}


#copyright
{
width: 975px;
float: left;
margin:0px 0px 0px 10px;
padding:10px;
}


.clear {
clear: both;
}


.center 
{
display: block;
margin-left: auto;
margin-right:auto;
}




.right 
{
float:right;
}


.left 
{
float:left;
}
.tac {text-align: center;}

You’ve got a few issues here. I ran your html through the validator and came out with 60 errors. Most are easily fixable, but there are some doozies there:

  • There are seven elements with id-='‘homepage’, and some other elements with the same ids as another element. id’s should only occur once per page.. If you want to apply the same style to many elements, use a class.
  • p3 is not a valid element. It may or may not display properly. If you want to apply style like that, you could change the id=‘homepage’ to class=“homepage” and use div.homepage p img.left to identify the elements.
  • You don’t see the .style3 styling you’re trying to wrap a p element around the center element - center is a block level element, so when the browser interprets it, it takes it out of your parent and processes it separate. You can do <center class=“style3”> and remove the p OR BETTER yet, add text-align: center to the .style3 class in the css, and remove the center element totally.
  • A couple other comments:
    [LIST]
  • You’ve got a number of places where you’ve got divs which contain just other divs. You can often get rid of those divs by applying appropriate stylings to the appropriate containers. It’s often easier to style fewer containers and add extras back in just when you need them, than to have too many and have to apply the same style where appropriate.
  • You’ve got a number of places where you have empty p elements, probably to make visual space. A better approach is to apply margins and/or padding the other elements or to parent containers.
    [/LIST]

Why? What possible relevance does it have to the problems being found here? None at all. There are any number of real problems with the code, so it would be helpful to focus on those rather than some irrelevant point that doesn’t in any way answer any of the OP’s questions.

Yeepers, I tried running the code, and it took me about 5 minutes going backwards and forwards between the source code, the DOM output in Dragonfly and the W3 validator before I finally figured out why the DOM was showing up as <p class="style3"/> (self-closing) … and then I come back here to post and find you’ve already answered it :rolleyes:

The real problems would be much easier to spot with the CSS, HTML and JavaScript separated out rather than jumbled together.

Certainly there are real problems with the code but with everything jumbled together finding all of them is harder than it needs to be.

Surely the OP ought to try to make thongs as easy as possible when asking for help by unjumbling things. Who knows, they may actually spot and fix many of the problems for themselves while moving the CSS and JavaScript to where they belong.

I was most surprised when the Jigsaw validator accepted the following css:


 p3 {width: 10em; height: 1.2em; background-color: #ff0; color: #f00;} 


I applied an id and a class to div p3 but it had no effect.

I’m out of my element in an XHTML discussion, but doesn’t XHTML allow home made (user defined) elements? They have to be properly defined (and I’m way over my head here), but apparently the validator doesn’t know whether or not they are properly implemented. Just guessing.

The answer to the OP is :

<p class="style3"> and </p>

as mentioned by others P3 is not a valid element and MAY NOT be rendered properly by some UAs and/or may need some assistance being rendered. For example you could do this:


p3{ color:pink; background: red; display:block; ...etc. }

And use a shim, similar to the HTML5 shim and get the P3 tag to work that way.

but the real question is WHY WOULD YOU WANT TO?!?!?

  1. as mentioned before, P3 is not a real element… as such you really have no semantic meaning attached, regardless of how you are able to style it.

  2. you may be skimping a few characters, but you are going trough the effort of altering your markup ( and in an unsemantic way,see #1) so there is really not much gain

  3. if anything you lose CSS specificity: p.class3 {} is a more specific rule than p3{}

as far as using the ‘body’ CSS cascades. So if you fail at targeting an element with your rule that element will inherit the style of the parent element instead.

This is way beyond me as well.

From a practical point of view I will have to be especially careful to ensure the CSS element is either a .class or an #id.

A missing CSS identifier will allow JigSaw Validator to validate correctly but the page will not do what I want it to do :slight_smile:

Just read the @dresden_phoenix;'s post and off to Google shim.

It’s perfectly valid CSS, so Jigsaw allows it - Jigsaw is not bothered about the underlying HTML, only the CSS that is applied. In XHTML, you can define your own elements.

Some browsers (IE, I think?) will treat any unknown element as a block level element and will refuse to apply any styling to it, which is why you need the HTML5 Shim to get the “unknown” elements to be styled in pre-HTML5 versions of the browser. Other browsers will apply any CSS they are given to any unknown elements that are used in a grammatically correct way.

The OP had correctly presented the CSS as a separate file called by a <link> tag, which is more appropriate than dumping it all in the <head> … and the JavaScript was plainly irrelevant to the problem, and did not make it more difficult to resolve the OP’s actual problems. Your pontificating was misguided and unnecessary, and did nothing to help.