Website tidied up!

[David]

I just spent the day doing one of those jobs that's been nagging for ages. Some time ago, Tom gave me some excellent content for the Website Architecture website and I put it up because we needed some content for SEO purposes. The problem was that I didn't have the time to properly format it. Tom had used FrontPage and so things were a little odd :blink: . Anyway, today was the day I sorted it out. You can see the results here (http://www.websitearchitecture.co.uk/def/index.php). I have been very good and worked the layout in CSS and head/foot/nav are php includes. It looks good in IE, MOZ and Opera - all except this page (http://www.websitearchitecture.co.uk/def/information_architecture.php), which the MOZ box model fails to display correctly <_< . Looks fine in IE and Opera.

Note the difference in the hrizontal rules at the bottom of each page in the three browsers. Only IE seems capable of displaying it as intended.

Well, let me know what you think...

[francis]

A quick google on "styling hr" will tell you why you have an hr problem - it's because IE uses color to colour them, other browsers user background-color. Add that in, and you're laughing, or carry on reading for a better solution...

Now, onto the "moz doesn't do it like I think it should" thing. You've floated the right-hand defnav div, but your #content isn't tall enough to clear it, so it's never going to drop down beneath the defnav - Moz is obeying the rules of floats correctly, if the other browsers don't obey the spec then, well, tough. Write to them or let the team know directly (http://channel9.msdn.com/wiki/default.aspx/Channel9.InternetExplorerFeedback). Nothing to do with the box model at all! There's two fixes to this:

1: add a clearing rule to the hr tag so that it clears the .deflist

2: (much better). Junk the purely presentational, not needed <hr> tag and add this to the .footer class:

.footer {
padding-bottom: 15px;
margin-top: 10px;
clear:both;
border-top:1px solid #7f7f7f;
width:80%;
}

Now you can have the same presentation, remove the unnecessary <hr> tag from the XHTML and the related rule from the def.css file.

Other than that, good job, although there are some validation errors (http://validator.w3.org/check?verbose=1&uri=http%3A//www.websitearchitecture.co.uk/def/information_architecture.php). You can use Apache (if Clook have this enabled for you) to add the default character set to all pages to stop your "no character encoding" error. Add this to your .htaccess file:

AddDefaultCharset On

This will fix that error - it's the preferred way of doing it these days - it stops you having to put this on every page:

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

I did it with Bentley and it worked fine. You could also get rid of those <div align="center"> things and replace them with just <div> by editing one line of CSS and adding another, eg:

.footer {
padding-bottom: 15px;
margin:10px auto 0 auto;
clear:both;
border-top:1px solid #7f7f7f;
width:80%;
text-align:center;
}

Are you going to clear up the CSS files? In the main.css file you've got several declarations that have been overwritten in def.css

Other than that, good job!

[David]

Ah, Francis - it's such a joy to have you around :D

Of course, you're right on a number of counts. Turning the <hr> to a bottom border and clearing the nav box is a very sensible suggestion.

I had focussed on the presentation of the pages and still need to do some tidying up. As you say, the CSS files need rationalising. This is more to do with the fact that this is only phase one of a full site overhaul. Site structure is now all over the place and needs to be revised.

You may also note that there are lots of [b] and [i] tags in the html which need to be dealt with.

I aim to apply a CSS layout method for the rest of the site in time but I have a couple of concerns about this and your future input would be valuable.

[francis]

Okay! I think I may be been editing my post as you were reading it/replying to it, so it may be different now. I did see some [i] tags that I thought should be [i]s but haven't gone into it too much.

[David]

OK, I implemented all your suggestions and seems good - still need to tidy up the html a bit. I also notice that the validation is objecting to the meta tag attributes and the css links - oh well.

[francis]

From memory and without re-checking:

All XHTML has to be lower case. Therefore <META NAME=".....">

will fail.

Also, everything has to be well formed (all tags should be closed). So:

<link href="../css/def.css" rel="stylesheet" type="text/css">

should be:

<link href="../css/def.css" rel="stylesheet" type="text/css" />

Job done.

[David]

That's all true but what it seemed to be objecting to was the "name" attribute in the meta tag - I suppose that should now be "id".

[francis]

No, everything is lowercase, even javascript, eg: onClick should be onclick. The name attribute is correct for meta tags - name has only been deprecated for use in anchors, it is still current for things such as meta and form elements. If you change the case of that and close all of the open tags (meta, link, img) the page validates. The error message on the W3C's validator is somewhat verbose, but the last paragraph explains:

How to fix: check the spelling and case of the element and attribute, (Remember XHTML is all lower-case) and/or check that they are both allowed in the chosen document type, and/or use CSS instead of this attribute

[David]

Sorry, I left that one hanging while I was away on holiday for a week - I'm back on the case now and will sort it out shortly. I think my head was a little befuddled before I went away - it's all much clearer now :D

[David]

OK, the new pages now validate XHTML 1.0 Transitional - whew!

See the results here (http://validator.w3.org/check?uri=http%3A%2F%2Fwww.websitearchitecture.co. uk%2Fdef%2Findex.php&charset=%28detect+automatically%29&doctype=%28detect+automatically%29&verbose=1).

The next question is: is it smart to add one of those little W3C validation buttons to the page or just a bit nerdy? Should one proclaim this sort of thing or just keep quiet about it in the knowledge that you've done a good job o:)

http://www.websitearchitecture.co.uk/watson/postimages/xhtml.gif

[francis]

Well, you could and, should be so inclind, add a CSS one. If you can be really bothered, carry out a WCAG test and then add the relevant A/AA/AAA badge. Some people design their own validation badges to be more in keeping with their site design. Or you could just add it to the footer as, for example, simplebits (http://www.simplebits.com/) and mezzoblue (http://www.mezzoblue.com/) do. Might it add some weight as it's the site for the MA?

[David]

Originally posted by francis@Aug 24 2004, 7:35 am
Or you could just add it to the footer as, for example, simplebits (http://www.simplebits.com/) and mezzoblue (http://www.mezzoblue.com/) do. Might it add some weight as it's the site for the MA?
Yes, I think you're right in terms of the MA and a discrete mention in the footer is a nice touch. I'll do that when the rest of the site has been validated.