You've made a lot of progress, but there are still a lot of niggling little issued plaguing the codebase.
I'm trying to figure out where/what/why you'd go with 76% as the font size... the default on 96dpi systems is 16px, so 75% would give you an even 12px on the majority of systems, and the resize would be the same cross-system too for the most part... so not sure where you got that extra 1% from... Also, 12px 96dpi and 15px 120dpi is a wee bit on the small size for most users; honestly, I didn't even think you'd made the conversion to %/em because everything is still so bloody small! I would HIGHLY suggest 85% which gives you 14px on the majority of systems, 10px for 75dpi and 17px for large font/120dpi users...
It's generally accepted that 12px is bare minimum font size and the ideal is 14px for 96dpi users... and that's 15/17 for large font/120dpi users.
Your CSS has a number of issues that I feel need covering.
font: 76% Arial, Helvetica;
Without at least one of default weight or style, some browsers will ignore that entire font declaration. You CANNOT trust the default line-height cross-browser so if you change font-size you should ALWAYS re-declare your line-height, and you forgot to include a generic fallback family, meaning some users (*nix typically) are going to get a SERIF font since that's usually the default. Combine this with what I said above about the default size, and the ideal declaration there should be:
font:normal 85%/140% arial,helvetica,sans-serif;
Then you have:
background-image: url("images/background.png");
IF you are using a background-image I suggest setting a background color that is close to the image, that way images off users still get an attractive layout. It actually ends up less code since you can then use the condensed "background" property. I'd also point out that in CSS you do NOT have to put quotes around url values unless there are spaces in there.
So...
background:#DEF url(images/bodyBackground.png);
Notice I would also give it a more verbose name. Background is a bit vague since there are multiple backgrounds on the page -- using a more verbose name may involve a whopping four extra characters, but it makes it clear as day what's going on to the next poor shlub to maintain the codebase. (or even yourself a year from now)
You also set the margin - I HIGHLY suggest adding a reset to the CSS. The one I advocate goes thus:
Code: Select all
/* null margins and padding to give good cross-browser baseline */
html,body,address,blockquote,div,
form,fieldset,caption,
h1,h2,h3,h4,h5,h6,
hr,ul,li,ol,ul,
table,tr,td,th,p,img {
margin:0;
padding:0;
}
img,fieldset {
border:none;
}
Browsers do not set margins, paddings or borders in a consistent manner because the HTML specification doesn't actually say what the default appearance SHOULD be. The spec sucks in that regard since there's lots of "may", "would", "could"... and very little "should" or god forbid "must"... and when the specification is vague, it seems every browser maker goes out of their way to do things different.
The above reset is just under a quarter k, making it larger than some, smaller than most... the uber small "universal reset" of "* { padding:0; margin:0; }" is problematic since it pretty well shtups form elements -- on the other side of the coin you have fat bloated train wrecks like "reset reloaded"; or as I like to call it "you give resets a bad name". That's not a reset, that's a framework. The point of a reset is to make all browsers start out with the same values on stuff -- not to do half your layout.
Ok, moving on...
If you say A, you don't need to restate the psuedostates. By default psuedostates inherit from their parent. I also highly advise AGAINST setting :visited to the same as :link unless it's inside a menu -- that's turning off an accessibility aid! The same goes for the underlines. Not everyone can see color and turning off underlines on links isn't just bad practice, it's rotten accessibility unless you're styling them otherwise like on a menu.
Code: Select all
a:hover { text-decoration: underline; }
a:active
{
color: #ff0000;
text-decoration: underline;
}
I'm not sure why you are giving just gecko/presto/webkit keyboard users a different style from hover... or why you omitted IE users (:focus)... Really those states should be taking the SAME values.
If you use the reset, that's done for you.
So that section I'd have like this:
Code: Select all
a {
color:#00F;
}
a:visited {
color:#008;
}
a:active,
a:focus,
a:hover {
color:#F00;
}
Next up we have something bizarre -- not even sure what you're trying to accomplish other than pushing the menu down 9px from the top in Opera (since O doesn't allow fonts to go below 9px by default), 1px down from the top in most browsers, and clear off the screen in older IE flavors.
Code: Select all
#navskip
{
color: #E6EFFF;
font-size: 0pt;
}
I'm assuming you are trying to hide them -- setting 0pt does not work for hiding an element, that's what display:none or visibility:hidden is for... If you are worried about screen readers not seeing it, that's when position:absolute; left:-999em; is a better answer.
I usually use display:none for screen, display:block in my handheld.css since for many screen reader users those links are more hindrance than help.
Code: Select all
#menu h1
{
font-size: 1.2em;
margin: 0;
}
#menu h2 { font-size: 1.2em; }
Those are not headings, why are you using heading tags? Also, as mentioned set the line-height again... it's why they don't line up cross-browser at all.
Code: Select all
#menu fieldset { float: left; padding: 0; margin: 4px; }
Not inside a form, no inputs, selects or textarea's (aka fields) inside them -- why are you using fieldsets? If you are choosing a tag based on it's default appearance, you're choosing the wrong tags.
Code: Select all
#sidebar
{
max-width: 220px;
float: left;
margin: 32px 20px 0 10px;
}
Explains the strangely shape-shifting layout and float drop... Just set the width -- your content area is float dropping here at some widths, so the float technique you are trying to build #sidebar and #content with are broken.
Code: Select all
.ACE78C { background: #c8ffc8 url('images/ACE78C.gif'); }
.B0D8FF { background: #e6efff url('images/B0D8FF.gif'); }
.FFA0A0 { background: #ffc0c0 url('images/FFA0A0.png'); }
.FFFF78 { background: #ffff90 url('images/FFFF78.gif'); }
Presentational CSS -- defeats one of the reasons to even use CSS in the first place! Aka, getting presentation out of the markup. Say in the markup WHY they are receiving that color, not what color they are receiving.
In the markup, you've got a ridiculously overstuffed keywords meta with little relevance to the page content. Pretty much guaranteed google will ignore it, and I'm willing to bet most
You read up on the keywords meta on sites like WSO, and you'll learn they should be relevant to the content on the page, you should only have eight or nine of them, and it's best to keep the entire thing under 128 bytes. You have NONE of that. You've got at least twice as many characters as the "ignore" cutoff, most of those words are not on the page, and you've got 31 of them -- basically three and a half times as many as should be in there.
Again, you're still using paragraphs HTML 3.2 style -- while that's VALID, it also means you are not using them properly according to HTML 4. They are a block level container, and as such should be wrapping their content... they are NOT supposed to be used as standalone tags anymore.
... and across the page you still are using P, BR and STRONG -- especially STRONG -- to do numbered heading tags job. They are headings, mark them up as headings. You also strong an entire paragraph which from a SEO standpoint is likely to get that para slapped down and ignored -- strong just the key phrases, not three sentences in a row!
These too:
<H2><A href="companylist.html">By Company</A></H2>
<H2><A href="search.html#legal">By Legal Status</A></H2>
<H2><A href="search.html#video">By Video Mode</A></H2>
<H2><A href="search.html#year">By Year Released</A></H2>
<H2><A href="misc/source.html">Games with source code</A></H2>
<H2><A href="misc/cheats.html">Games with cheat codes</A></H2>
raise some questions -- headings that aren't followed by a lower order heading and/or content aren't headings.
<H2>By Game Title</H2>
<INPUT type="text" name="Title" size="12"><INPUT type="submit" value="Search">
That shouldn't be a heading, that's a label... likewise none of those anchors are fields, so using:
<LEGEND>Game Search</LEGEND>
May not be appropriate either.
It wasn't just the menu I was referring to on the legends, fieldsets and headings... Though yes, it's the greatest offender.
Though if you're not happy with the appearance as you mentioned, it may indeed be time for a retread. You've got great content -- now it's just a matter of presenting it in an accessible manner... preferably not as HTML 3.2 in HTML 4's clothing.
If everyone is thinking the same, somebody isn't thinking.