Webheads: Please help me debug my HTML/CSS.

Factual Questions
1

I’m creating a new website for my LARP country, and I’ve hit a few snags. First, my CSS definitions for links in the main menu don’t transfer to the appropriate class (e.g., I’ll make define a.mainmenu to use the Verdana font and decorate the link on hover, but the text remains the default Times New Roman). Second, the page doesn’t want to load on IE for some reason… It only works with Firefox. I’ve been using Firefox to build it, but the HTML and CSS elements I use should be compatible with both.

The page can be found at http://agent.foxtrot.googlepages.com/testhires.html. If you see any other things in the source that you think could stand to be changed, please let me know.

Thanks a lot.

2

I’m a bit pressed for time at the moment and will respond later more indepth. A quick check using Firefox and the HTML Tidy addon reveals 39 warnings in your code. To start, your CSS comments are improperly used. That will cause some significant issues since they don’t work at all!

Change this …



<style type="text/css">
<!--
/*
  The original RedSilver Theme for phpBB version 2+
  Created by subBlue design
  http://www.subBlue.com

  Credit where credit is due.  This website will be modeled after the RedSilver Theme for phpBB version 2+ as stated above to allow for seamless transition between both.  No permission has been requested from the originators.  If any issues arise, please contact the Site Admin at Agent.Foxtrot@*nospam*gmail.com (remove the *nospam* when emailing). */

body { margin: 0;
       background-color: #DED8C8; }
font,th,td,p,a { font-family: Verdana, Arial, Helvetica, sans-serif;
		 font-size: 11px; }
a:link,a:active,a:visited { font-size: 11px; color : #646464; }
a:hover	{ text-decoration: underline; color : #DD6900; }
hr { height: 0px; border: solid #F2F0E9 0px; border-top-width: 1px;}
div { margin: 0; }

.mainmenu { font-size : 11px; color : #000000 }
a.mainmenu { text-decoration: none; color : #646464;  }
a.mainmenu:hover{ text-decoration: underline; color : #DD6900; }
//-->
</script>

to this …



<!-- 
The original RedSilver Theme for phpBB version 2+
  Created by subBlue design
  http://www.subBlue.com

  Credit where credit is due.  This website will be modeled after the RedSilver Theme for phpBB version 2+ as stated above to allow for seamless transition between both.  No permission has been requested from the originators.  If any issues arise, please contact the Site Admin at Agent.Foxtrot@*nospam*gmail.com (remove the *nospam* when emailing). 
-->

<style type="text/css" rel="stylesheet">
<!--

body { 
margin: 0;
background-color: #DED8C8;
}
font,th,td,p,a { 
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
}
a:link,a:active,a:visited { 
font-size: 11px; 
color : #646464; 
}
a:hover	{ 
text-decoration: underline; 
color : #DD6900; 
}
hr { 
height: 0px; 
border: 0 solid #F2F0E9; 
border-top-width: 1px;
}
div { margin: 0; }

.mainmenu { font-size : 11px; color : #000000 }
a.mainmenu { text-decoration: none; color : #646464;  }
a.mainmenu:hover{ text-decoration: underline; color : #DD6900; }
//-->
</script>

You HR CSS makes no sense sine it’s value is essentially nothing, the subsequent color and border-top with are now irrelevant.

Check you opening table code. It’s missing a “>”.

Since you are using CSS all the embedded non-standard code is redundant. For example, you don’t need this:

<body bgcolor="#DED8C8" topmargin=“0” leftmargin=“0” marginwidth=“0” marginheight=“0” text="#000000" link="#646464" vlink="#646464">

when all you should have is this:

<body>

with body defined in the CSS.
Anything that is aligned left is a waste of code since the default is always aligned left.

Don’t do this:

<td bgcolor="#FCFCFA"><div align=“center”>

when it should be in the CSS to produce this:

<td class=“odd center”>
More later.

3

Duckster, I’ve made your recommended changes with regard to the CSS header, but nothing seems to have changed. New document can be found here. Thanks for the help thus far.

4

Line ~49; it is </script> but should be </style>.

There’s a bunch of other things but I hate being That Guy. :smiley:

5

When in doubt, add your font definitions directly to each element, even if you expect them to be inherited. Give your “a” styles and .mainmenu and a.mainmenu font families.

6

Here is a revised version that works and that validates: http://blnwebdesign.com/afoxtrot.html

There was A LOT that needed to be fixed. First of all, all your css was commented out - that is probably way you couldn’t see it in IE. Another problem is that many of your table tags (tr, td) had no closing. Also there was no need to use font tags, all the styling is taken care of in the css.

My revised version validates and works in Firefox and IE: http://validator.w3.org/check?uri=http%3A%2F%2Fblnwebdesign.com%2Fafoxtrot.html

7

maybe something like this?

8

Maybe even formatted correctly. :smack:

9

You beat me to it. Nice work. :slight_smile:

There is still more than can be done but yours is much better than the original.

10

Sorry for the useless bump, but you all have been immensely helpful. Thank you very much.