Advanced CSS Rollover?

[barrykins]

I'm curious as to how this website, Wieden+Kennedy | Full Service Integrated Advertising Agency , created their rollover for their images(on the front page). I tried to look at their code but the CSS has no white space to find anything to save space, I'm assuming.

[noonnope]

They use AP. Or layers.

The "last" layer, the one with the text, is AP top zero, left zero, and hidden.

div.rollover-info {
    color: white;
    left: 0;
    position: absolute;
    top: 0;
}

.rollover-info-wrapper {
    display: none;
}

Since it comes after the image, it will have a bigger z-index, it will stack above. The only thing left to do is to make it show, to cover the image on rollover.


Problem is they wrap div inside a:

<a href="/campaign/cocacola_music" class="rollover rollover-static rollover-medium rollover-detailed rollover-medium-detailed" content="2673" media="6286" mediaslot="2">
			<img src="http://c0717682.cdn.cloudfiles.rackspacecloud.com/media/2e46a7f84d8be3f36a028.jpg" alt="" class="image">
					<div class="rollover-info rollover-info-wrapper">
			<div class="rollover-info rollover-background">&nbsp;</div>
			<div class="rollover-content">
				<div class="rollover-title">Coca-Cola Music</div>
				
				<div class="rollover-description">		
		<div class="description">Coca-Cola and Maroon 5 tore down the virtual walls of the recording studio and brought fans from around the world together for an unforgettable moment.<br>
<br>
Fans inspired the band as ...</div>
		</div>
			</div>
			<div class="rollover-action-label">View</div>
		</div>
						<div class="tag ">
				<img src="http://c0717682.cdn.cloudfiles.rackspacecloud.com/images/tags/ams.gif">
			</div>
</a>

[barrykins]

Yeah I wondered about that as well. Since they coded their website like this how usefull is the rollover in terms of SEO? Also I've been running into an issue with the div or a wrap in using CSS Drop shadows with Richard Rutter's Technique that wraps the image in a div class.

Now my question is if that image is a link. Would you wrap the link and image in the div class or only the image.

[noonnope]

I don't think SEO really has to do with mark up. You'll notice that a lot of crappy coded pages rank high. SPF pages are proof of that. It may help, but it's not essential.

That image is part of an anchor. They use a XHTML DTD. Therefore, an anchor (<a></a>) can only have inline elements as its children. <div> is block, so it's not valid.

One thing you need to know: invalid pages work too sometimes. Most of the times, actually. If the problems aren't big, as to stop the rendering, browsers have algorithms to solve bad mark up in order to still offer a usable page.

Hence, even if they broke he rules, the page works.


About the wrapping thing. You can do whatever you like. Some will argue about the semantics, about DTDs. They're right. Only if you aim at being a professional. Otherwise, do what it takes to make it work the way you like.

I would not use so many divs, for sure. Probably I would use a list of some kind, and the wrapping div would not be necessary. But this requires a deeper look than 5mins on Friday night.

[barrykins]

Well I am trying to keep maintain the best standards for markup since I am achieving to be a professional so I'm always looking for new ways to more efficiently code.

So you mentioned that you would use a list. Correct me if I'm wrong but if you could create the rollover effects that they have will all of the divs and use a list. Give all the list a class and different index's to contain the image and rollover? If that is possible, how would you activate the rollover. by connecting the bg image to a link?

Excuse me if I'm not making sense, rollovers have just been a bit of an issue for me.

Could you do a rollover without containing the rollover bg in an (<a> </a>) element?

[noonnope]

Rollover effect relies on the :hover pseudo-class.

There are issues in IE6- with :hover available only for <a>s, and IE7 not supporting :active on all elements.

You can do a rollover w/o <a>s, but you need JS fallback for IE6-, and some probable tweaking for IE7.

Current versions for the modern browsers like FF, Op, Ch support :hover on other elements beside <a>s.