[deathsupport]

Hi, an acquaintence of mine lives in a town in Ontario (which is in a place called Canada) called Kitchener, and he does Parkour so he asked me to make him a website. So, in one weekend, I stuck together a layout and did some very simple PHP code, whereas someone else will take over coding it.
Anyway, here's the link, comments appreciated.
Also, it's currently expandable, but he doesn't want it like that anymore so I'm working on making it a static layout... which is theoretically a one minute job but I need to get some measurements of the layout, which requires opening PhotoShop...
http://www.kitchenerpk.org/index.php

[H4T]

Gray and light caramel....I'm not sure that works too well, lol, but maybe thats me; kinda hard to read the text on the menu on the left. The header and the body of the page don't match up on my screen (1280x1024, Firefox on XP), did you intentionally make the sizes mismatched? How are you doing the rollovers on the left menu? They aren't very smooth, are you using JavaScript or CSS?

Try spicing up the menu by adding smaller fonts and more margins. Overall its not a bad site though.

[deathsupport]

Well, the menu is getting an extra addition, which will be up soon.
The layout is made for 1024x768, IE! Firefox kinda fucks up the site, which is why I don't use it.
As for the header, I'm working on making it fit, but I don't wanna completely redo the header, so I'm going to probably add another small box there. Pretend that space is occupied ;p
As for the rollovers, it's JS, but it's not very smooth cause I didn't include the image preloader script. Eventually I will, when I get around to it... I just need one example, wanna add the other lines of code myself, cause it would require a redo of the menu in PS to get that script.
I will soon post a screeny of a few more buttons that will be included in the menu in the near future.

EDIT: here it is, once you login, you will have an extra menu. Here are the buttons for it too... you will probably only get to see the two sets of indented buttons if you're a mod.



MORE EDIT: H4T, view the site in IE. It looks different. There are a few issues I can't clear up, like the borders. In IE, there are nice borders, not in FF. It pisses me off.

[H4T]

Its hard to code sites to be cross-browser compatible, but if they aren't, you're losing visitors. Officially Firefox has 10% market share, and some websites like /. report a much, much higher percentage of Firefox or Opera users than IE. IE is horrible, the reason the site doesn't work in Firefox is because Firefox supports standards set in place by W3, and IE shrugs them all off; meaning that good, correct code works everywhere except IE, and shitty code doesn't work anywhere but IE, lol. The point is, don't cater to one browser, one resolution, or one OS, thats the difficult part about being a webby.

You don't need to resize the header, just resize the body section to size the middle down to match the header, that way neither the header or the menu needs to change.

Are the Access Control and Blocks parts subsections of KPK menu? Its hard to tell whats a subsection and whats a link.

I noticed you have a style sheet, but most of the styling is done in the page...never use the style tag in HTML unless you're testing or desperate. Its a good idea to seperate CSS from content, so that you can literally change the face of the site completely without touching the content at all. Same goes for the JS; externalize the code and call it locally in the HTML...the menu rollovers are pretty ugly, the reason they aren't perfect is the preloading, but also the amount of redundent code the interpreter has to sift through every time it needs to do a rollover.

The reason your site looks different in IE and Firefox is for a couple reasons, hopefully these tips will help you more than the previous comments
1) The page margins are wrong because you're explicitly stating them in the body tag of the page; this is not supported by anyone but IE (meaning the standards do not allow this). The leftmargin, rightmargin, etc attributes were all created by MS. In your stylesheet use this:

PHP Code:

body {
   margin-left: 10px;
   margin-top: 10px;
} 


2) The header in IE is justified but its centered in Firefox because of the simple reason that you are using "align='center'" for the table cell the header picture is nested in. So, Firefox, being the standards complaint browser it is, actually centers it, and IE ignores it completely. Just remove this and the header will go back to where its supposed to.

3) Your input fields are all messed up because they are styled using IE specific code (like border-bottom-color; thats another MS-made thing). The best thing I can do for you is give you a link for using CSS to style.
http://www.webcredible.co.uk/user-fr...ss-forms.shtml

4) As for the borders, you're getting different sized borders because in IE, and IE only, they actually ADD three pixels to the border in a little piece of crap called the Box Model. If you want your Firefox borders to work, research the Box Model trick...it only happens in IE.

So...still love IE? lol. All of your problems exist because of special cases created by MS that no one else obeys.

[deathsupport]

Lol, I love IE and always will.
Anyway, as for the header and content boxes, the guy I'm designing for wants to leave it like that; he wants a stationary layout made specifically for 1024x768, not anything smaller (although originally it was).
[QUOTE}I noticed you have a style sheet, but most of the styling is done in the page.[/quote]
I don't get it, my CSS file has all the styles i use for the fonts and stuff... I think I'm missing something you're saying.

As for the rollovers, they are not my top priority, but I'll look into a script that can make them look pretty. However, for me they show up just fine. But going on...

Another problem, that only appears in Firefox. Right beneath the header is a repeating pattern that stretches the length of the page. I need it to be 10 px high, so I made a table cell and stuck in a spacer image which I made 10 px high. It works in IE, but it doesn't show up in FF. So help, please.

And I'm going to go through everything you suggested, just not right now, it's late

[H4T]

IE is IEvil, lol. If the guy that you're desiging the site for wants it that way, then yeah, keep it that way; I know how freelance work goes :P lol

What I mean with the CSS is that you have a stylesheet linked in the HEAD section, for some reason, but nearly every element in the page has their own STYLE attribute with tons of code in them....all that code belongs (err, well, will benefit you much better in the long run) in the external CSS file. In case you ever need to make changes later on with the page, you should have ALL CSS styling in that external file.

I actually don't see your issue with the repeating pattern. Just below the header is the 45-degree slash pattern, but its exactly the same in IE and Firefox on my PC.

[deathsupport]

...about the repeating header, in FF it appears as a very thin line, although in IE it is 10 px high. And I can't seem to fix ithat.

Oh, and I finally get what you mean about the style stuff. I can stick some into the .css file, like the forms stuff, but there is some style stuff which pertains to ONLY a single table cell, cause of the borders and shading issues.

[H4T]

If it pertains to only one element, use the "id" atttribute. If you externalize the style, you can change it later on and have it affect all pages, instead of having to modify every page.
http://www.codeave.com/css/code.asp?u_log=4004

I don't see what you're talking about with the repeating thin line being different heights. Here's a screen shot, it looks the same to me. Except now you're missing the yellow border in IE....


Same height though...

[deathsupport]

...Ok, weirded.
ANyway, now the guy who is coding the site in PHP and everything has taken over, and when he finished I will bounce back to finish off all the style-related stuff.

[mdjzh]

Thanks for the info, I appreciate it.