SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Member
    Join Date
    Nov 2010
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question New to web-building...help with firefox

    hi guys! I'm new here...and to web design.

    I'm making a portfolio site for a friend.
    It works fine with safari and IE, but not with Firefox.
    I know this has to do with the W3C standards, but I just cannot get my head around what the validator means when it says things like...

    "an attribute value literal can occur in an attribute specification list only after a VI delimiter"

    I've been trying to research for the last two days and now completely frazzled. Can someone help me?

    I've included the html for a page and css.

    thanks ever so much

    emily
    x

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Guy Heywood Photography</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
    <link href="style1.css" rel="stylesheet" type="text/css/>

    </head>
    <div id="bodycontent">


    <a href="index.html"><h1>Guy Heywood</h1></a></div>

    <h2>Photography</h2>

    <div style="position:absolute;left:480px;top:45px">
    <a href="contact.html"><h2>Contact</h2></a></div>


    </div>

    <div style="position:absolute;top:120px;left:30px;">
    <img src="gallery/12.jpg" width="753"height="500"/></div>



    </div> <!---end of bodycontent div --->


    <div style="position:absolute;left:33px;top:620px">
    <a href="7.html"><h3>Previous</h3></a></div>
    <div style="position:absolute;left:105px;top:620px">
    <a href="9.html"><h3>Next</h3></a></div>
    <p>




    </body>
    </html>

    /*
    CSS for Guy Heywood
    */

    body {
    font-family: Arial, serif;
    line-height: 100%;
    padding: 25px;

    }


    h1 {
    font-family: Arial, serif;
    font-size: 30px;
    letter-spacing: 0.1em;
    font-weight: normal;
    margin-bottom: 0;
    }

    a:link {
    color: black;
    text-decoration: none;
    }

    a:hover {
    text-decoration: none;
    }


    h2 {
    font-family: arial, serif;
    font-weight: 300;
    color: gray;
    font-size: small;
    letter-spacing: 0.2em;
    margin-bottom: 0;
    }

    h3 {
    font-family: arial, serif;
    font-weight: 300;
    color: gray;
    font-size: small;
    letter-spacing: 0.1em;
    margin-bottom: 0;
    text-decoration: none;
    }


    a {
    font-family: arial, serif;
    font-weight: lighter;
    font-size: small;
    color: black;
    }

    h3:visited {
    color: gray;
    text-decoration: none;
    }

    h3:hover {
    text-decoration: none;
    color: white;
    background-color: black;
    }

  2. #2
    Non-Member
    Join Date
    Jun 2010
    Location
    4727′35″N 2618′0″E
    Posts
    1,789
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    At a glance:

    - missing final " on <link href="style1.css" rel="stylesheet" type="text/css/>
    it should be <link href="style1.css" rel="stylesheet" type="text/css" />

    - missing body start tag: <body> after </head>

    - you've put headings (h1-h3) inside anchors (a) which is wrong

    - you have two stray </div>s:

    </div>

    <div style="position:absolute;top:120px;left:30px;">
    <img src="gallery/12.jpg" width="753"height="500"/></div>



    </div> <!---end of bodycontent div --->


    that ruin the nesting.





    Try this code:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
      <title>Guy Heywood Photography</title>
      <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
      <link href="style1.css" rel="stylesheet" type="text/css" />
      
      <style type="text/css">
         /*
          CSS for Guy Heywood
         */
    
          body {
          font-family: Arial, serif;
          line-height: 100%;
          padding: 25px;
    
          }
    
    
          h1 {
          font-family: Arial, serif;
          font-size: 30px;
          letter-spacing: 0.1em;
          font-weight: normal;
          margin-bottom: 0; 
          }
    
          a:link {
          color: black;
          text-decoration: none;
          }
    
          a:hover {
          text-decoration: none;
          }
    
    
          h2 {
          font-family: arial, serif;
          font-weight: 300;
          color: gray;
          font-size: small;
          letter-spacing: 0.2em;
          margin-bottom: 0; 
          }
    
          h3 {
          font-family: arial, serif;
          font-weight: 300;
          color: gray;
          font-size: small;
          letter-spacing: 0.1em;
          margin-bottom: 0; 
          text-decoration: none;
          }
    
    
          a {
          font-family: arial, serif;
          font-weight: lighter;
          font-size: small;
          color: black;
          }
    
          h3:visited {
          color: gray;
          text-decoration: none;
          }
    
          h3:hover {
          text-decoration: none;
          color: white;
          background-color: black;
          }
      </style>
    </head>
    <body>
    <div id="bodycontent">
    
    
    <a href="index.html">Guy Heywood</a></div>
    
    <h2>Photography</h2>
    
    <div style="position:absolute;left:480px;top:45px">
    <a href="contact.html">Contact</a></div>
    
    
    <div style="position:absolute;top:120px;left:30px;">
    <img src="gallery/12.jpg" width="753" height="500" /></div>	
    
    
    
    <div style="position:absolute;left:33px;top:620px">
    <a href="7.html">Previous</a></div>
    <div style="position:absolute;left:105px;top:620px">
    <a href="9.html">Next</a></div>
    
    </body>
    </html>
    You should redo the div nesting.
    For it to be completely XHTML valid, you should also provide alt description for images.
    And as a best practice, move the inline style (div style="position:absolute;left:33px;top:620px") to the style element in the head or in an external style sheet.

  3. #3
    SitePoint Member
    Join Date
    Nov 2010
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    wow thanks ever so much!!!
    Solved all my problems
    x

  4. #4
    Non-Member
    Join Date
    Jun 2010
    Location
    4727′35″N 2618′0″E
    Posts
    1,789
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You're very welcome.

    Could you please post your changed code to double check?

  5. #5
    SitePoint Member
    Join Date
    Nov 2010
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Red face

    Hi, Here it is..

    x

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Guy Heywood Photography</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    <link href="style1.css" rel="stylesheet" type="text/css" />

    <style type="text/css">
    /*
    CSS for Guy Heywood
    */

    body {
    font-family: Arial, serif;
    line-height: 100%;
    padding: 25px;

    }


    h1 {
    font-family: Arial, serif;
    font-size: 30px;
    letter-spacing: 0.1em;
    font-weight: normal;
    margin-bottom: 0;
    }

    a:link {
    color: black;
    text-decoration: none;
    }

    a:hover {
    text-decoration: none;
    }


    h2 {
    font-family: arial, serif;
    font-weight: 300;
    color: gray;
    font-size: small;
    letter-spacing: 0.2em;
    margin-bottom: 0;
    }

    h3 {
    font-family: arial, serif;
    font-weight: 300;
    color: gray;
    font-size: small;
    letter-spacing: 0.1em;
    margin-bottom: 0;
    text-decoration: none;
    }


    a {
    font-family: arial, serif;
    font-weight: lighter;
    font-size: small;
    color: black;
    text-decoration: none;
    }

    h3:visited {
    color: gray;
    text-decoration: none;
    }

    h3:hover {
    text-decoration: none;
    color: white;
    background-color: black;
    }

    </style>
    </head>
    <body>
    <div id="bodycontent">


    <a href="index.html"><h1>Guy Heywood</h1></a></div>

    <h2>Photography</h2>

    <div style="position:absolute;left:480px;top:45px">
    <a href="contact.html"><h2>Contact</h2></a></div>


    <div style="position:absolute;top:120px;left:30px;">
    <img src="gallery/13.jpg" width="753"height="500"/></div>



    <div style="position:absolute;left:33px;top:620px">
    <a href="8.html"><h3>Previous</h3></a></div>
    <div style="position:absolute;left:105px;top:620px">
    <a href="10.html"><h3>Next</h3></a></div>

    </body>
    </html>

  6. #6
    Non-Member
    Join Date
    Jun 2010
    Location
    4727′35″N 2618′0″E
    Posts
    1,789
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Actually, you did pretty good, considering

    You've put the <body>. That's one down.

    You need to make a few little more steps. Let's go slowly.

    Look at the code below and tell me what you notice to be wrong about div nesting, based on code indentation:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
      <title>Guy Heywood Photography</title>
      <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
      <link href="style1.css" rel="stylesheet" type="text/css" />
    
      <style type="text/css">
      /*
      CSS for Guy Heywood
      */
    
      body {
      font-family: Arial, serif;
      line-height: 100%;
      padding: 25px;
    
      }
    
    
      h1 {
      font-family: Arial, serif;
      font-size: 30px;
      letter-spacing: 0.1em;
      font-weight: normal;
      margin-bottom: 0; 
      }
    
      a:link {
      color: black;
      text-decoration: none;
      }
    
      a:hover {
      text-decoration: none;
      }
    
    
      h2 {
      font-family: arial, serif;
      font-weight: 300;
      color: gray;
      font-size: small;
      letter-spacing: 0.2em;
      margin-bottom: 0; 
      }
    
      h3 {
      font-family: arial, serif;
      font-weight: 300;
      color: gray;
      font-size: small;
      letter-spacing: 0.1em;
      margin-bottom: 0; 
      text-decoration: none;
      }
    
    
      a {
      font-family: arial, serif;
      font-weight: lighter;
      font-size: small;
      color: black;
      text-decoration: none;
      }
    
      h3:visited {
      color: gray;
      text-decoration: none;
      }
    
      h3:hover {
      text-decoration: none;
      color: white;
      background-color: black;
      }
    
      </style>
    </head><body>
    
      <div id="bodycontent">
      
          <a href="index.html"><h1>Guy Heywood</h1></a>
          </div>
    
          <h2>Photography</h2>
    
          <div style="position:absolute;left:480px;top:45px">
            <a href="contact.html"><h2>Contact</h2></a>
          </div>
    
    
          <div style="position:absolute;top:120px;left:30px;">
            <img src="gallery/13.jpg" width="753"height="500"/>
          </div>	
    
          <div style="position:absolute;left:33px;top:620px">
            a href="8.html"><h3>Previous</h3></a>
          </div>
          
          <div style="position:absolute;left:105px;top:620px">
            <a href="10.html"><h3>Next</h3></a>
          </div>
    
    
    </body></html>

  7. #7
    Robert Wellock silver trophybronze trophy xhtmlcoder's Avatar
    Join Date
    Apr 2002
    Location
    A Maze of Twisty Little Passages
    Posts
    6,316
    Mentioned
    60 Post(s)
    Tagged
    0 Thread(s)
    Emily, you are using block level headings within inline anchor elements which isn't allowed. I'd suspect the "bodycontent" class was for the main body although it isn't referenced in the CSS file itself.

    Also you have a few conflicting colours on hover and I suspect you don't fully understand the usages of H1-H6 either but for a first attempt it wasn't bad.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
      <head>
        <title>
          Guy Heywood Photography
        </title>
        <meta http-equiv="Content-Type" content=
        "text/html; charset=UTF-8" />
        <link href="style1.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
    <!--
    
      /*
      CSS for Guy Heywood
      */
    
    h1 {
     font-family: Arial, serif;
     font-size: 30px;
     letter-spacing: 0.1em;
     font-weight: normal;
     margin-bottom: 0;
    }
    a:link {
     color: black;
     text-decoration: none;
    }
    a:hover {
     text-decoration: none;
    }
    h2 {
     font-family: arial, serif;
     font-weight: 300;
     color: gray;
     font-size: small;
     letter-spacing: 0.2em;
     margin-bottom: 0;
    }
    h3 {
     font-family: arial, serif;
     font-weight: 300;
     color: gray;
     font-size: small;
     letter-spacing: 0.1em;
     margin-bottom: 0;
     text-decoration: none;
    }
    a {
     font-family: arial, serif;
     font-weight: lighter;
     font-size: small;
     color: black;
     text-decoration: none;
    }
    h3:visited {
     color: gray;
     text-decoration: none;
    }
    h3:hover {
     text-decoration: none;
     color: white;
     background-color: black;
    } 
    
    -->
    </style>
      </head>
      <body>
        <div id="bodycontent">
          <h1>
            <a href="index.html">Guy Heywood</a>
          </h1>
          <h2>
            Photography
          </h2>
          <div style="position:absolute;left:480px;top:45px">
            <h2>
              <a href="contact.html">Contact</a>
            </h2>
          </div>
          <div style="position:absolute;top:120px;left:30px;">
            <img src="gallery/13.jpg" width="753" height="500" alt=
            "Gallery of Photos" />
          </div>
          <div style="position:absolute;left:33px;top:620px">
            <h3>
              <a href="8.html">Previous</a>
            </h3>
          </div>
          <div style="position:absolute;left:105px;top:620px">
            <h3>
              <a href="10.html">Next</a>
            </h3>
          </div>
        </div>
      </body>
    </html>
    The above example is a slightly modified example but still could do with some work.

  8. #8
    Non-Member
    Join Date
    Jun 2010
    Location
    4727′35″N 2618′0″E
    Posts
    1,789
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That's not nice Robert!

    I was trying to guide her through the whole correction process, step by step, so she'll better understand! Now you've given her all on a plate and ruin my plan!

  9. #9
    Robert Wellock silver trophybronze trophy xhtmlcoder's Avatar
    Join Date
    Apr 2002
    Location
    A Maze of Twisty Little Passages
    Posts
    6,316
    Mentioned
    60 Post(s)
    Tagged
    0 Thread(s)
    Off Topic:

    Not completely ruined. Because it still has "issues" remaining but it is obvious she was having a lot of trouble understanding nesting.


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
  •