Www.humanetainit.com

Hello!

I've been busy creating a standards compliant site. There are some things I am somewhat uncertain about.

First of all, the design is simple, because I like simple, but is it aesthetically pleasing?

Secondly, it seems that IE6 supports :fixed, but my divs are only fixed in other browsers. I did a css-hack against my principles, now at least the design doesn't break, but the divs are now :absolute... I checked in IE6/win, IE7/win, FF2/win, Opera9/mac, FF2/mac, Safari, Camino and even IE5.2/mac. Except for the first (divs aren't fixed) and the latter (loses some functionality), all seems well.

Anyone having problems with the layout? Please let me know!

Thanks a lot in advance,

Marc

Ah, standards compliant... my two favourite words =) One tip though, your page doesn't seem to validate. The only fault is missing ALT attributes on the IMG tags. No biggy.

I wouldn't worry too much about IE/mac... but I'd fix any bugs with IE6/win. The page seems to have crashed my IE6 on first-attempt to open.

I urge you to remove all the inline styles and just use an external stylesheet. This will be cached by the browser and make loading theoretically faster in the future.

Is that a table-based layout?

You're right! A late-night addition causes this error: I added a favicon-retrieval system, but forgot the alt. Always on the move...

In-line styles need to go, you're right there too. And they will, I have been wanting to do this...

The layout is table-free, but I do use tables for navigation. Since they are structured I feel there is no harm in that. I've been toying with the classic ul, but IE6 didn't appreciate what I was trying to do. I hate wasting my time on IE just as much as the next guy.

I wonder what that crash was all about?

I'm updating a couple of things: I'm moving towards XHTML Strict, but I'm still debugging this. Most pages validate.

I already removed a lot of the in-line css, but can't remove all of it. Images sizes are impossible in my vision, so I'll leave those in-line. Colours are another story, I'll remove them later. Maybe.

**edit: hang on, everything's breaking up**

**edit: Sitescore says I'm in the clear (phew)**

Tip: Width and height are still valid IMG attributes... ;-)

Also, it's one thing to validate, but another to keep your code clean. I would advise putting actual text in all of your ALT and TITLE attributes as well.

What are all the empty DIVs for?

I still question that table for your article list.

"Width and height are still valid IMG attributes"

Are they? w3c validator didn't agree with them (although he did in Transitional).

"I would advise putting actual text in all of your ALT and TITLE attributes as well."

Can't agree with you there. If you check your site with a text-browser, you will see the alt text, unless you use an empty element. So, you should use useful alt texts. For an image with a quotation mark, it's more useful to do alt="\"" then alt="quotation mark". You'd something like:

quotation markThis is a brilliant quotequotation mark

I'd prefer "This is a brilliant quote".

The title element is just for a mouse-over text, why use is unnecessarily?

"What are all the empty DIVs for?"

I think they're already gone? They were for unused functions, and therefore useless.

"I still question that table for your article list."

As do I. Maybe it will be gone in in the near future.

I now fixed the external link icon. It turned out that you need to declare the .ico format in .htaccess to make them appear. Is anybody not seeing the social bookmarks on mouseover under Columns? I had one report, but can't reproduce it. IE6 might be the culprit.

I assure you, you can.
I don't think you can put "px"



I found the tag[s] code in your HTML:
<img src="http://www.humanetainit.com/custom/images/logo.jpg" alt="" title="" style="height:195px;width:225px;" />

It would be better written as:
<img src="http://www.humanetainit.com/custom/images/logo.jpg" alt="Humanetainit Logo" title="Humanetainit" height="195" width="225" />



I only mentioned TITLE because I saw it in your tags. Title has a more accessible use than just the tooltip, it's good to use them.



I still see a bunch:



If I have time, I can mock up an example of how I might do it... ;-)


I hope you don't think I'm cutting up your site... I appreciate that you're interested in working on improving things, and it feels like you're taking my criticism well. Most people just get mad at me =)

The "bookmark above with..." dialog scares me... it's so big! =)
Internet Explorer 6 does not work... Opera does.

Damn! You're right!



But what's wrong with declaring imagesizes with CSS? Isn't that the XML way to go?



What's the advantage in accessibility?



Hm. I'd forgotten about those. They are the divs for some adminfunctions (for which you need to be logged in). I'll move them out of harms way.



By all means... But remember I copycatted the original from Ruthsarian Layouts; but they have been mutilated beyond recognition by yours truly. The Ruthsarian version was, of course, table-free.



[seriously now]Mad? No. Delighted? Yes. If I couldn't take criticism, what's the point of posting it here? I'm here to learn from my mistakes. And maybe help out others in the process. How can I be mad at someone whose helping me out free?[/seriously now]

Too much? I was afraid of that... I'll need to cut down on links...

IE again... might be the z-index bug?

XHTML & CSS are used to separate the presentation code from the structural code. An image's dimensions are structural. (I've heard debates otherwise, but I disagree). One of the benefits of CSS is the fact that it's external and cache'd... Similarly, the simplicity of changes. To change the colour of all links on the entire site, you change one line in your CSS. That's awesome! This is why I discourage inline CSS because the benefits jsut aren't there.

Besides, height & width are valid attributes of the IMG tag... enough said



I'm paraphrasing, but "accessibility" is ensuring your page can be read by as many internet users as possible, regardless of their browser, browsing device, or browsing abilities. Most people consider accessibility when presenting their site to a vision-impaired user.

Basically, how can someone use your page if they cannot see the screen?

Due to low-visibility, colour-blindness, legal blindness, etc, some internet users use screen readers which read web pages aloud. Doing your best to keep your page "accessible" will ease their use of your site.

ALT text and TITLE attributes are one easy way to do it... there are a tonne of other tips.

I'm in doubt. There something to for both. I'll sleep on it.



I'm aware of WAI and the like, and I try to live up to them, but what I meant was: What's the advantage in accessibility terms? I don't see that.

I just wasted a perfectly good afternoon on trying to get the :hover effect working in IE6. Works in any browser but IE6 and earlier and Avant.

It's just silly, but I can't figure it out. If you hover over a category, you see a preview of its subcategories. But if you click it, and then hover, it's gone! But sub-subcategories do work... Drivin' me crazy.

Anyone a tip?