CSS for special hover link

Greetings,

My last post dates from 2004!

I can't figure out why I can't get the graphic links on my new test page,

which is here: http://www.nondairycreamer.com/x_testing/index.html

to have the same effect for the hovering status as they do on my old home page, which you can see here:

http://www.nondairycreamer.com/index.html .

The text links on the new page have the desired effect, but not the graphic links.

When a user hovers over a link, one should see an animated dotted line underneath.

For some reason, on my new page, you actually can see the hover effect take place on the middle graphic, and I know that that logo is a GIF with some transparency!

I am using a completely different CSS file for the new file, and I just can't pin down the culprit that might be affecting the behavior.

The old CSS information is on the old index.html page itself:

And the new CSS file is an external stylesheet located here:
http://www.nondairycreamer.com/x_tes...irycreamer.css

Any clues?

Is there a CSS line in the stylesheet somewhere that is the culprit?

Could it have anything to do with the document types of these two pages being different?

And most importantly, mow might I find the way to create that effect for all my graphic links on my new page?

I know the old page has some sloppy and inconsistent code (please bear with me), but the issue for me concerns the functioning of the new page.

Thanks.

It's because the very bottom of the <a> tag doesn't fit in #myinnercontainer or table. Try to add all links background-color: yellow and you will see, that no part of the text-link is visible. Your approach relies on the fact, that the bottom part of the <a> tag would still be visible and so you can use the very last pixel of it for the background effect. That doesn't have to be true all the time depending on the font-size, line-height, image dimensions, etc...

Add a rule:
a { background-color: yellow;}
a img { padding-bottom: 5px;}

Try using some background-color or border around elements for the development stage - it will help you spot the errors.

And for everyones sakes, don't use tables for markup in 2013. Use absolute positioning, floats or some grid system

Thanks for the reply.
I will take some time to explore your suggestions and testing.

And also thanks for the push to use another system other than tables. I needed the push.
I will explore some grid system.

I'll let you know if I run into more snags after this step.

I think its working....I just need to see that Does it possible to change the other element after hovering over the link or image? I think it will be related to the Jquery. Isn't it?

@pooh: You're welcome. I just had a quick look at your page and i thought it has to be something easy. Then i spent about half an hour inspecting your code before i tried the backgrounds and realised, what's going on. Well, i'm learning this way, too :)

@Melvinscott92: I'm sorry, i didn't really understand your question. It is possible to modify other elements on page after hovering over another, but via css only if it is a child of the hovered element. In other situations you have to use javascript, regardless of framework.

@haulin: Thanks for reply I got that solution from another forum. It something we could do by using the java script and jquery too.

Greetings again. I'm not sure if folks understand the gist of my question, so I'm trying a different approach.
Or perhaps it is I who is not understanding your answers.

I have created two simple files for people to see the effect that I am referring to.

Here is the older file: http://www.nondairycreamer.com/x_tes...ing_older.html
Here is the newer file: http://www.nondairycreamer.com/x_tes...ing_newer.html

In my "older" document, you will see an animated gif appear underneath the links when the mouse hovers over them – both for text links as well as for graphic links.

In my newer document, the hover effect works for the text links, but not for graphic links. Actually, I found that it does work for a GIF file that has transparency. And perhaps this means something.
Here is a link for that page: http://www.nondairycreamer.com/x_testing/index.html [Notice that I finally arrived in 2013 and eliminated the tables in favor of using CSS grid]

The only difference between the two files are the initial lines of document identification info at the top of the page.

The older file has this info:

<!DOCTYPE html
PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en-US">

<head profile="http://www.w3.org/2005/11/profile">

The newer file has this info:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

My Questions:

1. Can someone explain why this would affect the link behavior?
2. Can someone show me how I might be able to get the behavior to work in my newer file (without changing the document identification lines in the beginning ?!) :rolleyes:

Many thanks for considering this again.

Update:
I was able to work around the issue and get the effect with the other images by simply editing the images in Photoshop, adding some white pixels to the bottom of the image, saving the graphics as GIF files and specifying that white color as transparent.

However, I'm still curious if anyone can offer any info about why the doc type would effect this behavior ?

Thanks

XHTML requires adherence to XML specif9ications -- such as self-closing <br /> of "empty tags.

Code:

---

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
</head>

<body>
</body>
</html>

--------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
</head>

<body>
</body>
</html>

---

Wonder if that might affect the differences ??

Thanks for your input.

On another forum, someone came up an explanation and some CSS specs that did the trick.
See the link here:

http://forums.devshed.com/css-help-1...ns-939562.html

I have since changed the links for the example page, but you can see what I was talking about here:

HTML File: http://www.nondairycreamer.com/x_tes...ing_older.html

XHTML File: http://www.nondairycreamer.com/x_tes...ing_newer.html

Cheers.