[Simon Mundy]

Hi all,

Just finished a little freebie website job for our little girl's creche. Nothing too fancy, but I wanted to see how far I could take the 'clean XHTML / CSS' approach and still have it load quick, render consistently, etc...

I'm happy with the results (pure CSS rollovers, cross-browser, degradable) but wanted to see if anyone had any further feedback to see if there's anything further I could do. I'm using this as a test-bed methodology for the better-paying jobs so I can make our 'baseline' sites more standards compliant.

http://test1.peptolab.com/

Would greatly appreciate any constructive critique!

Cheers

[Chris O'Brien]

Nice site - fits in great with my whole idea of what a creche would want

Quick question (and this is because I haven't tried to do the CSS myself, but it seems a lot of possible unnecessary code re-use:
Do you need

Code:
 .subnav li a#subnav01 { padding-top: 18px; display: block; height: 0px !important; height /**/: 18px; overflow: hidden; background-image: url(/images/subnav/sub01.gif); }
.subnav li a#subnav02 { padding-top: 18px; display: block; height: 0px !important; height /**/: 18px; overflow: hidden; background-image: url(/images/subnav/sub02.gif); }
.subnav li a#subnav03 { padding-top: 18px; display: block; height: 0px !important; height /**/: 18px; overflow: hidden; background-image: url(/images/subnav/sub03.gif); }
.subnav li a#subnav04 { padding-top: 18px; display: block; height: 0px !important; height /**/: 18px; overflow: hidden; background-image: url(/images/subnav/sub04.gif); }
.subnav li a#subnav05 { padding-top: 18px; display: block; height: 0px !important; height /**/: 18px; overflow: hidden; background-image: url(/images/subnav/sub05.gif); }
.subnav li a#subnav06 { padding-top: 18px; display: block; height: 0px !important; height /**/: 18px; overflow: hidden; background-image: url(/images/subnav/sub06.gif); }
.subnav li a#subnav07 { padding-top: 18px; display: block; height: 0px !important; height /**/: 18px; overflow: hidden; background-image: url(/images/subnav/sub07.gif); }
.subnav li a#subnav08 { padding-top: 18px; display: block; height: 0px !important; height /**/: 18px; overflow: hidden; background-image: url(/images/subnav/sub08.gif); }
.subnav li a#subnav09 { padding-top: 18px; display: block; height: 0px !important; height /**/: 18px; overflow: hidden; background-image: url(/images/subnav/sub09.gif); }
.subnav li a#credits { padding-top: 18px; display: block; height: 0px !important; height /**/: 18px; overflow: hidden; background-image: url(/images/common/peptolab.gif); }

?

Couldn't the vast majority be applied to .subnav li a and just the background be applied to the different sub elements? Some funky stuff with CSS child selectors would possibly be nice, but only 0.1% of the viewing audience would likely benefit...

Also - noticed a spacer div being used. I don't know if that's necessary (this is just conjecture from a very short look), but could the element below it just have a margin and clear it's surroundings? I obviously haven't tried this to see if it'd work - I know how much effort needs to be put into to CSS sometimes

Oh - and some new-line characters in your PHP echo statements would make reading the code easier

[skalie]

On a windows box (IE 6) the front page left navigation bits seem to like disappear on mouseover, 1 to 3 links at a time and sort of at random intervals.

Um, the little arrows in boxes on the bottom links kind of beg to be links as well.....

.....but all in all, good show, very clean and useable site.

[Simon Mundy]

Originally posted by Black Book:
Nice site - fits in great with my whole idea of what a creche would want

Quick question (and this is because I haven't tried to do the CSS myself, but it seems a lot of possible unnecessary code re-use:
Do you need

Code:
 (snipped)

?

Couldn't the vast majority be applied to .subnav li a and just the background be applied to the different sub elements? Some funky stuff with CSS child selectors would possibly be nice, but only 0.1% of the viewing audience would likely benefit...

Also - noticed a spacer div being used. I don't know if that's necessary (this is just conjecture from a very short look), but could the element below it just have a margin and clear it's surroundings? I obviously haven't tried this to see if it'd work - I know how much effort needs to be put into to CSS sometimes

Oh - and some new-line characters in your PHP echo statements would make reading the code easier

Yep, you're right about the subnavs, although what I think I'll do is create a new class like a.subnav so the inherited menus don't get styled like that. I know what you mean about child selectors (and adjacent selectors would be VERY cool) but some of the staff use NS 4, so...

I hate using spacer DIVs, but there's a few instances where it's vital for browser consistency - Mozilla / Safari are pretty good but IE 5.5/6 tend to knock out or inline where they shouldn't. I find this way slightly 'cluttered' but dependable.

BTW, I run an output filter in PHP that automatically removes whitespace, converts unencoded entities and retrieves keywords so that all the pages are quicker to download and stand a better chance of validating (especially when people cut'n'paste from Word into the CMS) - that's why the code is all scrunched. I don't get too concerned about the formatted output of the source code after the site goes live - after all, it's how it behaves that counts!

Skalie - do you have your IE cache set to retrieve every time? I believe these rollover effects can look a little screwy if your temporary cache is not set to default. I'd be interested in hearing anyone else's experience, because I've been testing it here on XP with IE6 and IE5.5 and there's no problems.

Thanks for the heads-up guys.

[DUNSEL]

Yeah, same effect that he got, in IE6. The links disappear on mouseover. Not a bad effect though. I thought there was some javascript working there. Interested in knowing what causes that effect.

[Simon Mundy]

Originally posted by DUNSEL:
Yeah, same effect that he got, in IE6. The links disappear on mouseover. Not a bad effect though. I thought there was some javascript working there. Interested in knowing what causes that effect.

I'm using IE 6.0.2800 on WIndows XP - which version/OS are you using?

[skalie]

Originally posted by DUNSEL:
The links disappear on mouseover. Not a bad effect though.

Unless you actually wanted to, er, click a link.

Just opened it at work on another windows box, (Win 2000, I.E. 6) and can get all the links to disappear with a quick enough mouse movement.

I do have my cache settings on "check for new versions everytime" or whatever, but if you want to make a bullet-proof site at some stage of the game you should take difficult types like me into consideration.

I also checked it out on an iBook running a 800 x 600 resolution (I.E. 5.1), my "testing" machine, and was very surprised to encounter a horizontal scroll bar, from the look of the site I thought you had taken that resolution into account.

[Simon Mundy]

Originally posted by skalie:
Unless you actually wanted to, er, click a link.

Just opened it at work on another windows box, (Win 2000, I.E. 6) and can get all the links to disappear with a quick enough mouse movement.

I do have my cache settings on "check for new versions everytime" or whatever, but if you want to make a bullet-proof site at some stage of the game you should take difficult types like me into consideration.

I also checked it out on an iBook running a 800 x 600 resolution (I.E. 5.1), my "testing" machine, and was very surprised to encounter a horizontal scroll bar, from the look of the site I thought you had taken that resolution into account.

IE5.1 - AARRRGGHHHH - it's the 'float: right' problem again. SIgh... Back to the css...

This IE6 problem has me stumped. I just can't reproduce it - will have to do some research on google.

Thanks Skalie!

[philzilla]

Originally posted by Simon Mundy:
This IE6 problem has me stumped. I just can't reproduce it

use VPC?

[Simon Mundy]

Originally posted by philzilla:
use VPC?

Yeah... it 'flickers' a bit (but that's because VPC is slow!) but I can still get the rollover image to work in both IE6 and IE5.5 (running in W2K). I haven't seen any instance of it not showing an image at all.

[DUNSEL]

Originally posted by Simon Mundy:
I'm using IE 6.0.2800 on WIndows XP - which version/OS are you using?

IE6 on both win98, and windows server 2003. Same effect on both. Also in Avant browser (which is really just IE in a new suit)

It doesn't happen in Mozilla or Opera.

[skalie]

The "javascript preload images instant mouseover" thingy is sort of a nice and standard browser independent way of doing the link gig, or not?

Except for those non-javascript browsers of course.

[Simon Mundy]

Originally posted by skalie:
The "javascript preload images instant mouseover" thingy is sort of a nice and standard browser independent way of doing the link gig, or not?

Except for those non-javascript browsers of course.

Yeah, but I'm getting tired of adding superfluous code just to achieve a pretty rudimentary visual effect. It's so much nicer not to have to add that extra markup and have CSS handle it.

Foolishly, pigheadedly, I'm going to persist with the a:hover image rollover but try to find the cause and fix for this problem.

Would it be OK to ask for a quick retest when I find the solution?

[DUNSEL]

I don't understand what's wrong. I looked at the code, but it's nearly unreadable with no spacing. Some pagemaking software was used to make it? We all know what IE doesn't do, but regular hover effects isn't one of it's many problems.

[Synotic]

Good job on the site... my only two suggestionss would be to possibly increase the line-height of the text... and for the navigation... it always annoys me when there is "unclickable space" between the buttons. When the mouse turns back to a pointer from a hand. I like to be able to go between different buttons when they're adjacent without any stop. Perhaps using padding rather than margins... I hope that made sense

[Simon Mundy]

Originally posted by DUNSEL:
...The links disappear on mouseover...

Can I just clarify with everyone - do you mean the 'graphic' text disappears, or do the regular text links disappear?

I looked at the code, but it's nearly unreadable with no spacing

Yep - that's a bandwidth-saving filter I've got on the pages. It's semi-readable in Safari source view, because Safari auto-wraps the source code.

[skalie]

Originally posted by Simon Mundy:
Foolishly, pigheadedly, I'm going to persist with the a:hover image rollover but try to find the cause and fix for this problem.

Would it be OK to ask for a quick retest when I find the solution?

Not a problem, and your perserverence is well appreciated.

[skalie]

Originally posted by Simon Mundy:
Can I just clarify with everyone - do you mean the 'graphic' text disappears, or do the regular text links disappear?

Left links, from a purple "about us" to a gray "help".

They disappear on mouseover when using IE 6 on windowz.

just to achieve a pretty rudimentary visual effect.

like a clickable link

[Simon Mundy]

Originally posted by skalie:
Left links, from a purple "about us" to a gray "help".

They disappear on mouseover when using IE 6 on windowz.

Hey Skalie - do the links still look funny? I've just updated the CSS

[skalie]

Um, yes, they disappear for about a second after mouseover.

[Simon Mundy]

Originally posted by skalie:
Um, yes, they disappear for about a second after mouseover.

Do they come back while you're still selecting that menu? Can you still use the menu if the background disappears?

[skalie]

They're still clickable, just temporarily invisible.

The sub-menu is fine, as in (under parent information)........

Introduction
Enrolment
Fees and additional charges
Hours of operation
Security
Communication
Your contribution
A happy and comfortable day

[Simon Mundy]

RIGHT! I think I've got this solved, thanks to an article at http://www.pixy.cz/blogg/clanky/cssn...rs/update.html

Essentially, both the LI and A tags have the same background applied to them, but the A:HOVER state simply has a background-image: none applied to it, revealing the LI's background. So there should be no flicker.

Does that solve it for everyone?

BTW, thank you to everyone who have donated their times to be guinea pigs. Hope this technique proves to be helpful to you in the future. The benefits I see are:-

PROS:

- No extra onmouseover, onmouseout code
- Can use images as rollovers without embedding IMGs in code
- Cleaner HTML (though slightly contrived CSS)
- Better image replacement technique for graphic text

CONS:

- P.I.T.A CSS files - but then again, when was web development ever easy?

Cheers

[skalie]

Originally posted by Simon Mundy:
Does that solve it for everyone?

Well done that man.

[DUNSEL]

Yep, the disappearing act is gone.............I kinda miss it...;-)

[Holigen]

You wanted feedback about the site right? Im glad you got that little problem fixed. I like the site, but the links in the Quicklinks box should be a different color to promote readability. Just a suggestion.