Ok - that is a really good point! Makes complete sense to me - thank you for pointing it out. What I have found to help me it to have the coding and website view up at the same time - that way I can visually see what code is doing what. Not that I really understand how to manipulate is well yet - but I am starting to understand more and more. I just uploaded the updated page without the script error - sorry about that. What should my next step be? I am going to download Firefox now...
Back to top

I added the doctype and declaration - I hope I did this correctly. I am going to try to validate to see how many errors I get - I know there is probably going to be a ton.... :(

Update - ok, so just for kicks I typed in my web address of the test page - just to see - I knew it wouldn't be pretty and it wasn't. 52 erros OMG - am I like the worst web designer wanna be out here LOL and what is even more sad is I don't get almost all of them espeically since Dreamweaver is the one who created most of that coding - middle instead of center? Geesh! lol

I will work on those 52 errors AFTER I had a decent navigation system up! *sigh* hoping I can get navigation up by this weekend :( but I just can't seem to get it right!
Back to top

Believe it or not, 52 errors is actually quite good. Why? Because most of the errors vanish as you fix each one, they cascade down.

The best way is to just start on the first error, fix that, revalidate, and you'll generally see that more than one error went away.

Most errors are very simple to fix by the way, the usual ones are no alt tag in images.

For images, if it's a real image, not a layout type image, you just do it like this:

The second group of errors that is common is using the wrong attributes, deprecated thing, like this:

the third common error is using height="..." in table cells.

It's good practice to make all your html stuff in lower case by the way, it's easier to read. That's easy to do in dreamweaver, you just do site wide search and replaces of each offending html element, like replacing <BR> with <br>. Again, always be very careful doing site wide search and replaces. That's also how you'd get rid of things like <script language="javascript">, you do a sitewide search and replace.

A third easy to fix error is this:

All HTML attributes, basically anything that follows an = , like bgcolor=#4455cc has to be in " marks.

This is just good practice, and becomes second nature if you start out right. This is also very easy to fix, it's just a matter of adding "" around ALL HTML attribute values.

Then there's stuff like this:

That's slightly harder to understand, but all it means is that you have to use the true HTML character code for &, that is replace all instances of & on the website with &amp;

This thread has links to some HTML character entity resource pages, they will show you the codes to use for different entities.

After that, you have a few real errors. <p>'s in the wrong place in the HTML. And using some cut and pasted Microsoft special characters like TM, you have to replace for example the character in the HTML for TM with this: &trade;

Conclusion
There are very few serious errors on this page, once you clean up the easy stuff you'll find basically a few links that weren't closed properly, and a few <p> tags that are in the wrong place in the HTML. Really I think only 3 mistakes of a serious nature.

Advice on creating valid HTML
Fix the test page, make it validate. At that point, duplicate the page HTML to the other pages. You will have learned enough in that time to easily spot the common errors, and then when you want to check your pages for errors, you will tend to end up with just the real errors, which makes fixing the pages a snap.

Result of a short days work: GREAT!!!
In only a few hours you've gotten the test page to display correctly in MSIE, Firefox, and Opera. Congratulations!!! You get the newbie gold star award.

While valid code may seem like a headache, you'll soon realize that it's actually quite easy to achieve.

Because of the complexity of CSS, having valid CSS is especially important when it comes to debugging issues. Real CSS errors can result in fairly dramatic page layout rendering failures.

< Edited by erikZ :: Aug 10, 05, 12:59 >
Back to top

"Result of a short days work: GREAT!!!
In only a few hours you've gotten the test page to display correctly in MSIE, Firefox, and Opera. Congratulations!!! You get the newbie gold star award."

---

Awww, shucks - thanks! *grin*

This is a pain in the @#%#% butt I don't cuss so I will let you fill in the missing pieces LOL.

So did you happen to glance at my test page in Firefox again? I just looked at it AGAIN and I think I have everything fixed!!! YAY!

Now just fixing my other pages.....ick! :P

To confirm my test page is working well RIGHT NOW in Firefox right? Cause if so, I am going to use that as my guide to fix my other page later tonight when my precious bundle goes to sleep - we are going to have some Mommy and Baby time now....
Back to top

Your test page, as I noted above, has a few real errors in it. I'd spend the time to get it to validate, it's pretty easy, your 52 errors are really easy to fix for the most part, I checked. Once it validates, use that page as a template for the other pages. That means much less work in the long run.

It's always best to start with a good solid template page, then build the site out from that.

In your case, there are two things I'd fix before duplicating this page [but first make sure the CSS is working the way you want it:
1 - Put your CSS into a linked library file, like this:

• Cut and paste the CSS into a new blank page
  
• Create a folder on your site root called 'css'.
  
• Save the file as mommy-nav.css
  
• Add a link in the head tag to that CSS file:
  <link rel="stylesheet" href="css/mommy-nav.css" type="text/css">[/b]

Note that you will have to use relative paths in the href if you want to see the css file load on your home computer. In other words, don't start the path with a /, that will make Windows look to c: for the css folder. Paths are something it's good to understand how they work at some point, but this probably isn't the time.

There's a small change I'd make to the nav css, to make the borders all nice:

This should make the border be 2px everywhere, try it and you'll see the difference.

What I did was tell each td to have a border everywhere except the bottom side. Then I told the nav table to have a border on its bottom side.

That by the way is a good example of the cascade in CSS, you'll notice that first I say use a border on each side of the td, then the next line I say, don't use a border on the bottom. The browser adds all this stuff together, in order, the top item being overridden by any following item. That's the lazy way to do it, the other way would have been to explicitly tell the browser to make a border top, left, right. But it's shorter to do it the way I did it.

PHPBB BB code tips
By the way, to create quote and code boxes on phpbb, you just do this:

[ quote]stuff you want to quote[ /quote]
[ code]code you want to show as code[ /code]
Remove the space after [ to make the quotes and code blocks for real.
Back to top

Oh, saw this, this has a bunch of extra html in it, you don't need that at all:



This is redundant, the nav item is already in a container, a <td>, the <div> doesn't do anything but waste HTML in this case.

the <font> tag is deprecated and should never be used, you should always put the font in CSS, like this:


That does exactly the same thing, with much less code, and it's much easier to maintain.

Try to avoid using deprecated tags like <font>, <center>, and a few others.

CSS is for STYLING your page
That's what the Style in Cascading Style Sheets stands for. The easiest place to start with CSS is in just styling elements. Using it for layout is much harder, and should be avoided in general until you get a better sense of the stuff.
Back to top