# Webheads: Please help me debug my HTML/CSS.

**URL:** https://boards.straightdope.com/t/webheads-please-help-me-debug-my-html-css/444953
**Category:** Factual Questions
**Created:** [April 11, 2008, 9:54pm UTC](https://boards.straightdope.com/t/webheads-please-help-me-debug-my-html-css/444953 "2008-04-11T21:54:14Z")
**Posts on this page:** 10
**Page:** 1

<div class="post-metadata">

### Author: ![Agent\_Foxtrot](https://avatars.discourse-cdn.com/v4/letter/a/9fc29f/32.png) [@Agent\_Foxtrot](https://boards.straightdope.com/u/Agent_Foxtrot)
#### Post date: [April 11, 2008, 9:54pm UTC](https://boards.straightdope.com/t/webheads-please-help-me-debug-my-html-css/444953/1 "2008-04-11T21:54:14Z")

</div>

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](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.

---

<div class="post-metadata">

### Author: ![Duckster](https://sea3.discourse-cdn.com/straightdope/user_avatar/boards.straightdope.com/duckster/32/1244_2.png) [@Duckster](https://boards.straightdope.com/u/Duckster)
#### Post date: [April 11, 2008, 10:15pm UTC](https://boards.straightdope.com/t/webheads-please-help-me-debug-my-html-css/444953/2 "2008-04-11T22:15:36Z")

</div>

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 …

```auto

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

```auto

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

---

<div class="post-metadata">

### Author: ![Agent\_Foxtrot](https://avatars.discourse-cdn.com/v4/letter/a/9fc29f/32.png) [@Agent\_Foxtrot](https://boards.straightdope.com/u/Agent_Foxtrot)
#### Post date: [April 11, 2008, 10:44pm UTC](https://boards.straightdope.com/t/webheads-please-help-me-debug-my-html-css/444953/3 "2008-04-11T22:44:43Z")

</div>

**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](http://agent.foxtrot.googlepages.com/testhires2.html). Thanks for the help thus far.

---

<div class="post-metadata">

### Author: ![TonyF](https://avatars.discourse-cdn.com/v4/letter/t/9de053/32.png) [@TonyF](https://boards.straightdope.com/u/TonyF)
#### Post date: [April 11, 2008, 10:55pm UTC](https://boards.straightdope.com/t/webheads-please-help-me-debug-my-html-css/444953/4 "2008-04-11T22:55:55Z")

</div>

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

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

---

<div class="post-metadata">

### Author: ![ZipperJJ](https://sea3.discourse-cdn.com/straightdope/user_avatar/boards.straightdope.com/zipperjj/32/211_2.png) [@ZipperJJ](https://boards.straightdope.com/u/ZipperJJ)
#### Post date: [April 12, 2008, 12:03am UTC](https://boards.straightdope.com/t/webheads-please-help-me-debug-my-html-css/444953/5 "2008-04-12T00:03:31Z")

</div>

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.

---

<div class="post-metadata">

### Author: ![Green\_Cymbeline](https://sea3.discourse-cdn.com/straightdope/user_avatar/boards.straightdope.com/green_cymbeline/32/9244_2.png) [@Green\_Cymbeline](https://boards.straightdope.com/u/Green_Cymbeline)
#### Post date: [April 12, 2008, 2:51am UTC](https://boards.straightdope.com/t/webheads-please-help-me-debug-my-html-css/444953/6 "2008-04-12T02:51:52Z")

</div>

Here is a revised version that works and that validates: [http://blnwebdesign.com/afoxtrot.html](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](http://validator.w3.org/check?uri=http%3A%2F%2Fblnwebdesign.com%2Fafoxtrot.html)

---

<div class="post-metadata">

### Author: ![shigyu](https://avatars.discourse-cdn.com/v4/letter/s/a183cd/32.png) [@shigyu](https://boards.straightdope.com/u/shigyu)
#### Post date: [April 12, 2008, 3:23am UTC](https://boards.straightdope.com/t/webheads-please-help-me-debug-my-html-css/444953/7 "2008-04-12T03:23:47Z")

</div>

maybe something like this?

> [@](#):
>
> \<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “[http://www.w3.org/TR/html4/strict.dtd](http://www.w3.org/TR/html4/strict.dtd)”\>  
> \<html\>  
> \<head\>  
> \<base href=“file:///c:/Documents%20and%20Settings/Matt/Desktop/testhires\_files/”\>  
> \<meta http-equiv=“Content-Type” content=“text/html; charset=iso-8859-1”\>  
> \<meta http-equiv=“Content-Style-Type” content=“text/css”\>  
> \<meta name=“keywords” content=“LARP, Darkon, Laconia, Sparta, Spartans, Spartan, Greece, role-playing, roleplaying, RPG, live action role playing, live-action role playing, foam fighting, gaming”\>  
> \<meta name=“description” content=“This is the official website for the nation of Laconia in the Darkon Wargaming Club, Inc.”\>  
> \<title\>Laconia\</title\>  
> \<style type=“text/css”\>  
> /\*  
> The original RedSilver Theme for phpBB version 2+  
> Created by subBlue design  
> [http://www.subBlue.com](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;
> padding: 0;
> background-color: #FFFFFF;
> font-family: Verdana, Arial, Helvetica, sans-serif;
> font-size: 11px;
> color: #000000;
> }
> 			
> h1 {
> height: 150px;
> background: #FFFFFF url(top.jpg) no-repeat;
> font-size: 0;
> text-indent: -5000px;
> margin: 0;
> }
> 			
> table {
> border-collapse: collapse;
> }
> 			
> td {
> padding: 0;
> vertical-align: top;
> }
> 			
> a,
> a:active,
> a:visited {
> text-decoration: none;
> color: #646464;
> }
> 			
> a:hover	{
> text-decoration: underline;
> color: #DD6900;
> }
> 
> #brotherhood {
> font-weight: normal;
> font-style: italic;
> font-size: 17px;
> }
> 			
> #navigation {
> list-style-type: none;
> text-align: center;
> margin: 0;
> height: 34px;
> background: url(menubkg.gif) repeat-x;
> font-size: 14px;
> }
> 		
> #navigation li {
> display: inline;
> margin: 10px;
> line-height: 30px;
> }
> 			
> #content td {
> padding: 33px 3px;
> background: #FCFCFA url(gradient.gif) repeat-x;
> }
> 		
> &lt;/style&gt;
> &lt;/head&gt;
> &lt;body&gt;
> &lt;table id="body"&gt;
> &lt;tr&gt;
> &lt;td style="width: 15px; background: url(a.gif) repeat-y;"&gt; &lt;/td&gt;
> &lt;td&gt;
> &lt;h1&gt;Laconia&lt;/h1&gt;
> &lt;ul id="navigation"&gt;
> &lt;li&gt;&lt;a href="/index.html"&gt;Main&lt;/a&gt;&lt;/li&gt;
> &lt;li&gt;&lt;a href="/gods.html"&gt;The Greek Gods&lt;/a&gt;&lt;/li&gt;
> &lt;li&gt;&lt;a href="/history.html"&gt;Laconian History&lt;/a&gt;&lt;/li&gt;
> &lt;li&gt;&lt;a href="/roster.html"&gt;Country Roster&lt;/a&gt;&lt;/li&gt;
> &lt;li&gt;&lt;a href="http://laconia.informe.com"&gt;Forums&lt;/a&gt;&lt;/li&gt;
> &lt;li&gt;&lt;a href="/join.html"&gt;Joining Laconia&lt;/a&gt;&lt;/li&gt;
> &lt;li&gt;&lt;a href="http://www.darkon.org"&gt;Darkon&lt;/a&gt;&lt;/li&gt;
> &lt;li&gt;&lt;a href="/gear.html"&gt;LARPer Resources&lt;/a&gt;&lt;/li&gt;
> &lt;/ul&gt;
> &lt;table id="content"&gt;
> &lt;tr&gt;
> &lt;td&gt;
> &lt;p&gt;&lt;strong id="brotherhood"&gt;Laconia is a brotherhood.&lt;/strong&gt; We are a family. Borne of war, bound together in friendship, we Spartans strive to maintain the highest standards of fairness in play, skill in combat, sacrifice for the greater good of the nation, and above all else, honor. We prize service to the game of Darkon, and many in our ranks have held and currently hold positions on the Noble Council, the Executive Board, and as various Marshals. We push to constantly better ourselves both mentally and physically so that we may in turn better serve our patron god, &lt;b&gt;Tharros&lt;/b&gt;, the black lion whose name means Courage. Laconia cannot be bought, corrupted, or broken. We live for the fight, and we die for our friends.&lt;/p&gt;
> &lt;p&gt;Of course, the most important reason for belonging to Darkon is fun. We would not be who we are if we did not have the ability to occasionally laugh at ourselves. When the fighting is done, we open our gates to friend and foe alike.&lt;/p&gt;
> &lt;p&gt;&lt;img src="laconiagroupbarehead.jpg" alt="The Laconia group."&gt;&lt;/p&gt;
> &lt;/td&gt;
> &lt;td&gt;&lt;img src="front_pic.gif" alt="We are Laconia."&gt;&lt;/td&gt;
> &lt;/tr&gt;
> &lt;/table&gt;
> &lt;/td&gt;
> &lt;td style="width: 15px; background: url(b.gif) repeat-y;"&gt; &lt;/td&gt;
> &lt;/tr&gt;
> &lt;/table&gt;
> &lt;/body&gt;
> 
> ```
> 
> \</html\>

---

<div class="post-metadata">

### Author: ![shigyu](https://avatars.discourse-cdn.com/v4/letter/s/a183cd/32.png) [@shigyu](https://boards.straightdope.com/u/shigyu)
#### Post date: [April 12, 2008, 3:24am UTC](https://boards.straightdope.com/t/webheads-please-help-me-debug-my-html-css/444953/8 "2008-04-12T03:24:52Z")

</div>

Maybe even formatted correctly. :smack:

---

<div class="post-metadata">

### Author: ![Duckster](https://sea3.discourse-cdn.com/straightdope/user_avatar/boards.straightdope.com/duckster/32/1244_2.png) [@Duckster](https://boards.straightdope.com/u/Duckster)
#### Post date: [April 12, 2008, 3:42am UTC](https://boards.straightdope.com/t/webheads-please-help-me-debug-my-html-css/444953/9 "2008-04-12T03:42:38Z")

</div>

[QUOTE=nyctea scandiaca]  
Here is a revised version that works and that validates: [http://blnwebdesign.com/afoxtrot.html](http://blnwebdesign.com/afoxtrot.html)  
[/QUOTE]

You beat me to it. Nice work. 🙂

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

---

<div class="post-metadata">

### Author: ![Agent\_Foxtrot](https://avatars.discourse-cdn.com/v4/letter/a/9fc29f/32.png) [@Agent\_Foxtrot](https://boards.straightdope.com/u/Agent_Foxtrot)
#### Post date: [April 15, 2008, 6:18am UTC](https://boards.straightdope.com/t/webheads-please-help-me-debug-my-html-css/444953/10 "2008-04-15T06:18:25Z")

</div>

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