Veerle's blog

You are looking at archived content. The hot new stuff is happening at Veerle's blog 3.0. You should check it out!

May 07

CSS hover effect

2007 at 01.07 pm posted by Veerle Pieters

I would like to share some insight on a piece of CSS I’ve used for the homepage for a website a while ago that I’ve built together with Roger Johansson. I’m talking about the hover effect on the 4 tabbed boxes shown on this page.

The HTML markup

Let’s take a look first at the HTML markup for this. First we need to think about the structure of this piece of content. How should it be structured with CSS disabled and still make sense for the user. I think a bullet list makes sense. We sum up the 4 different ways to find your Kansas City Homes for Sale. This is the (X)HTML markup:

<li id="diff-2"><h3><em>2</em>What is my house worth?</h3><div><p>Find the <a href="/" title="empty">value of your home</a> from any of our agents with our competitive market analysis.</p></div></li>

<li id="diff-3"><h3><em>3</em>Google&trade; search Kansas City area homes in MLS</h3><div><p><a href="/" title="empty">Search virtually all MLS homes</a> in the greater Kansas City area by using Google&trade;.</p></div></li>

If you look ate the page with CSS disabled, I think this markup is well structured and it’s perfect to build the necessary CSS to achieve the style I have in mind.

The background images

If you look at the final page and the effect I want to achieve with the tabs, you know that I need to create background images for this that are able to grow if the user enlarges the text. Here is how they look:

You’ll notice that both the hover background and the default background are saved as 1 gif file. This way the hover effect will go smooth without interuption. The entire image is loaded and the browser doesn’t have to load the hover images on the moment the user hovers the box. To be sure the box can grow we save the bottom part of the box and the top part of the box, making it long enough to be sure there will be no gaps (till a certain enlargement).

The CSS styles

The unordered list “differences”

This is the CSS for the list starting with the unordered list of the 4 boxes. To prevent the margins to collapse I’ve added float:left.

#differences {

margin:0.5em 0 1.5em 0;

padding:0;

list-style:none;

width:100%;

float:left;

}

The li element styles look like this:

#differences li {

margin:0 18px 0 0;

padding:0;

float:left;

background:url(../images/diff-tabs-top-wide.gif) no-repeat 0 0;

}

I add a right-margin of 18px to create a gutter between each box. The last box in the row doesn’t need this margin. Each li element has an id. The id for the last one is #diff-4. So I add this CSS style:

#differences li#diff-4 {

margin-right:0;

}

Making sure the tabbed boxes can grow

As you’ve noticed, we’ve linked the top part of the background image (the tab shape) to the li element via CSS. To make sure the tabbed boxes can grow if the user enlarges his text, we need to add an extra div in each li element. This way we can link the bottom part of the image to this div via CSS:

#differences div {

font-size:0.94em;

padding:6px;

background:url(../images/diff-tabs-bottom-wide.gif) no-repeat 0 100%;

}

With CSS3 we don’t have to go through this hassle of adding extra divs, because CSS3 allows for multiple background images on one element. This is my top favorite CSS3 feature :)

Creating the hover effect

I’ve used background positioning to create the hover effect on the li element using the :hover pseudo-class. The CSS looks like this:

#differences li:hover {

background-position:-156px 0;

}

#differences li:hover div {

background-position:-156px 100%;

}

The x coordinate is set to -156px. This way the pink orange part of the background image will be shown. The first style represents the top part of the tabbed box and the 2nd one the bottom part. Remember I had to add an extra div to make sure the box can grow (till a certain enlargement).

The page uses a dynamic resolution dependent layout

Not sure if you’ve noticed or not, but if you resize your browser window to less then 750 pixels wide, the page will adjust its layout. This is done using a javascript created by Kevin Hale of Particle Tree in combination with CSS. I’m using an extra CSS stylesheet that is applied if the browser window is resized to less then 750 pixels. By default the page/site uses the wider version, which is aimed to a screen resolution of 1024 x 768. About 90% of the visitors of the Prudential Kansas City visitors are using a screen resolution of at least 1024 x 768 pixels.

Hopefully some of you have learned from this article and are inspired to use CSS in a creative way without overlooking the accessibility part of it and keeping the right structure in mind for the (X)HTML. I’m still creating new templates for this website on an occasional basis. This website is rather big and new features are constantly added by the client and the developer.

Oh and let’s not forget to mention that it is always great to work together with Roger. He’s picky in what he does, but that’s what I love about working with him, and of course I always challenge him with my designs :)

At the websites i run, only 3% had a resolution of less than 750 pixels wide.

Why make a seperate script for this little people? Maybe if not all the site’s would build extra versions for this resolutions, the viewers would accept the change in resolution faster so that a resolution less than 750 pixels wide will be history.

At the websites i run, only 3% had a resolution of less than 750 pixels wide. Why make a seperate script for this little people? Maybe if not all the site’s would build extra versions for this resolutions, the viewers would accept the change in resolution faster so that a resolution less than 750 pixels wide will be history.

I know what you mean, but the client asked me if there was some sort of solution (hm, about 1.5 year ago I think). There were 10% users still on a lower resolution. I read about this script so I offered this solution to the client. Not sure if I would still do it. It brings a bit more work too (extra stylsheet/CSS work).

I know what you mean, but the client asked me if there was some sort of solution (hm, about 1.5 year ago I think). There were 10% users still on a lower resolution. I read about this script so I offered this solution to the client. Not sure if I would still do it. It brings a bit more work too (extra stylsheet/CSS work).

There are however to small things I want to comment on:
1) You’re using unordered lists. Why’s that? You’re talking about four different ways so an ordered list would be great. In that way not only users with browsers that support CSS see the number of the step, but people who use a textbrowser will see them too.
2) When you look at the page with CSS disabled you see five images. One of them is a button, but the others are embedded using IMG tags while they’re not part of any content. You should use textual links for this and hide the text and show the images using CSS. I’ve written an article (Dutch) about this.

I just wanted to say a big “THANKS”. My wife and I just moved to the KC area and have used the Prudential/KC site extensively for looking for a house. The functionality in the post-login area is great. (I’m making a pretty large assumption that you had something to do with building it…?) Anyway, cool article!

19

Jano Mon May 7, 2007 at 09.51 pm

A usability problem: We use hover to give feedback when the mouse is over the area or element. Hover is used mostly on menus to indicate that you are over the clickable area and you can click now. So I think the whole area should be clickable if you use the hover effect on it. This would make the clickable area bigger, which is always good.

20

Carl Mon May 7, 2007 at 11.13 pm

Regarding Seth’s comment, re: ul/ol… In this case, even with numbers there, it’s not really an ordered list (at least not in my mind). Ordered implies sequence, in that #1 must be done first, then #2, and so on. Here, the numbers are related solely to the number of options available, and not the order they must be done—again, at least in my understanding of things.

It might be a logical option since I need to display numbers, but it is very difficult - and maybe impossible to style the list numbers that way in all browsers.

You’ve already set list-style to none, so that would work for numbers too which could then be added as part of the markup if better control was required (although it would mean you’d end up with two numbers being displayed with styles off).

Phunk Tue May 8, 2007 at 10.56 am

That page looks sloppy if the minimum font size is set higher than the default because you seem to be using pixels for measurements where it should be ems and you aren’t using sliding doors for the graphics. The latter might be unjustified, but using ems is not, because browsers like Fx and Opera make it easy to customize the minimum font size, and eyesight defects are common.

Drezden Tue May 8, 2007 at 12.44 pm

That page looks sloppy if the minimum font size is set higher than the default because you seem to be using pixels for measurements where it should be ems…

You got to be kidding right? The page looks just fine and only breaks after making things 3x bigger. If you need that you’re probably using another tool anyway. Avoiding a page from breaking is utopia, a thing you should know if you ever build a goodlooking webpage. You go as far as humanly possible and if you think that’s sloppy I am eager to see your work.

Geert, you’ve missed the point. If you look at the bottom of the boxes, you can see the text overlapping the graphics at any size bigger than the default, which would be easily fixed by using ems instead of pixels.

30

Veerle Tue May 8, 2007 at 03.04 pm

Sorry, but why using a unordered List with numbered items? It would be better to use an ordered list, wouldn’t it?

I already answered this question in the comments, but I guess you didn’t see that. I’m also wondering if this would be the right choice since it isn’t an “actual” ordered list. These aren’t required steps to follow or anything, the numbers are presentational to show the 4 major benefits of this site. I could as well switch the order of these boxes. If I need to style an ordered list, you’ll end up with double numbers in the HTML code, which will make things more confusing if you view the page in a text browser. So I don’t believe it’s a better option in this scenario.

Geert, you’ve missed the point. If you look at the bottom of the boxes, you can see the text overlapping the graphics at any size bigger than the default, which would be easily fixed by using ems instead of pixels.

I used pixels because I want the boxes to line up at the bottom, so they have an equal height. It would be nice if they keep having the same height if you enlarge the text, but it doesn’t. With ems you don’t have full control over that, and it’ll differ from browser to browser. I was also confused about your previous comment btw. The last one clarifies it. I only use sliding doors in the tabbed navigation. Not sure how you’ll use it in the boxes?

I’ve missed the point because you didn’t specify it as clearly as you now did in this last comment. We wanted the boxes to stay the same height and this would be hard when using ems in different browsers.

They’re only the same height if your font size is at the default, but they aren’t if it’s bigger or the page is narrowed down. I made an example that doesn’t fix this, but scales well. It was easy and worked well on the first try in Fx, IE and Opera, so no excuses. :-)

33

Veerle Tue May 8, 2007 at 04.27 pm

They’re only the same height if your font size is at the default, but they aren’t if it’s bigger or the page is narrowed down. I made an example that doesn’t fix this, but scales well. It was easy and worked well on the first try in Fx, IE and Opera, so no excuses. :-)

It looks good, but it’s not exactly like in my page: Did you check it with a different amount of text in the boxes? Will they still align at the bottom? Every box has its own ID in my page because they have different images and a different bottom padding… exactly because I want to align them nicely at the bottom. Just wondering if this still works. For me this is important in the default view, in all browsers and platforms. If so I would implement it.

Yup, mine are kind of the same height now too, and still scale well, and the text doesn’t overlap the graphics. When the text size changes, though, the edges are misaligned, but your example suffers from that too. Also, I don’t think there’s any default size for all browsers and platforms, and IE for instance has 5 different defaults that can be toggled through. I even tried your example in my Opera, and it rendered it differently than the rest.

Veerle Tue May 8, 2007 at 07.57 pm

“Kinda” indeed, in Safari you see it’s not the same height. In the first design of this page the text of each box was the same, but then later on the client asked me to change some of the text in the boxes and it got trickier :-/ Thanks for the effort though I will keep it in mind. Would have been great if it was perfect I would have changed it. Design is still my main concern. It has to look perfect and equal in the default view :)

Well, yours is misaligned in Opera 9, misaligned with four of the default sizes in IE, and has text overlapping images in all five of them, and it’s also misaligned in all browsers when the font size isn’t default. The immediately obvious solution is to set a minimum height for the boxes, and I didn’t do that before because you asked if it could be done with paddings. It’s fixed now, and I suppose will work in Safari too, even though I didn’t test.

About CSS, if you look at mine, you’ll see that there’s little descendant selectors and it’s mostly simple classes without the elements names. This is because having longer selectors makes them needlessly heavy, and then you sometimes need to make other selectors longer to override something, and it’s also supposedly faster this way for the browser to render. Being as specific as possible would intuitively seem like helping the browser, but it’s probably actually slowing it down a bit. At least I know this to be true for Gecko, but it’d be logical for other browsers as well. Another aspect of this is that having selectors like

#id div

means that it’s more bothersome to add unplanned

div

elements to the

#id

, and makes development a bit difficult. Child selectors

#id < div

would be much more appropriate, but we can’t use them, so simple classes is the next good bet, even though they seem less puristic.

Lastly, I’m sorry if my text seems snotty or unfriendly, it’s just that my English isn’t good enough, and the tone doesn’t turn out as I intend.

Another great article, Veerle. I especially like the fact that you addressed the accesibility aspect from the beginning. Most designers STILL do not pay enough attention to the content outside of the visual design. Dan Cederholm would be proud.

Veerle Wed May 9, 2007 at 09.15 am

Well, yours is misaligned in Opera 9, misaligned with four of the default sizes in IE, and has text overlapping images in all five of them, and it’s also misaligned in all browsers when the font size isn’t default.

Oops, I just see now that I forgot to upload the “ie.css” stylesheet :-/ So that’s why you saw them not aligned well in IE. I do also set a min-height in ems on #differences p and I use a height for IE. I didn’t mention this style here in the article. I really wanted to keep things simple and talk about how I applied the hover effect and the backgrounds and more focus on that. I’ll have a closer look at your technique. I appreciate all the efforts you’ve done.

41

Johan Wed May 9, 2007 at 04.43 pm

to make it work with IE, see here:
http://brunildo.org/test/cssPopMenus.html

I know, well that’s the price IE6 users have to pay I’m afraid. Some extras aren’t there. That’s what they call progressive enhancement :)

I love that quote. Sure going to use it more often next time to people who uses “back-dated” browsers. Progressive enhancement!

46

Stretch Fri May 11, 2007 at 02.37 am

This looks nice, but highlighting an area on mouse over without it being clickable is inconsistent behaviour to what we’ve come to expect in this situation. I’m sure visitors will work it out, but how many will try to click on the areas and nothing happens? A little frustration they could probably do without.

This looks nice, but highlighting an area on mouse over without it being clickable is inconsistent behaviour to what we’ve come to expect in this situation. I’m sure visitors will work it out, but how many will try to click on the areas and nothing happens? A little frustration they could probably do without.

You’re right, in that this is nothing more than visual eye candy. I myself tend to stray away from this. The purpose of this article however was to simply illustrate the effect, not suggest where it should be used.

Arguably, this concept is great in certain locations outside of indicating links - take zebra tables for example; when is the last time you scrolled through a long table that could have easily benefited from this?

In my personal opinion, I don’t believe that the majority of web users out there expect mouseovers to necessarily constitute a link. And most are smart enough to realize that the main indicator of a link is a change in the style of the mouse cursor, not a background or image change.

Stu Nicholls just provided a CSS solution working in IE.
See at: http://www.cssplay.co.uk/menu/bground_hover.html

This method defeats the purpose, as it does not produce divs of equal height as Veerle sucessfully demonstrated. Furthermore, programming for individual browsers (i.e. Internet Explorer) is, in my opinion, counter productive in pushing browser manufacturers to adhere to standards set by the industry. A solution that is perfectly valid and clearly working in most of the standards compliant browsers, should not be “hacked” to provide support for one or a few of those browsers that fail to meet those standards.

Additionally, I think your comments at the site you so graciously provided a link to were unecessary:

I find it strange that the author claims to have a “mock” copyright on the concept asking for credit without the mention of Veerle despite the tutorial having been composed AFTER Veerle so lovingly tried to assist us with her solution. Now, technically, copyright would apply to the source code alone as colors and concept cannot be copyrighted. But I feel its a bit beligerent to claim all credit for one’s self despite being inspired or based on the hard work of another designer.

Many of you fail to view this article as it was intended: to be a demonstration of a concept and not a step-by-step guide to achieving a particular effect.

Thank you to those who are interested in providing additional support and information for the benefit of the community. And to those of you who are interested in criticism (and I don’t mean of the constructive sort), exercise restraint and show a bit of kindness to those that are only trying to help you by providing ideas and instruction.

51

Veerle Sun May 13, 2007 at 11.26 am

I would take out 1 from heading element.. and why it’s an emphasis? You wrote those numbers are clearly presentional.. I’d rather put it in <div> before <h3> element

I believe <em> has more “meaning” when the styles are switched off then a <div>. In my situation here I’m talking about “4 reasons” why to choose for the Prudential Kansas City site, so emphasizing the numbers make sense to me, while a div hasn’t got any meaning. It’s the same for <span> for example. I believe it’s always better to choose an element with a meaning in situations like this. So if you believe it’ll add extra meaning it’s better to use elements like “strong” or “em” instead.

This method defeats the purpose, as it does not produce divs of equal height as Veerle sucessfully demonstrated. Furthermore, programming for individual browsers (i.e. Internet Explorer) is, in my opinion, counter productive in pushing browser manufacturers to adhere to standards set by the industry. A solution that is perfectly valid and clearly working in most of the standards compliant browsers, should not be “hacked” to provide support for one or a few of those browsers that fail to meet those standards.

Yes I totally agree with what you are saying here. That’s why I stated that my method stands for progressive enhancement ;)

Many of you fail to view this article as it was intended: to be a demonstration of a concept and not a step-by-step guide to achieving a particular effect.

You said it right, thanks for that :) This is exactly why I sometimes start doubting on posting articles like this, about CSS and such. I love to learn and hear about other techniques from people here in the comments, but people should read a little bit better before commenting sometimes. I love to learn new stuff, but it gets tiresome to re-state things that I already made clear in the article. For instance the IE6 thing. Also I never claim that my methods are “the” method. It’s like you said is just a proof of concept.

Stu Nicholls just provided a CSS solution working in IE.
See at: http://www.cssplay.co.uk/menu/bground_hover.html

This is funny :

Copyright: You may use this method on your web site without seeking my permission.
A link back to CSSplay would be appreciated.

I always quote the source where I get the mustard from. To me that’s just decent courtesy
Guess the link back only works one way ;) I have no problem that people use the content of this article but a little bit appreciation goes a long way. Claiming this is yours is not done in my book.

@Veerle,
@all,
My purpose pointing out the Stu’s solution was provided a resource for those interested in *another* solution working in IE.
I’m so sorry that my comment goes beyond my purpose and ask tons of apologizes to Veerle.

53

Veerle Sun May 13, 2007 at 12.41 pm

My purpose pointing out the Stu’s solution was provided a resource for those interested in *another* solution working in IE. I’m so sorry that my comment goes beyond my purpose and ask tons of apologizes to Veerle.

Yes I know and you don’t need to apologize here, really. I just used your quote to link to Stu’s article really, this is nothing personal towards you. It’s just sad that there is no referral back to me. Not that I need it :) It just feels more fair, that’s all. About the IE thing, I should have mentioned it in my article because I was aware of it. I just forgot to mention it, so people know it doesn’t work and maybe I should have added also why it doesn’t work and why I didn’t try to find a solution as well. It doesn’t mean anybody else can’t provide a solution of course. As long as it is done in friendly way I’m all for it ;)

The site renders fine in Opera 9, Opera 8.52 has just an issue with the navigation, the rest is ok. I don’t fix that because it’s a bug in Opera NOT in my code. So update the lastest version. The validation errors you pointed to are from readers who put breaks in the comments instead of just using enter to create a new paragraph. That’s fixed now too but had nothing to do with the rendering.

The validation errors you pointed to are from readers who put breaks in the comments instead of just using enter to create a new paragraph. That’s fixed now too but had nothing to do with the rendering.

That is one of the drawbacks to allowing user-supplied content, like comments: you can’t assume that most users know how to properly use HTML/XHTML tags (though the majority of users on this site seem to be very knowledgeable). Validation errors are bound to crop up from time to time.

I have yet to find a good solution to providing a “WYSIWYG” editor to enhance comment textboxes that are sound, both from a usability and an accessibility standpoint - that’s one of my biggest peeves. And, Veerle, I know you share that same view. That would be the most efficient and simple solution for general users (a WYSIWYG type editor).

On the other hand, “bbcode” seems to be a sufficient method of marking up text. This also has the benefits of added security. The closest thing to this that I could find for use with pMachine’s ExpressionEngine is the Textile add-on by Rick Ellis, which supplies Wiki type formatting, or the Show pMcode Formatting add-on by Sue Crocker, which allows the display of common pMCode items.

Admitedly, it’s been awhile since I last used pMachine’s Expression Engine, and I may be in error, not realizing that a simple system like this is already in existence. In that case, Veerle may have placed more faith in us than I originally beleived by allowing us the freedom of using HTML/XHTML in our comments.

The only complaint, which is more against my own laziness than anything else, is that there is no “quote” feature that would allow us to quickly quote a previous commentor. Or am I just missing something?

I love posts like this, but hate the inevitable deluge of ridiculous comments from ‘developers’ with their “Your page doesn’t validate”, “your markup isn’t proper because of your use of the _____ element” and my personal favorite “you page doesn’t work in [insert really old browser version here]”. Geez, can’t someone post a technique and/or a case study without standards nazis breaking out the flame throwers?

On a lighter note, thanks for the write-up Veerle, and nice job with the site. I particularly like the use of the JS to reformat the page to a lower resolution (however, in my case I’d use it to resize content for 1024x768 users down from a higher resolution).

Ciao!
thanks a lot for your useful tutorials. I needed to use pseudo classes to apply an hover effect to a DIV, so I was just looking for a pratical example ;)
I am using only background color and borders as hover effect for the DIV.
Even though IE7 now supports the hover for other than an anchor I find it buggy though :-O some text is disappearing from the DIV when I hover on it. But only for 1 of the 4 boxes on the page :D strange..
adri

Ps. My firefox 2 is displaying the “Site Map” link on the top right of the screen on two lines, while on IE 7 it’s on one single line.