View Full Version : I think I'm ready for an honest review

11-03-2005, 03:57 AM
I tried very hard to get away from tables with this and I think I did ok...

I ran this page (http://www.suncoastwebdesigns.com/test/susbcba) through validation and it came up with a couple of errors - namely the images in the right column - that I'm not sure how to correct so by all means offer any suggestions.

The other pages have not been corrected yet - they're quite out of alignment

I've also found that although I've changed the left column links to a list - FF is not displaying it properly - any thoughts?

Okey dokey then - let the games begin!!

Thanks everyone!

11-03-2005, 05:37 AM
The image validation errors are because you don't have the height and width values in double quotes, e.g. height="127"

You also have a link tag in your body and it doesn't have a closing /

Green Beast
11-03-2005, 12:31 PM
Pretty easy fixes for the errors.

1) Get the second link for the CSS out of the div in the body. Not needed as you have it in the head as it should be already.

2) p align="center" should be in the CSS for a class. ie, p class="center"

.center {
text-align : center;

3) Not an error, but... you have a class called pageimages with style in the image as well. I'd suggest putting the float in the css in the class, or make another for the float. Change from this...

<img src="images/usbcLogo.gif" alt="USBC Logo" style="float:left" width="139" height="80" class="pageimages" />

To this...

<img src="images/usbcLogo.gif" alt="USBC" width="139" height="80" class="left" />

With this new left class...

img.left {
float : left;

4) As it says, quote your attributes... height="value". Easy one.

5) border="0" belong in your CSS

pageimages {
border : 0; (or border : none;)

6) The target attribute is deprecated in XHTML. Remove that. IF you simple MUST force people to open links in a new window (a practice which is falling out of favor) do it like this.

onclick="target='_blank'" onkeypress="target='_blank'"

"onkeypress" is for keyboard users, and if scripting isn't enabled, it'll open internally.

7) You need to do something like image replacement (http://www.mezzoblue.com/tests/revised-image-replacement/) for your banner so your heading is seen if images are off and CSS is on.

8) Padding is needed for your content are.

9) Nav links are broken, but I didn't invesitigate. I only see home and then the list goes bad.

10) Same with the CSS. I'd go through it and fix things up a bit: It's missing a lot of the basics, heading, etc, but has a ton of classes.

It's not bad, though. Looks pretty good in the mark-up, aside from the errors. I applaud your effort.

Hope this helps.

(Used Firefox 1.0.7 to check it out, broadband, 1024x768)

11-03-2005, 02:00 PM
On the list not working correctly:

you have this in your css:

#left-col-nav a{
float: left;
margin: 0px;
text-decoration: none;
background-color: #003366;
padding: 0px;

your floating the links.

and you have a typo of sorts

<div id="left-col"><link href="../css/3-col-css.css" rel="stylesheet" type="text/css">

I don't know for sure if that makes a difference but your trying to call your style sheet again.

You have a lot of redundant code in there from what I see. I took everything from your source and css that had anything to do with the lezt column (the column, navigation, lists, links, etc...) and cut it down to this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

<html xmlns="http://www.w3.org/1999/xhtml">
<title>Suncoast USBC Bowling Association - Welcome</title>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1" />
<style type="text/css">
#left-col {
float: left;
text-decoration: none;
font-family: "Trebuchet MS";
font-size: 12px;
color: #FFFFFF;
background-color: #003366;
#left-col ul, li {
padding: 0;
margin: 5px 5px 5px 0;
list-style: none;
#left-col li a:link, a:visited, a:active {
display: block;
color: #fff;
text-decoration: none;
padding: 5px;
text-indent: 10px;
#left-col li a:hover {
background: #fff;
color: #036;

<div id="left-col">
<li><a href="index.cfm">Home</a></li>
<li><a href="president.cfm">President's Letter</a></li>
<li><a href="bylaws.cfm">Bylaws</a></li>

<li><a href="boardmembers.cfm">Board Members</a></li>
<li><a href="committees.cfm">Committees</a></li>
<li><a href="statetournament.cfm">State Tournament</a></li>
<li><a href="calendar.cfm">Calendar</a></li>
<li><a href="#">West Zone</a></li>
<li><a href="#">Yearbook</a></li>

<li><a href="#">Guest Book</a></li>
<li><a href="#">Join Us</a></li>
<li><a href="#">Contact Us</a></li>

It seems to work fine for me this way. Maybe it's more of what you had in mind.

if you need anymore help with it feel free to ask away.

11-04-2005, 12:33 AM
OG - don't know how I missed that with the quotes and I looked for the link but couldn't find it

GB - I knew there was something easy about it...question about the target - I don't want for people to click on these links and then leave my site - I'd like for my site to see have some focus - any other suggestions to achieve that?

Harbinger - thank you for taking so much time - I will test your css and see how it goes

Thanks again - will probably repost some time tonight

Green Beast
11-04-2005, 12:41 AM
GB - I knew there was something easy about it...question about the target - I don't want for people to click on these links and then leave my site - I'd like for my site to see have some focus - any other suggestions to achieve that?

I understand. If the content is good though, you shouldn't lose anyone.

Regarding focus, on the links I assume, yes? You can do it by simply adding a:focus, a:active to the a:hover, or you can make a separate entry for just those two if you want the styling to differ from the a:hover styling. Hover get one thing, click and get another.

Hope this helps.

11-04-2005, 01:08 AM
Regarding focus, on the links I assume, yes?

I meant for the site in general - in general I will tend to hit the back button if I click to another site - but not everyone does and I wanted to make sure that my site doesn't get lost.

I remember a long time ago I used to use frames to achieve that - but I'm finding the frames are not recommended and I don't think that our site really needs frames anyway.

Does that make sense? Or am I being selfish?

11-04-2005, 01:13 AM
your floating the links


<div id="left-col"><link href="../css/3-col-css.css" rel="stylesheet" type="text/css">


I took everything from your source and css that had anything to do with the lezt column (the column, navigation, lists, links, etc...) and cut it down to this...#left-col {
float: left;
text-decoration: none;
font-family: "Trebuchet MS";
font-size: 12px;
color: #FFFFFF;
background-color: #003366;

Did you mean that I should leave out the #left-col-nav altogether?

Green Beast
11-04-2005, 01:30 AM
Focus on content. Make your content so enriching, rewarding, and all those other good "ings" that not only does the visitor come to your site, but they stay a while. Remember that they came to your site volutarily, they should be allowed to leave the same way. You just focus on your content, keep it as fresh as possible, quality stuff, and enhance the experience of the visitors by doing the very best you can to accommodate their needs.

It's like a store, the customers will come and go as they please, but if you have rides for the kiddies, coffee for the parents, and something for those in between, they'll stay, they'll buy, and they'll likely come again. Thank you have a nice day. :)


And yes, frames would be a very poor choice.


Regarding the CSS above, you're going to want to add a generic value to the font-family property:

font-family : 'Trebuchet MS', sans-serif;

Also, I'd either use em, % or a relative value (small, smaller, etc) for your font-sizing. Using pixels will effectively disable user text sizing for those using an IE browser.

Hope this helps.
Good luck.

11-04-2005, 01:32 AM
Thanks Mike - it does help - but unfortunately I don't have a copy of the original left-col-nav I was using to get that "centered" column look and I copied over it and messed it all up


back to the drawing board!

11-04-2005, 01:45 AM
unfortunately I don't have a copy of the original left-col-nav I was using to get that "centered" column look and I copied over it and messed it all up


back to the drawing board!

I got it back - prolly better than it was before thanks to harbinger :)

Green Beast
11-04-2005, 02:15 AM
Looks a lot better. :)

11-04-2005, 02:21 AM
glad i could of some use finally ;)

<p><a href="http://www.bowl.com"><img src="images/usbcLogo.gif" alt="USBC Logo" width="139" height="80" class="pageimages" /></a>

take off the <p></p> around the image link. IE is messing up the float of the image and not handling the paragraphs below it the way Mozilla is. I assume you want the effect FF/Moz is doing rather than IEs.

Your center column needs alittle more margin-left. it's not quite centered.

Try bumping up the text size of your rol-col to match the font size of the left-col. Its a little hard to read right now. Then try bumping up the font size of the center a few sizes bigger than the left-col font size. But a little more emphasis on the center column that way since that's where all the important stuff is.

All in all its working the same on IE6 Opera and Mozilla to me. Good job.

Now work on that header image. The text is all grainy.

11-04-2005, 02:32 AM
harbingerOTV's tip of the day:
Always save a .psd of everything.

Dunno what I did with the original image *chuckles* - I'll get working on that once I get these columns worked out

but if you look at the original site (http://www.suncoastbowlingassoc.org) I think you'd agree that this new one is far better on it's worst day rofl ;)

11-04-2005, 05:13 AM
yeah, i agree. It's deffinately copme a long way.

On your middle and right columns add a little line-height: to them and space those lines out a little.

i'd probally give your right-col p a little margin-left and margin-right. It feels a little too snug on the sides. You might need to un-justify the text though in those p's.

11-05-2005, 05:53 PM
alignement was an issue

i liked the content though
its certainly an improvement on the original

11-09-2005, 03:02 AM
ok guys - I think I'm starting to get this whole thing lol

here's a question for ya though - in ie6/wxp home the usbc image in the mid column is above the text and in ff and opera it's aligned on the left of the text - any ideas?

I'm still working on the right column and I'm very excited because I'm finally starting to get all the pieces in place - but by all means offer suggestions about the "categories" I'm trying to add - address, bowling centers, etc.

here ya go! (http://www.suncoastwebdesigns.com/test/susbcba)

Green Beast
11-09-2005, 03:14 AM
It looks the same to me in all of them... floated left.

11-09-2005, 03:32 AM
this is becoming increasingly frustrating - the usbc logo is above "January 1, 2005..." and the link for "United States Bowling..." has started on a new line and the period following has started yet another line?

lemme see if I can get a screenshot of this

Green Beast
11-09-2005, 03:35 AM
I checked with IE, FF, and OP and it's floated left of the date for me. Looks good.

11-09-2005, 03:40 AM
ok here's the screenshot (http://www.suncoastwebdesigns.com/test/susbcba/winxpscreenshot.cfm)

Windows XP Home
Internet Explorer 6.0 SP2

everything looks fine in ff and opera

Green Beast
11-09-2005, 03:49 AM
Ain't like that for me. :confused:

Try this, in your CSS change the padding values assigned to .pageimages to margin values and remove the clear:none as it shouldn't be needed.

Green Beast
11-09-2005, 03:54 AM
Oops, I clicked the logo and it popped out of place and won't go back.

If what I suggest doesn't work, append the text to the image, no break.

<p><a href="http://www.bowl.com"><img src="images/usbcLogo.gif" alt="USBC Logo" width="139" height="80" class="pageimages" /></a> January 1, 2005 saw...

You can also try floating it above <p> instead of in it.

<a href="http://www.bowl.com"><img src="images/usbcLogo.gif" alt="USBC Logo" width="139" height="80" class="pageimages" /></a>
<p>January 1, 2005 saw...

11-09-2005, 04:25 AM
nope that didn't work either - I even tried taking all of the padding/margins off -

I know that I looked at it when I was at work today and I don't remember what it looked like

11-09-2005, 04:48 AM
ok I figgered where the problem is - has something to do with the link attached to it - if I remove the link it lays out fine - I'll get it - just have to define the links in the mid column

>>mumbles something about there has to be something more in life than sitting around troubleshooting<< :mad:

11-09-2005, 04:52 AM
GB you've been such a great help!! I can't wait to talk to you about your errr...mmm...uhhh...green beast

hey you're the one that called it that!! lol

Green Beast
11-09-2005, 04:54 AM
Last try. Use this CSS.

.pageimages, a img.pageimages {
border: none;
float: left;
margin: 0 10px 5px 0;
padding: 0;

And take the image out of the paragraph, it's okay because it's still in a div.

<h4>What's New</h4>
<a href="http://www.bowl.com"><img class="pageimages" src="images/usbcLogo.gif" alt="USBC Logo" width="139" height="80" /></a>
<p>January 1, 2005 saw a dramatic change in the gov...

And fix your validation.
ID can be used only once so you need to come up with id="centers2" or make it a class (.centers in the CSS).

Also, if not using the alt attirbute on an image, leave it null... alt="".


11-09-2005, 04:57 AM
And fix your validation.
ID can be used only once so you need to come up with id="centers2" or make it a class (.centers in the CSS).

Also, if not using the alt attirbute on an image, leave it null... alt="".


I'll be back to fix the validation...I have a class called center and an id called centers - I will rename centers because that id is going to used in the right col for my link headings - when I first made that id I didn't realize that I would be using it that way - it was originally just going to be for the bowling centers links

11-09-2005, 05:07 AM
I tried your css and that didn't work either

it's not necessary that I have a link on that image - I still have to figure out the link attributes within that column anyway

I forgot to mention earlier that I thought about your comment about keeping my content relevant will make visitors either stay or return frequently and I've found that you're absolutely correct - I have found that that's exactly how I use my most common favorite places

Green Beast
11-09-2005, 05:15 AM
Do try that CSS I gave you because you should be able to keep your image as a link with it.

EDIT: Nevermind. I've been on your page refeshing it and missed it. Damn.

11-10-2005, 03:05 AM
I should place the links in the right column as a list shouldn't I?

Green Beast
11-10-2005, 03:24 AM
That's sort of subjective. Some people say they look for them on the left while others claim they're easier to useon the right. I do both, depending on the site. I have a solid reason for a right-hand nav on a two-column site, but on a three-column it doesn't apply.

My reason for a right-hand nav on a two-column site is that when someone who has a really small monitor (640x480) goes to a fixed-width (made for 800x600) two-column site, they have to scroll a bit for the less-used navigation whereas the most-often used content is still front and center, no scrolling.


11-10-2005, 03:29 AM
oops - I wasn't very clear with that question *chuckles*

my regular site nav is in the left column but in the right column I'm going to have external links for the bowling centers and usbc etc.

what my question actually is

since there will be multiple bowling center links and a few different usbc links - should I use a list for them? like the nav in the left column?

11-10-2005, 03:36 AM
and btw...I misunderstood what you meant last night about my class center and id centers - I didn't realize that you couldn't use an id more than once in the way that I had

I have change the id centers to a class right-col-cats

thanks for the tip!

Green Beast
11-10-2005, 03:45 AM
That's cool, and no problem.

I wouldn't. I'd make them text links so they don't confuse your visitors.


11-10-2005, 03:55 AM
that makes perfect sense considering that the links will be categorized for them with those nifty yellow header thingys

You really have no idea how much I appreciate your help with all of this - I have to have this ready (at least the public portion of it) by 12/11 and it's the little things that are going to kill me with this!

I went back and ran through validation which passed and I checked the css validator and there are a bajillion warnings but no errors - some of the warnings I believe are due to redundancy and will be corrected as I finish the admin portion of the site

I also need to go back and read the link you offered about image replacement - and if possible would you be able to help me with this "skip nav" stuff I keep hearing about?

Green Beast
11-10-2005, 04:20 AM
No problem man. Yeah the little yellow headings are great.

Congratz on the passed validation. As far as the CSS warnings, don't worry about them. Everyone was all set then one day they changed it, now we all seem to have all these warnings.

As far as Skip Nav, did I show this article I wrote about Hidden Focal Navigation (http://green-beast.com/blog/?p=57)? If not, I have now lol. It might prove useful.


12-02-2005, 01:10 AM
Ok let's have another look shall we? :) (http://www.suncoastwebdesigns.com/test/susbcba/index.cfm)

One of the things that I found I needed to do was to create containers and then placed the content within the containers using margin: 0 auto 0 auto to center the content within the container - I was finally then able to get the exact width I had been trying to achieve for the content in the right column

I'm very proud of myself in that I put this page through the css, markup, and accessibility validators and it passed them all - I used cynthiasays.com for the accessibility validator

I had the concepts of the div's and classes all wrong and I sat for several days reading and re-reading what the differences were and when to use what and how to use them and parent-childs and yaddy yadda

The only other thing that I think I need help with is in the center column - it's pretty much centered in IE but it drifts a slight bit to the right in FF and Opera.

All thoughts are welcome!