May I have your comments on http://www.ksuicehockey.com/dev/ ? It's still a work in progress.

I'm aware that the site is dirty. Hockey is a dirty game, and I'm trying to mimic that in the site design.

I'm intersted in layout comments.
The news archive section is gmail style. If I move the features photos to the right, the gmail style won't fit. I have to drop the excerpt.

Known Issues:
Links are not styled yet.
The footer is not styled yet.

PS: Disable AdBlock.

I haven't set the font yet. However, what you are seeing is Arial. Times New Roman is serif. The colours are the KSU colours.

The header seems good.

The menu looks somehow wierd and you should apply background-image to some yellow, becouse when that image isn't loaded yet I see black background and black letters.

The only thing I really don't like is those fonts you have used. You reallly should consider some other ones.

Those headers are a bit wierd too.

Other than that it seems alright.

You've done a good job so far.

2 suggestions:

Make menu items bigger (or thicker yellow bar). Menu gets lost with everything surrounding it. Also maybe add a more noticeable hover.

Change that body font to something easier on the eyes.

I meant to say you've done.

well, not only html font you can use. For menu items images can be used. You create the desgin in PS and the cut the menu.

like here in the menu
http://w3.enternet.hu/cadszem/sinka/5let/

Here's a site that lists out all of the common fonts between computers.

As for your site, only two things that bug me - the yellow half of your lower headers (news archive, feature photos) and the white-on-yellow rollover of the top menubar. The rollover is hard to read and the headers make my eyes do wiggly things.

Also, though I know you're going to change the fonts, on my screen (Firefox 1.0.4 on OS X), your main body font is showing up as Times New Roman. Your headers and the menubar are Arial, but the body is definitely a serif font and my serif defaults to Times, as I'm lazy here at home. The fonts are also defaulting to standard blue on my screen. Just looking in the DOM Inspector, it doesn't appear that there are actually any font rules being applied to the body's text.

Also, it's spelled "Helvetica." that shouldn't be my problem here though, since I have Arial installed too.

I don't recall at the moment - I remember there was something early on about Camino that really bugged me in comparison with Firefox, but in addition to being lazy, I'm also highly forgetful.

Sorry about the Times comment, but it appeared that up above you were saying that the site was all Arial and not Times since Times was a serif, rather than saying the serif parts were Times. I just wanted to make sure you didn't think your whole site was reading as sans-serif when it wasn't. That's all clearer now.

I also totally zoned on our poor Linux compadres. Here's another site that has a smaller table that includes 'em.

Okay, i'll throw it out there: please for the sake of PC users who have it installed don't use Helvetica, it renders horribly on every windows machine I've tried it on (letter spacing goes wobbly, and it's always anti-aliased to the point of feeling blurry regardless of clear-type settings). If people are going to insist on using it I'd suggest throwing something else that's more common on windows machines in your list of fonts first (tahoma or trebuchet MS, maybe) so windows will grab one of those instead.

IE is driving me nuts. The page looks fine in Opera and Firefox. I tried different solutions and both have the same result (scoreboard, footer, and h2 problem under our sponsors).

i have come across !important before but i never knew the actual use for it.

for hidding stuff from IE / FF i used the comment style for HTML

code here; [this is read by FF and IE]
<-- code here; --> [this is read only by IE and ignored by FF (thus keeping the previous instructions) ]

However this method does not let the css validate.
Thanks for the comment. I will try out this method too.

I'm not doing anything radical that IE does not support.

I never assumed you would be, it's just that with all the IE quirks and box model issues on occasion, sometimes you need to adjust just for IE.

I think it may have been explorer line height. I had a buch of floated spans. There was a huge gap under them. I changed them to divs and the gap is gone.

It's Dreamweaver. Somehow it adds a weird character to the beginning of *.inc files. Do not use Dreamweaver to create or edit .inc files.

It looks good but the black background on the dark patterned background is hard to see.

Points:

1. Too many divisions and a lot are not needed. Why are you putting an image as your banner? It should be the background image of an h1. (CSS lets images cache and cuts down on loading time so you don't have to load a 59kb image each time).

2. Style the body, don't create a page division.

3. This is horribly semantically incorrect:
<div id="scoreboard">
<div id="next-game-title">
<span class="yellow">next</span>game
</div>

It should be,

<h2><span>next</span> game></h2>
<p id="scores">friday, jan 6 - 9.40pm vs texas a&m at town center</p>
<dl>
<dt>Name of team #1 - team logo as background image</dt>
<dd>score</dd>
<dt>Name of team #2 - team logo as bg image</dt>
<dd>score</dd>
</dl>

That covers that.

4.
<div id="page-title">
<h1>news</h1>
<img src="./img/page-titles/news.jpg" alt="KSU Ice Hockey News" />
</div>

NO.

<h3>news</h3>
h3 { background: #fff; border-left: 5px solid #f0c902; border-top: 1px solid #000; border-bottom: 1px solid #000; }

That will give exactly the same effect.

5. You don't need to put divisions around each section of your site (ie. news-archives, news, etc).

Also, not a required thing, but you can cut down on your CSS greatly by not indenting so much (ie. brackets don't need to be on a new line) and you don't need to add such large headers.

You still shouldn't use another h1. H1 is supposed to be used only for the main page header. The one at the top. There should only be one h1 on any given page.

Woops, I said that wrong... lemme try again.

I meant that "news" should not be in an h1. The main header of the page, currently the image, should be in an h1. "News" should be an h2, and the sub-categories of that should be h3's.

3. Being semantically correct doesn't mean it's meant to be printed. That's what a separate print stylesheet is for (in which you would display: none; that scoreboard). Think of your content as if it wasn't styled. You would want your title, Next Game, to be at the top, followed by the next games and then the listing of the scores.
Your way is semantically incorrect and you are raping divisions.

5. So what's wrong with giving the ID to the header?

And your organization thing should be an unordered list.

2. As for printing things out - most web browsers can print things that are background images - you have to set it up that way.
Refer to: http://alistapart.com/articles/goingtoprint/ for instructions on creating a print stylesheet.

I'd appreciate if you can point me towards a Dreamweaver extension that automatically optimizes the files when uploaded via FTP or an FTP client that has that functionality.

I don't use Dreamweaver so I couldn't help you.

Nick - I have no idea how to tell either Safari or Firefox to print background images or colors. They are both "smart" and decide not to print them so that pages without print layouts won't waste all your ink but they end up being annoying to making print styles. You said that you just have to set it up that way... how?

I don't know. I don't have access to Safari, just Opera, IE, FF and Konqueror.

=\

No FF, Opera or anything else?

Well, I was about to add some functionality, and the divness got in the way. So, it is now semantically correct, except the for the scoreboard. I really don't think (nor understand) that it should be a header.

You don't see how a scoreboard is textual information?

I sure as heck consider the score of a game information as well as the teams playing.

nick1presta, is it semantically correct now?