Category: css

For needs of our latest project we were making element that's resembles droplet which has some text in it. So of course we would make it without images, so to make droplet we made a square with 3 corners with border radius 50%, and rotated the element for 45 degrees, and then rotated text in opposite direction for again 45 degrees.

That works nicely, we can have box shadows, and background diagonal gradients, it looks nice, but for the problems in chrome, which renders fonts poorly? There is no one rule solution for this problem, the solution is not to rotate text element, chrome can’t handle it.

Workaround for this problem is to have two separate elements standing one on top of the other, so one can be rotated (gradient/droplet) and text element must not have transform rotate on it.

Pseudo elements are great little things, they can help you make nice little graphical feathers without writing extra markup, or they can provide description elements putting url(), attr(), counter() into content property.

But when making flags or some similar extra graphical feathers, pseudo class element seems to have larger z-index then his parent element, which defeats the purpose, so this is how you make it better :)

I've had some spare time before bedtime to put into digital form something what I discussed with the guys at the office - inconsistent cross browser behavior of default tooltip functionality.

First, a little introduction to the subject of tooltips:

The tooltip is a common graphical user interface element. It is used in conjunction with a cursor, usually a mouse pointer. The user hovers the cursor over an item, without clicking it, and a tooltip may appear — a small "hover box" with information about the item being hovered over. (Wikipedia)

In your regular computer usage, you see tooltips every day (all day) and chances are that you don't even notice them anymore. All browsers display the title attribute of an HTML element as a tooltip when a user hovers the mouse cursor over that element. Some browsers will also display the alt attribute of an image as a tooltip in the same manner (if a title attribute is also specified, it will override the alt attribute for tooltip content).

On the wide spaces of world wide web you can also find custom generated tooltips (eg. in javascript or Flash or just by absolutely positioning of elements via css), but they are not the subject of this post. I did my fair share of tooltips in different Flash projects I was working on, and each time we did a new tooltip type, we tried to make tooltips an integral part of visual part of design having in mind usability.

From user stand point - I never paid too much attention to browser tooltips. Probably because I got used to them. If website I am visiting is done well, if I hover something (probably an image) - a default browser tooltip will appear over that element. That usual and expected behavior was enough for me to put browser tooltips somewhere in back of mi mind. But, recently something about tooltips started to bother me and I couldn't pinpoint it.

Just around the time when we were working on release of Globus portal, I finally did figure out what was wrong with tooltips - tooltips in Firefox to be exact.

Firefox (tested on 3.5.5) has a nasty bug which causes hovered element to fire up onmouseout event when you rollover a default browser tooltip which that element invoked. When you rollout of the tooltip (because tooltip disappears), the browser element fires onmouseover event again, and that can cause some really nasty behavior.

Firefox 3 tooltip bug(Either JavaScript is not active or you are using an old version of Adobe Flash Player. Please install the newest Flash Player.)
(i've recorded this behaviour. you'll need flash player to see the video. if you can't - try MOV or AVI file.

On Globus that bug caused so much problem in elements which change layout when you hover them - that we had to remove title tags completely. And that from SEO standpoint is a BIG inconvenience. I've tested tooltips in all browsers, and AFAIK only Firefox 3.5 (Win) tooltips are "working" that way. I've submitted this bug to Bugzilla so will see what they'll say about it.

While doing tests in browsers I had around (Firefox, Safari, Chrome and IE8), I've noticed another inconvenience. Not a single browser did not displaying the tooltip the same way.

I've put up a little html demo for you to test by your self (ignore my css 'skills'). The 'demo' contains one div with image inside it with a link. If you hover the image, the link's title will show up in a default browser tooltip. Take notice how tooltip:

appears when you roll over element

disappears when you roll out

behaves when you move around element

behaves when you try to rollover the tooltip it self

You will notice that not a single respected browser currently available on Windows is not displaying tooltip the same way.

Chrome 3 toolip
- lazy (shows and dissapears with an delay), you can rollover it with your mouse without any side effects. The fact that you can rollover tooltip in combination with rather long hide delay can be inconvenience.(Either JavaScript is not active or you are using an old version of Adobe Flash Player. Please install the newest Flash Player.)
(MOV | AVI)

Internet Explorer 8 toolip
- pretty standard windows based tooltip behaviour. if you hover a tooltip - it will disappear which I think it's best behavior.
- has a nasty habbit of blinking two times when you hover an element. it doesn't produce other nasty effects to dom events(Either JavaScript is not active or you are using an old version of Adobe Flash Player. Please install the newest Flash Player.)
(MOV | AVI)

Safari 4 toolip
- has a nasty habit of disappearing and reappearing while you are still hovering the element. it doesn't produce other nasty effects to dom events(Either JavaScript is not active or you are using an old version of Adobe Flash Player. Please install the newest Flash Player.)
(MOV | AVI)

Since i really want to do something constructive and not just talk all day, here are my observations and ideas in follow up to my original post (Ha! ArtLebedev made a mistake!).

First:

What you can see here is that i have integrated the countdown timer into the green light section. I believe that having numbers is not good for couple of reasons, main being that they are not user friendly enough. Numbers are something that you need to learn and understand. Uneducated people, people with all sort of problems (Dyslexia and Dyscalculia), old folks that simply cannot see numbers well, people coming from cultures that simply do not use Arabic number system, and many more will simply fail at recognizing the numbers.

That is why a symbolic countdown is better. Green stripe is slowly ticking away, letting you know how much time is left.

The ticker could also be applied to red light as well.

Second:

The turn right arrow is mostly used by the drivers who are really close to it, therefore the countdown timer can be used as well. Furthermore, the arrow needs to be connected with the main light system, triggering it to go yellow as the countdown nears the end, and eventually turning off at the same time as the main system goes green.

For some reason, some of the traffic lights here in Zagreb that have the Right Turn arrow attached, turn off green right arrow and then 3 seconds later go Yellow > Green on main system. This causes drivers to (usually) break and do nothing for 3 seconds and then accelerate again as the main system goes green. A big big capital fail.

Furthermore, pedestrian lights work in unity with car lights, and while car drivers are standing still on their red light, they can observe pedestrian's green light ticking away. Also, during green light for car drivers, the green pedestrian light in that direction is showing them approximately how much time they have on their green light as well.

Third:

Some more thought on Art Lebedev's two-arrows-in-one-box. Except the fact i stated yesterday: that there is just no need for red light, when absence of green means the same, problem is further increased by the fact that Red-Green color blindness is the most common color blindness, affecting 7-10% of male population. People wearing sun glasses could also misinterpret the sign while it is lit red - as green. Check this visual representation of Red-Green color blindness.

This is still not perfect system, maybe if we ever get a project to redesign it we could further improve it.

Do you remember SplinQ Shopping project which we released half a year ago? Currently it's primary focus is on Dutch market, so in the case you missed it - SplinQ is a community site that makes online shopping cheaper and easier. You automatically save on everything you buy online! You sign up for free so the shop can identify you and we can give cash back to you.

Well, reactions to the project were overwhelming, and people like it a lot! But, the biggest complaint from users is that when they have to buy something - they are in a hurry and they completely forget about existence of SplinQ. In a survey among people that saw SplinQ, but do not use it, conclusion is that no matter they would save money by using it, they just forget to go to SplinQ. So, we came up with the solution to that - completely free 100% secure and easy to use SplinQ Shopping Firefox extension (beta)! Wheeee! :)

SplinQ Shopping Firefox extension runs on Firefox 2 and 3, it will be hosted at addons.mozilla.org as soon as it gets reviewed by Mozilla guys, but for now you can get it here. You may have to right click to download it, then drag the file onto your browser window. This is beta version, and functionality may change in future. Since Firefox has nice update functionality, your browser will update add-on automatically and you don't have to worry about a thing.

Once you have installed SplinQ Shopping add-on into your Firefox, you will notice 2 grayed out letters "S". First in main toolbar (right of the address and search bar), and second one down right in Firefox status bar. That means add-on is working perfectly. Now, you can try it out by surfing to website of any store found in SplinQ store database. Eg. try navigating to Perfectly Basics web shop ( perfectlybasics.nl ). Once you are on site, add-on will detect it and if that specific store is found in SplinQ store database, it will alert you that cashback is available by changing the color of letters "S" to SplinQ green color ™ and showing an information on toolbar in bottom of your browser. You can disable alert for specific site by clicking on [x] icon on the toolbar, and you can enable it again by left clicking on little "S" in the status bar and selecting "Show toolbar...".

We spend a large amount of time in optimizing frontend of each site we produce. Yes, everybody knows about famous yahoo's 14 rules (plus recent 20 new rules), but how to successfully reach them is another, story.

After some thinking and pimping, you can get straight A out of yslow. That's a fact. But then one day client comes and says - I need this banner here and that banner there and this tracking code and that tracking code.... 5 days later your straight A page becomes bullseye F. Why? Because you had to put tons and tons of inline javascript which not only broke your wonderful w3c compliant markup, but also completely f*cked up page loading/rendering time. Each page render now has to coup with inline javascript (even iframes) and loading of external javascript, images and flash files from different slow and overcrowded ad servers.

Until today I was mislead by thought that only we have that kind of problems, but my recent try to browse www.bbc.co.uk encouraged me to write this post.

Guys at BBC use (like many other) DoubleClick for banner management. There is nothing wrong with DoubleClick, or any other banner management software. In picture below you can see what timeout did to a bbc homepage. After 60 seconds or so, page eventually loaded, but was missing banners:

On our recent project, we didn't liked the fact that ad server is slowing our page render time by 300-500%. OpenAds didn't update their banner publishing scheme for at least 5 years so we did a little trick.

There is a placeholder that holds layout and displays "loading..." msg where banner should appear. Then we load the banner at the bottom of the page and once the banner is loaded we append it to the placeholder on top of the page .

This technique works well but can't be used in every configuration. Btw, if you are using jQuery, just be sure to use v1.2 since appendTo later on contains a bug. Eventually you could patch your current with this fix.

This won't solve all of your problems, and will off course introduce new ones but will help your page render time slightly and make your visitors not so annoyed. You should reconsider how to solve bottleneck to your ad server by making a farm or something.

Importing css through the @import command is a beautiful thing because it allows you to control how legacy browsers like IE 5, IE 5.5 and mac IE render your sites. We all know that these browsers have poor css support and that it's impossible to have css that will render the same way in all browsers including legacy and modern browsers. I found that the best way to filter legacy browsers out is to use the @import method. So here's how to do it.
You should always have separate stylesheets for different logical elements for example master.css (contains basic rules), typography.css (contains typographical rules), layout.css (contains layout rules)... So with that in mind add the css to the head of your html template like this:

This command will import your master stylesheet from which it will get basic styles and all other advanced style information. Next open your master.css and at the top of the file, import all other stylesheets like this:
@import url("typography.css");
@import url("color.css");
@import url("layout.css");
@import url("advanced.css");

Now here is the interesting part, you can use different @import rules to filter out browsers for example:
@import "advanced.css"/**/; --------->modern browsers
@import\ url("ie.css"); --------->only IE 5.5 and IE 5
@import_url("ie.css"); --------->only mac IE

As you can see, advanced.css will only be loaded by modern browsers while ie.css will only be loaded by IE 5, IE 5.5 and mac IE.
The @import technique is a very powerful css tool for targeting different browsers and as such should be used wisely. Here is a list of different @import rules and how they interact with different browsers.

It all started when we decided to replace prototype with jQuery on one of our projects. Everything worked like a charm until somebody decided to finally check how things are working in IE. Then shit hit the fan in a form of "Operation Aborted" error. Page started to load nicely, but in the moment of swfobject initialization - the funky error popped out. I really like and support the swfobject project, but obviously, IE hates those two. Luckily enough for us, guy called Luke Lutman made a jQuery Flash Plugin which successfully solved some of our problems. I say some, because using the packed version of jQuery still breaks ActiveX control activation in Internet Explorer. Solution is aether to patch jQuery, or to use uncompressed version. Damn you Eolas patent no. 5,838,906!

While we are waiting for SWFFix to come out, which will solve all Flash embedding problems :), SWFObject 1.5 has been released. James Eberhardt is working on a SWFObject addon called SWFResize which will hopefully solve start in full screen Flash (8) problems.

The great sIFR 3 rev 229 is out and it contains many fixes and improvements (new automatic ratio approximation, fixed leading for single-line text, delayCss...)

And finally - swf Image Replacement. swfIR is here to solve some of the design limitations of the standard HTML image and its widely-accepted associated CSS values, while still supporting standards-based design concepts. He he, don't know how will Rick James react when he sees this. :)