[DJ Maze]

I'm creating a new menu but i have an issue.
When i add the box-shadow it adds 7px to the right and then it creates a horizontal scrollbar.
I've already tried overflow:hidden but that fails.

preview of my HTML5+CSS3 menu

You have any solution?

[DJ Maze]

Solved it myself!
My HTML5+CSS3 menu (works in Chrome, Firefox, Opera and Safari)

So what you think of this menu?

[Eestlane]

Cool, but not really for irl use I think (who would like to read it tilting the head left all the time). Using images...icons instead of text might give a better result. And more padding for each item.

Cool, nevertheless (and I mean the idea of having the real clickable area).

[BrokenCrust]

I've been playing with CSS3+HTML5 for a while and there is big scope for nice looking sites with little effort or images, providing of course that none of your visitors use IE. Because of that reason it was just a nice experiment and I didn't implement it and instead switched to minimalist x-browser approach. It sucks that Microsoft drags everyone down to its level but perhaps when their market share falls it will become viable before the release of IE9.

[DJ Maze]

Why a minimal approach?
Why not provide the cool people a cool layout and the noobs an IE layout with filters?
If visitors care less about a good browser, they do it for your website as well, until.... They see your website in a real browser

[layingback]

DJ Maze wrote:

Why not provide the cool people a cool layout and the noobs an IE layout with filters?

Is this something that poodle could provide? The fallback for IE I mean, not CSS3+HTML5 for IE (although there might be a market for that )

Or have I misunderstood the purpose of poodle?

[BrokenCrust]

DJ Maze wrote:

Why a minimal approach?
Why not provide the cool people a cool layout and the noobs an IE layout with filters?
If visitors care less about a good browser, they do it for your website as well, until.... They see your website in a real browser

I suppose this depends a bit on your visitors, but I still think that it is difficult to tell the average visitor "sorry friend, you have IE so are a noob and must look at a badly formatted site or upgrade to something better". It's a world with lots of choices and people won't stand for that stuff. In five years time I would expect to have people moaning if IE6 doesn't work correctly, although maybe then I will tell them that.

Right now it's a lot of work to use CSS3 you must cover many variations - rounds corners is an example. To give users in IE nice aa corners with transparency, a border and some shading I must use images, nothing else will do. If I am making images for them, then it doesn't help me that I can make this effect in CSS for the other browsers? I may as well be minimal and use only the one method for all. That way I don't have to code exceptions or have a massive CSS stuffed full of various commands that do the same thing but only on one browser each. Why does FF have -moz on every CSS3 feature - this isn't helpful. Grrr.

So I can make a fantastic theme in FF, with no images or JavaScript that I really like, then spend the next months butchering it to make the other browsers display sort of the same thing, or I can save time, anger and get a better end result by starting out to cover the top five browsers and take a minimal design approach.

Or as you say I can accept that my site looks good in FF and sort of OK in the others and bad in IE. For a site where no-one is visiting much (BrokenCrust for example) then maybe this is OK. On that sort of site 80% of visitors will have FF and almost none IE. But in a "real" site then 50% have IE and 20% IE6 and they don't know IT well or are at work so can't change it, so can I really say, for you it is too bad. Do they accept that or go so away?

Also it doesn't help that DF isn't very CSS friendly with too many classes across the core and modules and many styles embedded and more tables that the table section at the IKEA table superstore. Really, getting a common look can make you weep in your sleep.

[DJ Maze]

That's an approach you can take.

I just show the round borders with an alpha to any browser except IE<9.
Why? Well,,,, the visitor doesn't see that the corners are square instead of round.
Is it a bad thing that he doesn't know that?
Does he really care when you tell him?

For example look on this website to the "Dragonfly" theme.
All side blocks have round borders, except in IE.
Is that a bad approach?

It's not only IE. What if someone is still using Firefox 2 or Safari 1?


Conclusion is: either choose a minimal design approach or use a graceful design approach.

[BrokenCrust]

No it's not bad, and it's what I do as well for rounded corners because the difference isn't that much in most cases, but if you have rounded corners, gradients, shadow, reflection, rotation, text shadow etc, then in IE it is not at all the same theme.

You are right that you must choose; but I think you must also fit your audience. A site about Windows 7 probably needs to pay more attention to IE than a community site, but they must pay more attention to all browsers than a designers home page maybe.

If you want each user to have a similar experience and also you want to keep that WC3 CSS button, then you must not think too much about css3 stuff for your site yet.