Document type and its implications

Dev Shed Forums Sponsor:

February 8th, 2013, 08:41 AM

mrpooh

Registered User

Join Date: Feb 2013

Posts: 6

Time spent in forums: 35 m 18 sec
Reputation Power: 0

New Member - Document type and its implications

Greetings,

I have two HTML files created at different times in history, so they have two document types at the top of the page.

I have a CSS style for hover links.

The hover link is specified as follows:

a:hover {
color: #003300;
text-decoration: none;
background-image: url("guacoff/images/dash.gif");
background-repeat: repeat-x;
background-position: 0 bottom;
}

The idea is that when a user hovers over the link, a graphic will appear at the bottom that looks like an underline, but is flashing because it's essentially an animated GIF.

I'm finding that a hover link effect will work on both text links as well as image links with the older page but with the newer page, it will only work on the text links. Actually, I found that this effect WILL work with the newer file if the graphic is a GIF file with some transparency. Can someone shed some light on this?

Because I am a new user, I cannot include URLs in my posts, so hopefully there is enough info below to shed some light.

The older page has this info at the top:

<!DOCTYPE html
PUBLIC "-//W3C//DTD HTML 4.01//EN"
"(URL address blocked...)">
<html lang="en-US">
<head profile="(URL address blocked...)">

The new page has this info at the top:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "(URL address blocked...)">
<html xmlns="(URL address blocked...)" lang="en" xml:lang="en">

Can anyone shed any light on this?

Thanks!

February 12th, 2013, 04:52 PM

null.if.ied

Registered User

Join Date: Feb 2013

Posts: 26

Time spent in forums: 6 h 15 m
Reputation Power: 0

The answer has to do with how the different HTML standards treat layers.

No doubt the HTML 4.01 specification doesn't handle layers quite as modernly, so when you assign a background to a an image link on :hover, the background image appears without problem.

In XHTML 1.0 Transitional, layers are handled differently. The background is just that: in the background. Anything that you put on top of the background, in this case an image, will block the background from view.

You observed this when you noticed that, if your image link contained transparent pixels, you could still see the background image partially.

This is just a difference in the implementation of the two standards. To understand more about how HTML/CSS handle layers, look up the z-index property.

As for a solution, the simplest one that comes to mind is to make your image link taller than the actual image itself. I.E. add a few pixels of padding to the bottom, but do not vertically repeat the image.

The effect of this will be that, while you are not hovering over the image, you'll notice no difference. When you do hover over the image, the background animation will inhabit those few empty pixels at the bottom of the <a> tag, where it won't be covered by the link image.

- Null

February 12th, 2013, 08:50 PM

mrpooh

Registered User

Join Date: Feb 2013

Posts: 6

Time spent in forums: 35 m 18 sec
Reputation Power: 0

Thanks for your thoughtful reply.

I'll try your suggestions, just to see what I can learn from this.

In the meantime, before receiving your response, I went ahead with other images that were affected and simply added 4 pixels of white at the bottom which I then designated as transparent, and saved the images a GIF files. A silly sort of workaround, but it's simple and worked!

Now that I read your response more closely, I think this may have been your exact suggestion, right?

Cheers,

Mr. Pooh

February 13th, 2013, 09:46 AM

null.if.ied

Registered User

Join Date: Feb 2013

Posts: 26

Time spent in forums: 6 h 15 m
Reputation Power: 0

That's almost my suggestion, you just added the padding to the images themselves whereas it would be easier to add the padding on the :hover property with CSS instead.

css Code:

Original - css Code
a:hover img { padding-bottom: 4px; background: url('foobar.gif') left bottom repeat-x; }

a:hover img {
  padding-bottom: 4px;
  background: url('foobar.gif') left bottom repeat-x;
}

This would also allow your link images to be format agnostic, since they wouldn't require transparency.

- Null

Last edited by null.if.ied : February 13th, 2013 at 09:54 AM. Reason: fixed syntax highlighting

February 13th, 2013, 01:11 PM

mrpooh

Registered User

Join Date: Feb 2013

Posts: 6

Time spent in forums: 35 m 18 sec
Reputation Power: 0

Thank you.

I will give that a try and see If it works!

Mr. Pooh

February 13th, 2013, 10:36 PM

mrpooh

Registered User

Join Date: Feb 2013

Posts: 6

Time spent in forums: 35 m 18 sec
Reputation Power: 0

Thanks! It works. That's brilliant.

Note - in this case, because I already had a CSS for a:hover that included the background graphic, it was not necessary to have the background image indicated. The image link took on the property of the parent, so to speak. But you probably already knew that. And I can see how your CSS could be useful to me if I just wanted my image links to have that effect.

What you taught me was how to adding the 4 px padding on the bottom to allow for the effect. Nice.

I also appreciate that this works with any image type (format agnostic, as you put it!).

Many thanks!

New Member - Document type and its implications

Developer Shed Advertisers and Affiliates