Wednesday, December 12, 2007

WebCommons: nestling in the nest

Semi-transparent, nested drop-down menus at WebCommons.

Only a couple of days after it launched, I have just done a large overhaul of WebCommmons. The changes came off the back of feedback from our FaceBook page and are mainly in the area of navigation.

Previously we had the main menu and a separate submenu, plus a number of Javascript tabs; these last seemed to destabilise the RSS reader module and it often returned an error. I have now plugged in a module that allows for nested drop-down menus (which have allowed for a new, more stable structure).

This semi-transparent menu (it will probably look solid in IE6 unfortunately, as I believe that IE6 can't deal with PNG files properly) operates using only CSS and HTML: there is no Flash or Javascript in there at all.

Drop-down menus seem to have taken something of a back seat with the proliferation of content management systems (keeping the code dynamic seems to have presented problems) but they are a very neat way of ensuring smooth and easy navigation through a large site and, given the rapidity with which the scope of WebCommons is expanding already, it seemed sensible to implement these menus before we really got to grips with it.

Having said that, I haven't tested it with Internet Explorer yet, so if anyone could see their way to taking a screenshot, similar to the one above, using IE6 or IE7 (or even just let me know whether it looks OK) that would be fantastic.

I shall be playing around with page placement and content throughout the day, but we will continue to serve the various feeds without interruption.

UPDATE: thanks for all the screenshots. Some work to do, by the look of it. Fuck, but I hate IE...

The site in IE7. The menus are shifted along by one category: that menu should be appearing below the "Feeds" option. PLus, that missing image icon is from the RSS Reader module: it is an option that is supposed to be switched off and invisible but, oooooh no, IE decides to render it as a missing image.

The site in IE6: just a fucking trainwreck.

Seriously, IE is the destroyer of all that is good and decent in the web design world. Everyone else works to standards: why the fuck does Microsoft think that it should be different? It's not as though IE adds better functionality: it doesn't. So what's the fucking point?

Whilst other browsers are working towards implementing CSS3 standard libraries—which include things like rounded corners and gradients without having to use images—and other browsers such as WebKit are pushing the boundaries even further (with CSS defined transforms and animation), Internet Explorer does not even support CSS1 correctly. And it buggers them up in fairly fundamental ways.

So, how to move forward? Well, I think that I can fix the IE7 problems, but I think that I will force IE6 to use the old stylesheet, so you won't get the dropdowns at all.

FUCK YOU, MICROSOFT, YOU PIECE OF SHIT! I hate you so very, very much.


Tito said...

Looking very nice here.(Firefox 2, Linux) Why oh why weren't you asked to do the UKIP website!

Have you taken some inspiration from the OS X leopard dock?

gdome said...

It's broken for me mate the drop downs appear too far to the right, rather than directly below the relevant menu option, meaning it's impossible to actually click em cos they disappear when trying to move the cursor to them. Using IE7 (not through choice, I might add).

gdome said...

FlipC said...

Fine in Firefox/Windows and Opera/Windows.
Fails in IE6/Windows; not even the top level menu items appear. The main bar is moved slightly up to cover the 3D perspective part and IE6 has reserved the space for the drop-down menus with a dark-grey rectangle.

On the plus side it's pushed the actual content down rather then hiding it under the reserved space so at least you can still see something.

Rob said...

This is one of the most useful web tools i've found.

It should help you...

Bretwalda Edwin-Higham said...

Get out of Facebook quick.

jgball said...

DK it looks good in IE7, as gdome points out the drop downs are too far right. I can get it to work by being persistant though, but it's a bit of a bugger. I'll e-mail you a screenshot.

Shug Niggurath said...

/* 2nd Child menu */
#nav .menu li ul {position: absolute;

I think that's the IE fault there. You most likely need to specify a left:0;top:0; afterwards (or however far from the top level you want it) to position.


Anonymous said...

Firebug for Firefox plus the Firefox 'IE tab' plug-in should make your life much easier.

You can then flick between IE and Firefox renders of the same page with one click (IE tab) and diagnose layout oddities (Firebug) far more straightforwardly.

And yes, IE is absolute wank.

Anonymous said...

menus look just fine on Konqueror (Linux).

IE is such a load of crap that webdesigners spend most of their time trying to work around IE specific crapola.

Deadbeat Dad said...

IE being the Devil's own work, you only have yourself to blame, DK.

I managed to implement pure CSS semi-transparent dropdown menus here (the transparency is set low, but it is there, I promise), and they display fine just in IE6.

Can't remember how I got there in the end, but you can inspect the stylesheets using the Firefox Web Developer extension.

This is pretty much what you are aiming for, isn't it?

oarfish said...

Have you considered jquery for cross browser opacity and effects?

$('.menu-expand').css('opacity',.33) should work on everything from IE6 to opera.

It's much more pleasant than buggering about with condtinal stlesheets or html behaviors.

David said...

If you think CSS is bad in IE, try DOM scripting. To get portable code you pretty much need to wrap everything in a function to abstract away the differences between the correct way to do things and the Microsoft way. Why is the method to add an event handler to an element addEventListener() in well-behaved browsers and attachEvent() in IE? Why is the triggering object reference in an event srcElement in Mozilla and target in IE? Why does IE calculate clientWidth wrong? Those numpties at Microsoft have caused me more hours of insane, gibbering rage than I can count.

DocBud said...

I haven't got the faintest, frigging idea what is being talked about here. Can we get back to hating all twatting politicians, that I understand.

FlipC said...

Hey now why the vehemence over IE? There are competing browsers out there you know so if there was something wrong with IE people would switch wouldn't they. Yet IE still has something like 90% market-share so by definition it must be the best browser.

Before I get burnt to a crisp, let me point out I use Firefox and Opera and swear profusely everytime I have to open IE in some fashion (last time I did it crashed and forced a reboot).

Most annoying commonly heard phrase "Well it works in IE; Firefox/Opera can't very good can it?" either caused by sniffers feeding crappy stylesheets or javascript trying to do something that the 'proper' browsers consider a security risk.

The Ludingtonian said...

DK -

The semi-transparent dropdowns are stunning. Just beautiful.

As for the IE problems, well, these are really just Son of Suckerfish Dropdowns with transparent knobs on, aren't they. The lads over at Suckerfish have apparently already sorted out all that inter-browser operability stuff.

But probably you already know that and what they've done still doesn't work for you. I'll just get my coat...

Deadbeat Dad said...

Correction - Of course, what I meant to write was: 'display just fine in IE6'.

Roger Thornhill said...

HTML, Java, XML and now CSS.

Microsoft has form, but unfortunately most browsers will fail to render it.

Rob said...

Just to add my voices to the masses: IE is a pile of garbage and is the most hated part of any web design. A thoroughly counter-productive piece of software that even though it claims to be (in IE7 that is), is most certainly not standards compliant.

IE broke the interwebs.

Surreptitious Evil said...

I have just got Mrs S-E's site functional. 2 hrs to get it working for Firefox, 2 weeks to sort the cretinous mess made of it by IE6 & IE7. IE5 I just don't care.

Embrace and extend, embrace and extent :(