New to web-building...help with firefox

emilyphoto · November 17, 2010, 10:39am

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/>

&lt;/head&gt;
&lt;div id="bodycontent"&gt;
    
	  
	&lt;a href="index.html"&gt;&lt;h1&gt;Guy Heywood&lt;/h1&gt;&lt;/a&gt;&lt;/div&gt;
     
	&lt;h2&gt;Photography&lt;/h2&gt;

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


&lt;/div&gt; 

       &lt;div style="position:absolute;top:120px;left:30px;"&gt;
       &lt;img src="gallery/12.jpg" width="753"height="500"/&gt;&lt;/div&gt;	
      
        
     
        &lt;/div&gt; &lt;!---end of bodycontent div ---&gt;   
       
    
       &lt;div style="position:absolute;left:33px;top:620px"&gt;
         &lt;a href="7.html"&gt;&lt;h3&gt;Previous&lt;/h3&gt;&lt;/a&gt;&lt;/div&gt;
       &lt;div style="position:absolute;left:105px;top:620px"&gt;
         &lt;a href="9.html"&gt;&lt;h3&gt;Next&lt;/h3&gt;&lt;/a&gt;&lt;/div&gt;

<p>

&lt;/body&gt;

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

system · November 17, 2010, 10:49am

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:

[B]</div>

</div> <!—end of bodycontent div —> [/B]

that ruin the nesting.

Try this 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.

emilyphoto · November 17, 2010, 11:16am

wow thanks ever so much!!!
Solved all my problems
x

system · November 17, 2010, 11:19am

You’re very welcome.

Could you please post your changed code to double check?

emilyphoto · November 17, 2010, 4:56pm

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” />

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

system · November 17, 2010, 5:27pm

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:

<!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>

xhtmlcoder · November 18, 2010, 10:08am

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.

<!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>
    [COLOR=Magenta]<div id="bodycontent">[/COLOR]
      [COLOR=Magenta]<h1>[/COLOR]
        <a href="index.html">Guy Heywood</a>
      [COLOR=Magenta]</h1>[/COLOR]
      <h2>
        Photography
      </h2>
      <div style="position:absolute;left:480px;top:45px">
        [COLOR=Magenta]<h2>[/COLOR]
          <a href="contact.html">Contact</a>
        [COLOR=Magenta]</h2>[/COLOR]
      </div>
      <div style="position:absolute;top:120px;left:30px;">
        <img src="gallery/13.jpg" width="753" height="500" [COLOR=Magenta]alt=
        "Gallery of Photos"[/COLOR] />
      </div>
      <div style="position:absolute;left:33px;top:620px">
        [COLOR=Magenta]<h3>[/COLOR]
          <a href="8.html">Previous</a>
        [COLOR=Magenta]</h3>[/COLOR]
      </div>
      <div style="position:absolute;left:105px;top:620px">
        [COLOR=Magenta]<h3>[/COLOR]
          <a href="10.html">Next</a>
        [COLOR=Magenta]</h3>[/COLOR]
      </div>
    [COLOR=Magenta]</div>[/COLOR]
  </body>
</html>

The above example is a slightly modified example but still could do with some work.

system · November 18, 2010, 10:34am

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!

xhtmlcoder · November 18, 2010, 1:26pm

Off Topic:

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