4 replies [Last post]
stewart.cambridge
Offline
newbie
London, UK
Last seen: 13 years 15 weeks ago
London, UK
Timezone: GMT+1
Joined: 2009-06-10
Posts: 3
Points: 0

Dear CSS Forum,

I've had this site live for a couple of weeks now: http://www.sussex-cranial.co.uk.
Been asking friends and family, etc for feedback. I'm no CSS-pro, but can hold my own on a trail & error basis. Also I'm no artist or stylistic guru, but have studied a little usability. (My main career is server-side java programming.)

I'd appreciate any feedback on content, technical implementation, art & style, accessibility and usability, etc.
I've validated the site and there are a small number of outstanding errors, but the bulk is error-free. I have checked the site in: FF3, IE6, IE7, IE8, Chrome, Opera and Lynx, and am fairly happy with each.

One unsolvable, wierd problem I've had though, is this: in IE7, and IE7 only, one of the menu links doesn't function properly on one of the pages. (I'm looking at the page with default text size.)
The page is http://www.sussex-cranial.co.uk/whatcan.shtml. On this page, the very last menu link ("Glossary"), only highlights and becomes active if you hover over the upper part of the text. For example, if you hover over the tail of the "y", no highlight/activation. If you hover over the top of the "G", it does highlight/activate.

In my attempts to solve this, I have discovered the following:
- If I remove padding-right from #leftnav ul, or if I set padding-right:0em on #leftnav ul, then none of the links from "What can Osteopathy treat?" downwards function. They don't become active if you hover.
- If I set line-height:0.9em (as opposed to 1em), on #leftnav li then the "Glossary" link functions properly
- If I set line-height:1.2em on #leftnav li then the "Glossary" link completely fails to function, and the next one up ("Useful Links") becomes half-functional - literally half, the top half.

I don't get it. Is it a bug in IE7 that a href link will only function if positioned a certain way? But then why on this page only, when all the other pages are just fine, and the menu is templated, and should be almost identical for each page.

This bug also happens in IE8, when set to IE7 mode using Developer Tools.

I'm going to delve deeper and expand my css knowledge to solve this, but I'm keen to get the site live anyway and bug fix as I go.

Any constructive critiques are most welcome.

Thank you all.

Stewart

underwurlde
underwurlde's picture
Offline
newbie
S.England - New Forest
Last seen: 13 years 15 weeks ago
S.England - New Forest
Joined: 2009-04-23
Posts: 8
Points: 0

Loving it!

FWIW, I love this website. Clean, uncluttered & well laid out.

I ran the WC3 validator on it http://validator.w3.org/ ...

1.   Error  Line 2, Column 1: Missing xmlns attribute for element html. The value should be: <a href="http://www.w3.org/1999/xhtml
 
<html>
 
Many" rel="nofollow">http://www.w3.org/1999/xhtml
 
<html>
 
Many</a> Document Types based on XML need a mandatory xmlns="" on the root element. For example, the root element for XHTML will look like:
      <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

A few errors in CSS but all seem to relate to colour issuse
http://jigsaw.w3.org/css-validator/

Cheers,

Andy

stewart.cambridge
Offline
newbie
London, UK
Last seen: 13 years 15 weeks ago
London, UK
Timezone: GMT+1
Joined: 2009-06-10
Posts: 3
Points: 0

*Blush*

Thank you underwurlde. I won't be able to fit my head through the door now!

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 38 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Not sure about the last link

Not sure about the last link reference, in IE7 I can't access any links below ""what is craniel Ost..."

The div id="whatcan" has been left to it's own devices as you have floated elements preceding it it has taken it's natural position to the top left corner of those float or that nav float; you can add clear both to it to see the dive assume a cleared position beneath the nav float and the links should be accessible once more.

You may just be lucky and get away with adding position:relative to div#leftnav {}

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

stewart.cambridge
Offline
newbie
London, UK
Last seen: 13 years 15 weeks ago
London, UK
Timezone: GMT+1
Joined: 2009-06-10
Posts: 3
Points: 0

Fixed with position:relative

Much appreciated Hugo!

Adding position:relative to div#leftnav {} has indeed fixed the mysterious non-functioning link on that one page.