SitePoint Sponsor

User Tag List

Page 1 of 2 12 LastLast
Results 1 to 25 of 29
  1. #1
    SitePoint Evangelist
    Join Date
    Mar 2011
    Posts
    423
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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.

  2. #2
    SitePoint Mentor bronze trophy
    John_Betong's Avatar
    Join Date
    Aug 2005
    Location
    City of Angels
    Posts
    1,838
    Mentioned
    73 Post(s)
    Tagged
    6 Thread(s)
    Try copying and pasting your HTML script to the following free Html validation service:

    http://validator.w3.org/#validate_by_input

    and also validate your CSS:

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

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

    Code:
    I tried your CSS and was most surprised to discover that p3 was acceptable?????
    Learn how to be ready for The New Move to Discourse

    How to make Make Money Now with a *NEW* look

    Be sure to congratulate Patche on earning Member of the Month for July 2014

  3. #3
    SitePoint Evangelist
    Join Date
    Mar 2011
    Posts
    423
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  4. #4
    SitePoint Mentor bronze trophy
    John_Betong's Avatar
    Join Date
    Aug 2005
    Location
    City of Angels
    Posts
    1,838
    Mentioned
    73 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by MatthewBOnline View Post
    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.
    Learn how to be ready for The New Move to Discourse

    How to make Make Money Now with a *NEW* look

    Be sure to congratulate Patche on earning Member of the Month for July 2014

  5. #5
    SitePoint Evangelist
    Join Date
    Mar 2011
    Posts
    423
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  6. #6
    SitePoint Mentor bronze trophy
    John_Betong's Avatar
    Join Date
    Aug 2005
    Location
    City of Angels
    Posts
    1,838
    Mentioned
    73 Post(s)
    Tagged
    6 Thread(s)
    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.
    Learn how to be ready for The New Move to Discourse

    How to make Make Money Now with a *NEW* look

    Be sure to congratulate Patche on earning Member of the Month for July 2014

  7. #7
    SitePoint Evangelist
    Join Date
    Mar 2011
    Posts
    423
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here you are...the text in question is "Places beginning with the letter B - Speed camera locations " - it should be size 30px.

    Code:
    <!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>
    Code:
    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;
    }
    Last edited by Paul O'B; Mar 1, 2014 at 05:09. Reason: code tags added

  8. #8
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,888
    Mentioned
    122 Post(s)
    Tagged
    1 Thread(s)
    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.

  9. #9
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,826
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Try moving the styles into the <head> and the JavaScript to the bottom of the </body>
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  10. #10
    SitePoint Mentor bronze trophy
    John_Betong's Avatar
    Join Date
    Aug 2005
    Location
    City of Angels
    Posts
    1,838
    Mentioned
    73 Post(s)
    Tagged
    6 Thread(s)
    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,
    databasemain and homepage made into classes as id can only be used once per page

    Code:
    <?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>

    Code:
    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;}
    Learn how to be ready for The New Move to Discourse

    How to make Make Money Now with a *NEW* look

    Be sure to congratulate Patche on earning Member of the Month for July 2014

  11. #11
    Just Blow It bronze trophy
    DaveMaxwell's Avatar
    Join Date
    Nov 1999
    Location
    Mechanicsburg, PA
    Posts
    7,266
    Mentioned
    115 Post(s)
    Tagged
    1 Thread(s)
    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:
      • 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.
    Last edited by DaveMaxwell; Feb 26, 2014 at 13:15. Reason: fixed syntax typo....it's been a while.
    Dave Maxwell - Manage Your Site Team Leader
    My favorite YouTube Video! | Star Wars, Dr Suess Style
    Learn how to be ready for The Forums' Move to Discourse

  12. #12
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,888
    Mentioned
    122 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by felgall View Post
    Try moving the styles into the <head> and the JavaScript to the bottom of the </body>
    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.

  13. #13
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,888
    Mentioned
    122 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by DaveMaxwell View Post
    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.
    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

  14. #14
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,826
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by Stevie D View Post
    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.
    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.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  15. #15
    SitePoint Mentor bronze trophy
    John_Betong's Avatar
    Join Date
    Aug 2005
    Location
    City of Angels
    Posts
    1,838
    Mentioned
    73 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by DaveMaxwell View Post
    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:
    • 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.
    I was most surprised when the Jigsaw validator accepted the following css:

    Code:
     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.
    Last edited by John_Betong; Feb 26, 2014 at 21:37. Reason: miss-matched brackets
    Learn how to be ready for The New Move to Discourse

    How to make Make Money Now with a *NEW* look

    Be sure to congratulate Patche on earning Member of the Month for July 2014

  16. #16
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,526
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    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.
    http://www.sitepoint.com/forums/show...r-defined-tags

  17. #17
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,804
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    The answer to the OP is :
    Code:
    <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:
    Code:
    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.

  18. #18
    SitePoint Mentor bronze trophy
    John_Betong's Avatar
    Join Date
    Aug 2005
    Location
    City of Angels
    Posts
    1,838
    Mentioned
    73 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by ronpat View Post
    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.
    http://www.sitepoint.com/forums/show...r-defined-tags
    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

    Just read the @dresden_phoenix;'s post and off to Google shim.
    Learn how to be ready for The New Move to Discourse

    How to make Make Money Now with a *NEW* look

    Be sure to congratulate Patche on earning Member of the Month for July 2014

  19. #19
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,888
    Mentioned
    122 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by John_Betong View Post
    I was most surprised when the Jigsaw validator accepted the following css:

    Code:
     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.
    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.

  20. #20
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,888
    Mentioned
    122 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by felgall View Post
    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.
    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.

  21. #21
    SitePoint Evangelist
    Join Date
    Mar 2011
    Posts
    423
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for your help guys. I have made the changes you recommended.

    Two further things: Why when I use the div classes homepage and speedcamerasuk does it leave some space at the top before the content in the div class? I need to get rid of this white space, if I can.

    Secondly, how do I change the colour of the 'visited' links. I tried changing "a:visited" but it does not work.
    Matt.

  22. #22
    SitePoint Mentor bronze trophy
    John_Betong's Avatar
    Join Date
    Aug 2005
    Location
    City of Angels
    Posts
    1,838
    Mentioned
    73 Post(s)
    Tagged
    6 Thread(s)
    Without seeing the changes it is impossible to suggest solutions.

    Please supply a link to the online page.
    Learn how to be ready for The New Move to Discourse

    How to make Make Money Now with a *NEW* look

    Be sure to congratulate Patche on earning Member of the Month for July 2014

  23. #23
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,826
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by Stevie D View Post
    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.
    I have just had another look at the OP's code post. The boxes around the code are so faint that I had originally misread the code as all being in one file jumbled in the wrong order.

    My apologies to the OP for an irrelevant comment caused by the colour scheme used by the forum.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  24. #24
    SitePoint Evangelist
    Join Date
    Mar 2011
    Posts
    423
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    John Betong,

    I cannot provide the page online - as it is not online. It is the page I pasted in to this post earlier. The main problem is a:visited in all the CSS. It does not work.

    Matt.

  25. #25
    SitePoint Mentor bronze trophy
    John_Betong's Avatar
    Join Date
    Aug 2005
    Location
    City of Angels
    Posts
    1,838
    Mentioned
    73 Post(s)
    Tagged
    6 Thread(s)
    Hi Matt,

    I searched for a solution to the visited problem but was unable to find a solution

    I have simplified the script and the gap at the top has been removed. Also validation failed on text-colour

    Try this:

    Code:
    <div id='footer'>
    	<div class='footlink'>
    		<b>Speed Cameras UK</b>
    		<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 class='footlink'>
    		<b>Shop</b>
    			<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 class='footlink'>
    		<b>Site Maps</b>
    		<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 class='footlink'>
    		<b>Social Media</b>
    		<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>
    Code:
    #footer {
    overflow:hidden;
    width: 969px;
    float: left;
    }
    
    
    .footlink
    {
    float: left;
    font: 80% Arial;
    font-size:12px;
    width: 17em; height: 8em;
    border:1px solid #0099ff;
    margin:10px 0px 0px 10px;
    padding: 0 10px;
    background-color:#DBF2FA;
    }
    .footlink ul
    {
    list-style-type:none;
    margin: 0 0 0 1em;
    padding:0;
    line-height: 1.42em;
    }
    .footlink li
    {
    padding:1px;
    }
    
    
    .footlink a:link 
    {
    	text-decoration:none; /* common */ 
    	color: black;
    	background-color: transparent;
    }
    .footlink a:visited
    {
    	font-weight: 700  !important;
    	color: #003399  !important;
    	background-color: green;
      text-decoration: underline;
    }
    .footlink a:hover 
    {
    	color: #003399;
    	background-color: lightgreen;
    }
    .footlink a:active
    {
    	color: #003399;
    	background-color: lightpink;
    }
    Learn how to be ready for The New Move to Discourse

    How to make Make Money Now with a *NEW* look

    Be sure to congratulate Patche on earning Member of the Month for July 2014


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •