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:

Prudential Kansas City homepage - CSS hover effect

  1. <h2>4 different ways to find your Kansas City Homes for Sale</h2>
  2. <ul id="differences">
  3. <li id="diff-1"><h3><em>1</em><a href="benefits.html">See all MLS homes like an insider—join us</a></h3><div><p><a href="benefits.html">Join us </a> and see <strong>2,207</strong> additional homes, e-mail updates, and free custom website.</p></div></li>
  4. <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>
  5. <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>
  6. <li id="diff-4"><h3><em>4</em>Map Kansas City real estate in Google&trade; maps </h3><div><p> <a href="cma.html" title="empty">See the location</a> of all Kansas City real estate with Google&trade; maps—map or satellite views.</p></div></li>
  7. </ul>

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.

  1. #differences {
  2. margin:0.5em 0 1.5em 0;
  3. padding:0;
  4. list-style:none;
  5. width:100%;
  6. float:left;
  7. }

The li element styles look like this:

  1. #differences li {
  2. margin:0 18px 0 0;
  3. padding:0;
  4. float:left;
  5. background:url(../images/diff-tabs-top-wide.gif) no-repeat 0 0;
  6. }

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:

  1. #differences li#diff-4 {
  2. margin-right:0;
  3. }
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:

  1. #differences div {
  2. font-size:0.94em;
  3. padding:6px;
  4. background:url(../images/diff-tabs-bottom-wide.gif) no-repeat 0 100%;
  5. }

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:

  1. #differences li:hover {
  2. background-position:-156px 0;
  3. }
  4. #differences li:hover div {
  5. background-position:-156px 100%;
  6. }

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 :)


62served

gravatar

1

permalink this comment Enrique Mon May 7, 2007 at 02.00 pm

really genial Veerle!, again.

Thanks! ;-)


gravatar

2

permalink this comment markus Mon May 7, 2007 at 02.03 pm

heya, nice tip, but theres a slight problem to it, because any ie below 7 doesent know hover for anything but a-tags. it doesnt really break your neck for accessability, but handy to know

cya


gravatar

3

permalink this comment Jocker Mon May 7, 2007 at 02.11 pm

It would have been superb if it fully worked also on internet explorer.
BTW, I love this kind of super useful tips…
Thanks!!!


gravatar

4

permalink this comment Martin Hellendoorn Mon May 7, 2007 at 02.13 pm

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.


gravatar

5

permalink this comment Fabian Mon May 7, 2007 at 02.24 pm

awesome!!! thx for sharing veerle!


gravatar

6

permalink this comment MaRmAR Mon May 7, 2007 at 02.26 pm

Yes yes, this is good technique also for other types of navigation and/or hoverable elements.


gravatar

7

permalink this comment Oli Mon May 7, 2007 at 02.29 pm

Great technique! Thank you!!


gravatar

8

permalink this comment Eva Mon May 7, 2007 at 02.33 pm

I am a newbie in CSS but seriously I would never think of using it for that purpose. LOL thats what I like about your site. I can always learn something new and helpful! Thank you!


gravatar

9

permalink this comment Stephen Mon May 7, 2007 at 02.36 pm

Nice article. Good find with http://particletree.com/features/dynamic-resolution-dependent-layouts/ will look into using that in the near future


gravatar

10

permalink this comment Seth Nickerson Mon May 7, 2007 at 02.45 pm

Veerle, wouldn’t it make more sense to use an ordered list than an unordered list for the “differences” div?

I’m sure there’s a reason you did it, but you didn’t mention why you made the choice to use an unordered list over what I thought would be the more obvious and semantic choice.


gravatar

11

permalink this comment Veerle Mon May 7, 2007 at 03.17 pm

markus said:

...theres a slight problem to it, because any ie below 7 doesent know hover for anything but a-tags. it doesnt really break your neck for accessability, but handy to know

I forgot to mention this in my article. The hover effect doesn’t have an extra purpose, it’s like you say.

Jocker said:

It would have been superb if it fully worked also on internet explorer.

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 :)

Martin Hellendoorn said:

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).

Seth Nickerson said:

Veerle, wouldn’t it make more sense to use an ordered list than an unordered list for the “differences” div?

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.


gravatar

12

permalink this comment Francois Carstens Mon May 7, 2007 at 03.49 pm

Veerle, thanks for the look into your ‘oh, so coveted’ markup.

Also noticed the hover that won’t work on earlier versions of IE. That is, however, easily fixed in 2 easy steps. Download Peter Nederlof’s csshover.htc from Peterned and add this behaviour

behavior:url(“csshover2.htc”);

to your IE specific {body, html} css.  Peter’s page covers the whole issue, and explains how the behaviour works.


gravatar

13

permalink this comment Michel Mon May 7, 2007 at 04.07 pm

Interesting read, Veerle:)

I’ve used similar techniques in the past, just never documented them:)

Very well structured tutorial, and will be useful to many:)


gravatar

14

permalink this comment Trevor Mon May 7, 2007 at 04.13 pm

The best solution that I have found for IE6 is to use the Dean Edwards IE7 script. At An Event Apart Boston, Eric Meyer suggested that we all start using it to bring IE6 up to par.


gravatar

15

permalink this comment Martin Hellendoorn Mon May 7, 2007 at 05.01 pm

Veerle said:

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).

As long as the client pay’s for the extra work, its ok :)


gravatar

16

permalink this comment Mariusz Mon May 7, 2007 at 06.09 pm

Nice article. By the way, this IE6- hover behaviour is very easy to overcome with unobtrusive JavaScript and behaviors, actually, so I don’t think it’s really a problem.

In jQuery you just go:

$(function() {
  $(’#differences li’).hover(function(){
  $(this).addClass(‘over’);
  });
});

Then just adjust the CSS to:

#differences li:hover, #differences li.over { ... }
#differences li:hover div, #differences li.over div { ... }

And voila, should work like a charm.


gravatar

17

permalink this comment Bart Mon May 7, 2007 at 06.47 pm

Nice post Veerle! I always like this kind of techniques.

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’m looking forward to more blogposts like this!


gravatar

18

permalink this comment Ryan M Mon May 7, 2007 at 07.09 pm

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!


gravatar

19

permalink this comment 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.


gravatar

20

permalink this comment 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.

Thus, the use of an unordered list seems appropriate here.


gravatar

21

permalink this comment John Faulds Tue May 8, 2007 at 12.23 am

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).


gravatar

22

permalink this comment Jermayn Tue May 8, 2007 at 02.36 am

Just lifted the bar yet again for us mere mortals….


gravatar

23

permalink this comment Phunk Tue May 8, 2007 at 10.56 am

Thanks for sharing this! I did something similar using another method…always interesting how you can acheive the same result in different ways with css.

thanks


gravatar

24

permalink this comment a flying ox Tue May 8, 2007 at 11.46 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.


gravatar

25

permalink this comment Drezden Tue May 8, 2007 at 12.44 pm

Thanks! ;-)


gravatar

26

permalink this comment Geert Leyseele Tue May 8, 2007 at 12.55 pm

a flying ox said:

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.


gravatar

27

permalink this comment Tomek Tue May 8, 2007 at 01.23 pm

Thats what I like about your website to see something imposible for me:) I am a newbie in CSS but seriously I would never think of using it for that purpose. Greetings


gravatar

28

permalink this comment Martin Labuschin Tue May 8, 2007 at 01.44 pm

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


gravatar

29

permalink this comment a flying ox Tue May 8, 2007 at 02.08 pm

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.


gravatar

30

permalink this comment Veerle Tue May 8, 2007 at 03.04 pm

Martin Labuschin said:

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.

a flying ox said:

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?


gravatar

31

permalink this comment Geert Leyseele Tue May 8, 2007 at 03.15 pm

a flying ox said:

Geert, you’ve missed the point.

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.


gravatar

32

permalink this comment a flying ox Tue May 8, 2007 at 04.00 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. :-)


gravatar

33

permalink this comment Veerle Tue May 8, 2007 at 04.27 pm

a flying ox

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.


gravatar

34

permalink this comment a flying ox Tue May 8, 2007 at 05.03 pm

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.


gravatar

35

permalink this comment Andy Tue May 8, 2007 at 06.58 pm

Wow, neat post! You have the best blog ever!

:)


gravatar

36

permalink this comment Veerle Tue May 8, 2007 at 07.57 pm

a flying ox said:

Yup, mine are kind of the same height now too

“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 :)


gravatar

37

permalink this comment a flying ox Wed May 9, 2007 at 12.22 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. 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.


gravatar

38

permalink this comment David Cassidy Wed May 9, 2007 at 06.51 am

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.


gravatar

39

permalink this comment Phunk Wed May 9, 2007 at 09.03 am

In “my” Safari it displays at the same height

same height also with a bigger font size.

It’s weird those difference within the same browser!

[edited by Veerle: this was because the comment was posted after the code was adjusted for Safari. I moderate the comments to avoid spam.]


gravatar

40

permalink this comment Veerle Wed May 9, 2007 at 09.15 am

a flying ox said:

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.


gravatar

41

permalink this comment Johan Wed May 9, 2007 at 04.43 pm

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


gravatar

42

permalink this comment Georg Thu May 10, 2007 at 01.28 am

Great as usual :-) - thanks for sharing - lets me understand how to use CSS


gravatar

43

permalink this comment Pablo Rosales Thu May 10, 2007 at 02.21 am

Great tutorial, your blog design is #1 in my favorite blog designs list, one day I hope to be as good as you, thanks for sharing!


gravatar

44

permalink this comment Unexpected Thu May 10, 2007 at 08.19 am

Thanks for another great tutorial Veerle :) I must say that you taught me a lot already! thanks again and keep up the great, great work :)


gravatar

45

permalink this comment zao Thu May 10, 2007 at 05.36 pm

Jocker said:

It would have been superb if it fully worked also on internet explorer.

Veerle replied:

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!


gravatar

46

permalink this comment 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.


gravatar

47

permalink this comment David Cassidy Fri May 11, 2007 at 12.52 pm

Stretch said:

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.


gravatar

48

permalink this comment Mauricio Samy Silva Sat May 12, 2007 at 12.26 am

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


gravatar

49

permalink this comment medyk Sat May 12, 2007 at 02.13 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


gravatar

50

permalink this comment David Cassidy Sun May 13, 2007 at 05.29 am

Mauricio Samy Silva said:

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:

Mauricio Samy Silva said:

Congrats Stu.
Your solution works in IE.
The Veerle’s doesn’t: www.veerle.duoh.com/blog/comments/css_hover_effect/

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.


gravatar

51

permalink this comment Veerle Sun May 13, 2007 at 11.26 am

medyk said:

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.

David Cassidy said:

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 ;)

David Cassidy said:

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.

Mauricio Samy Silva said:

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.


gravatar

52

permalink this comment Mauricio Samy Silva Sun May 13, 2007 at 11.50 am

@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.


gravatar

53

permalink this comment Veerle Sun May 13, 2007 at 12.41 pm

Mauricio Samy Silva

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 ;)


gravatar

54

permalink this comment Filosof Sun May 13, 2007 at 09.34 pm

Nice solution.. but is it usable? Won’t be users trying to click on the text? Because hover effect means (for me), that something is a link (but I haven’t done any user testing of this problem)..


gravatar

55

permalink this comment Radek Hulán Mon May 14, 2007 at 12.35 am

Your website does not render well in Opera:

http://validator.w3.org/check?uri=http://veerle.duoh.com/blog/comments/css_hover_effect/


gravatar

56

permalink this comment Veerle Pieters Mon May 14, 2007 at 08.21 am

Filosof said:

Won’t be users trying to click on the text? Because hover effect means (for me), that something is a link (but I haven’t done any user testing of this problem)..

Yes it works fine because the links in the boxes are underlined so the users know these are links. There are two in there so making the boxes clickable was not an option.

Radek Hulán said:

Your website does not render well in Opera

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.


gravatar

57

permalink this comment David Cassidy Mon May 14, 2007 at 08.49 am

Veerle said:

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?


gravatar

58

permalink this comment Filosof Fri May 18, 2007 at 07.26 am

And what about headings? They are not underlined (none of them) and they are acting exactly the same.. but only the first one is link..


gravatar

59

permalink this comment Veerle Fri May 18, 2007 at 09.48 am

Filosof said:

And what about headings? They are not underlined (none of them) and they are acting exactly the same.. but only the first one is link.

Well to be honest I wasn’t aware there wasn’t a link on that header. I’ll remove it for the sake of consistency. Still, I don’t see this as an issue since this is the same link as the underlined one.


gravatar

60

permalink this comment Sean Foushee Sun May 20, 2007 at 05.50 pm

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).


gravatar

61

permalink this comment medienstern Sun May 27, 2007 at 08.34 am

Thanks for this helpful Tutorial.


gravatar

62

permalink this comment adriano Tue May 29, 2007 at 10.54 am

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.



Commenting is not available in this weblog entry.

Flickrness

buy something from my Amazon wishlist