15 replies [Last post]
cssFriend
Offline
newbie
Last seen: 17 years 32 weeks ago
Timezone: GMT-8
Joined: 2005-01-01
Posts: 4
Points: 0

Howdy, fellow CSS'ers! Geeky new year! Laughing out loud

Getting the gunk out of the way, I did try a number of searches in the forum, after a number of searches on the net in general. I also skimmed topic titles.
I've been an HTML'er since 1995, a PHP'er since 2003, and a trying-to-get-serious CSS'er for about half a year.

To the meat of my query: I'm trying to make graphic b appear overtop of graphic a when I hover over graphic a.

clickity: URL no longer needed with problem solved, thanks!

Mouse over the photo, and a li'l navbar at the bottom of said photo appears. In theory. Wink

My attempt to accomplish this involves very simple CSS-ness:

div#photo .navmenu {
    display: none;
}

div#photo:hover .navmenu {
    display: block;
	position: absolute;
}

. . . called by my PHP file:

<div id=\"photo\">

<img class=\"navmenu\" src=\"!data/misc/navmenu.gif\" width=\"525\" height=\"15\"alt=\"\" />

<img src=\"!data/img/_testfull-01.jpg\" width=\"700\" height=\"525\" alt=\"\" />

</div>

And, it seems to work . . . IN EVERY BROWSER I'VE TRIED EXCEPT FOR MSIE.

*huff* *huff*

Sorry.

So, um, any thoughts? Laughing out loud

My wife, who's a CSS princess to my CSS court jester, tells me that she's often had to find hacks to make certain elements of her CSS work in IE that work just fine in other browsers (in this case, Firefox 1.0, Opera 7.23, Netscape 7.2 — the MSIEs it's not working in are a 5.5 and a 6.Innocent.

Any thoughts and/or insight would be greatly appreciated!

Yours in geekiness . . .

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 31 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

[Solved!] CSS hover working everywhere 'cept IE??!?

Hm, very impressive use of font-sizes and color , must have taken ages.

Remove the xml prolog from the markup

The pseudo class :hover only works on anchors in IE.

There are workarounds.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

cssFriend
Offline
newbie
Last seen: 17 years 32 weeks ago
Timezone: GMT-8
Joined: 2005-01-01
Posts: 4
Points: 0

[Solved!] CSS hover working everywhere 'cept IE??!?

Hugo wrote:
Hm, very impressive use of font-sizes and color , must have taken ages.

Ah, yes. That. Laughing out loud Truth is, I'm very shallow, and like making purdy posts. Laughing out loud

Hugo wrote:
Remove the xml prolog from the markup

Okay, done, with no visible effect either way, tho' I'm still XHTML 1.0 Strict! Laughing out loud

Out of curiosity, what does removing this line do? Or not do?

Hugo wrote:
The pseudo class :hover only works on anchors in IE.

There are workarounds.

Ah, okay. Is the anchor thing one of those workarounds? I've tried this:

<div id=\"photo\">

<a class=\"navmenu\" href=\"javascript:void(0);\">

<img class=\"navmenu\" src=\"!data/misc/navmenu.gif\" width=\"525\" height=\"15\"alt=\"\" />

<img src=\"!data/img/_testfull-01.jpg\" width=\"700\" height=\"525\" alt=\"\" />

</a>

</div>

. . . and, well, my image goes away in all browsers. Sad I've totally misunderstood your advice, haven't I? :oops:

Thanks, Hugo!

Any other thoughts, ideas, specifics, or whatever, would be much appreciated from anyone!

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 31 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

[Solved!] CSS hover working everywhere 'cept IE??!?

cssFriend wrote:

Ah, yes. That. Laughing out loud Truth is, I'm very shallow, and like making purdy posts. Laughing out loud

Yes very pretty, but tends to make me not want to bother reading it Smile
and would be frowned upon in many forums.

cssfriend wrote:
Hugo wrote:
Remove the xml prolog from the markup

Okay, done, with no visible effect either way, tho' I'm still XHTML 1.0 Strict! Laughing out loud

Out of curiosity, what does removing this line do? Or not do?

It makes all the difference to IE as it throws it into 'Quirks Mode' and you really don't want that happening also it's not required for text/html

One workaround for the lack of hover support in IE is to use the csshover.htc file which uses MS proprietary 'behaviors and Jscript to target hover properties.
This page explains more
http://www.xs4all.nl/~peterned/csshover.html

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

cssFriend
Offline
newbie
Last seen: 17 years 32 weeks ago
Timezone: GMT-8
Joined: 2005-01-01
Posts: 4
Points: 0

[Solved!] CSS hover working everywhere 'cept IE??!?

Wahoo! That's the ticket, Hugo! Laughing out loud Thanks a THOUSAND!

Silly MSIE . . . :?

Now, all's I have left to do is find a way to push the graphic down exactly two pixels in MSIE only to line it up to the other browsers.

Oh, and try to work out why my 8px padding comes out as 8px on the top, right, and left, but . . .

    11px on the bottom in Firefox 11px on the bottom in Netscape
    10px on the bottom in MSIE
    perfectly 8px on the bottom in Opera
. . . and all will be right with my little corner of the world.

Much obliged . . .

[/]
gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 23 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

[Solved!] CSS hover working everywhere 'cept IE??!?

That's not padding. An image is an inline element. The default placement of an image is for the bottom edge of the image to be along the baseline of the default text. Below the baseline is room for descenders as seen on q, y, p, g, and j. There's your extra pixels.

There are two ways to move the image down a bit. One is to do img {vertical-align: bottom;}, and the other is to do img {display: block;}.

I'm not as tolerant as Hugo—chalk it up to age. That jacking with the fonts makes you look like an ignorant (stupid?) script kiddie or fugitive from a teeny-bopper chat room. Thankfully you didn't use all caps or 133t 5p3ak. *shudder* With any luck, you're merely ignorant of established protocols for technical forums, mail-lists and the usenet, which is curable, rather than stupid which is forever. Wink

An error is an opportunity for improvement. To capitalize on that opportunity, read How To Ask Questions The Smart Way by Eric S. Raymond . Here is an excerpt from the article;

    "In Web forums, do not abuse “smiley” and “html” features (when they are present). A smiley or two is usually OK, but colored fancy text tends to make people think you are lame. Seriously overusing smileys and color and fonts will make you come off like a giggly teenage girl, which is not generally a good idea unless you are more interested in sex than answers."
cheers,

gary

[/]

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 31 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

[Solved!] CSS hover working everywhere 'cept IE??!?

With age is supposed to come tolerance, or so I'm told, given my advancing years I suppose that I am just trying to display the calm benign attitude I'm meant to have. Sadly it's a struggle at times, I do hate going against my nature Smile
I just hope that my subtlety is not always wasted, although judging by the continued use of the wild and whacky fonts styling, it has in this case.
Thanks for making the point clearer KK5st.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 23 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

[Solved!] CSS hover working everywhere 'cept IE??!?

Actually, I was referring to my own advancing years. I find I've become more set in my ways and less tolerant of impoliteness, discourtesy, and lack of respect for others as applied against "when in Rome …" When in my neighbor's home I conduct myself in line with his house rules, and if I can't, I leave. I expect the same from him when he's in my house.

Robert Heinlein, through his characters, expressed many times the opinion that impoliteness ought to be a capital offense. I'm coming around to that. Smile

Otherwise, I'm mellowing with age. Why, I'm no longer to the right of Attila the Hun politically, though I still wonder about his pinko leanings.Wink

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 31 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

[Solved!] CSS hover working everywhere 'cept IE??!?

Quote:
Robert Heinlein, through his characters, expressed many times the opinion that impoliteness ought to be a capital offense. I'm coming around to that. Smile

Ah, if only it were, the absolute lack of manners / courtesy displayed towards others is becoming entrenched in my part of the world, does no one realise the significance and importance of these traits anymore ?

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Mælstrøm
Offline
Regular
Germany
Last seen: 15 years 16 weeks ago
Germany
Timezone: GMT-1
Joined: 2005-01-02
Posts: 46
Points: 0

No Wonder

in light of the part of world you're coming from Laughing out loud

But enough jokes, I favor (and even hae them imprinted into me) those same manners and virtues you're talking about, but over all your talking about manners you seem to forget the topic of the thread... another thing that is not courteous.

To use your own images: you could see this thread as his domain, and simply behave the way he does, writing in the same style, à la "When in rome..."

Wink

Back to topic:
If you want a "clean" workaround without behaviours and a htc file, use this snippet of js code and put it into the file called ie-fix.js, which should be growing larger by the second (IE: *sigh*):

startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
}
node.onmouseout=function() {
this.className=this.className.replace»
(" over", "");
}
}
}
}
}
window.onload=startList;

and use it with submenues created with the <ul> command; then you can use the code above on a ul menu with the class="nav"

and in css, you will have to use li.over AND li:hover (li:hover for any other contemporary browser, and li.over for IE using the js code...

if you want to read the entire article, have a look here:

http://www.alistapart.com/articles/horizdropdowns/

They present horizontal AND vertical versions, just do a quick search if you want a look at the other version Wink

- How many Sith does it take to screw in a light bulb?
- Only two a master, and an apprentice!

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 31 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

[Solved!] CSS hover working everywhere 'cept IE??!?

Mælstrøm,
Check your PM's for a little advise on Newbie behavior please.

Hugo

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

cssFriend
Offline
newbie
Last seen: 17 years 32 weeks ago
Timezone: GMT-8
Joined: 2005-01-01
Posts: 4
Points: 0

[Solved!] CSS hover working everywhere 'cept IE??!?

Hoo! Good crikey, folks!

*said with head-shaking, amused, chuckling disbelief, yet describing so with plain text, lest the thread be further "poisoned" with the evil smilies*

If my 32-year-old enthusiasm for life carries through in my writing and thoroughness, I'd certainly rather have it that way than to waste the time wallowing in bitterness about others' joviality.

Though I may be alone in this, I find no sin in appreciating the features provided on a board. For instance, I've found the SpellCheck works like a dang!

While opinions about my posts' flavor were noted without comment before, it sadly risks overtaking this thread as its focus.

Thus, I revert to the plainest of the plain, mark the topic solved and leave a mental Post-It™ note here with a jovial, hand-written, "Lighten up!"

For the actual answers to my quandaries, I'm most indebted, and will follow up on each of these new suggestions from kk5st and especially Mælstrøm. I'm sincerely grateful for the help I've received. That is, after all, why these community-based boards are here.

Good day and thanks to all, and for those offended by it, please prepare to shield your eyes from the sig . . .

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 23 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

[Solved!] CSS hover working everywhere 'cept IE??!?

cssFriend: The purpose of the comments about the flamboyant use of sizes and colors was not to be the Grinch that stole your Christmas. It was to introduce you to the expected behavior on a forum of this type. It is no knock on social forums or chat rooms. It is only to point out the differences. The problem you may face is that if you bring cutesy looks to a technical forum, it could be difficult for you to be taken seriously. Many will bypass your posts because just as real men don't eat quiche Wink, real coders don't look like script kiddies.

Judging from the comments in your last post, I don't know if you haven't read the ref'd article or haven't given it the appropriate weight. You should be aware that this article is respected among the programming and network communities on nearly the same level as an IP RFC.

Mælstrøm: Diversions from the OP topic are not out of line, especially when related to the posts themselves. As for the thread being the house, the thread is the visitor—the forum is the house.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Mælstrøm
Offline
Regular
Germany
Last seen: 15 years 16 weeks ago
Germany
Timezone: GMT-1
Joined: 2005-01-02
Posts: 46
Points: 0

Wow!

cssFriend:
You're a man to my liking! I feel the same way, although I am only 30 Wink Greetz!! Smile

Gary:
thanks for the correction. Sorry about any confusion! I never figured diverting to be an issue, since I like doing that as well Smile It just felt as though you two were beginning to talk about the error of his ways without addressing him any more. But I surely wasn't trying to pick a fight. Cheers Smile

Hugo:
See now, KK5's comment sounded much nicer than your PM!

- How many Sith does it take to screw in a light bulb?
- Only two a master, and an apprentice!

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 31 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

[Solved!] CSS hover working everywhere 'cept IE??!?

My PM wasn't intended to be 'Nice' it was a point of order
and once again reading your last comment directed against me I re-iterate the sentiments expressed in the PM please do not patronize me until you have spent a little time on the forum and earned the right.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

roytheboy
roytheboy's picture
Offline
Guru
North Wales, UK
Last seen: 9 years 2 weeks ago
North Wales, UK
Timezone: GMT+1
Joined: 2004-09-18
Posts: 2233
Points: 41

[Solved!] CSS hover working everywhere 'cept IE??!?

Happy New Year everyone Laughing out loud ( Wink )

Life's a b*tch and then you die!