Howdy, fellow CSS'ers! Geeky new year!
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.
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?
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..
Any thoughts and/or insight would be greatly appreciated!
Yours in geekiness . . .
[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.
[Solved!] CSS hover working everywhere 'cept IE??!?
Hm, very impressive use of font-sizes and color , must have taken ages.
Ah, yes. That.


Remove the xml prolog from the markup
Okay, done, with no visible effect either way, tho' I'm still XHTML 1.0 Strict!

Out of curiosity, what does removing this line do? Or not do?
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.

Thanks, Hugo!
Any other thoughts, ideas, specifics, or whatever, would be much appreciated from anyone!
[Solved!] CSS hover working everywhere 'cept IE??!?
Ah, yes. That.Truth is, I'm very shallow, and like making purdy posts.
Yes very pretty, but tends to make me not want to bother reading it

and would be frowned upon in many forums.
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!![]()
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.
[Solved!] CSS hover working everywhere 'cept IE??!?
Wahoo! That's the ticket, Hugo! 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
Much obliged . . .
[/][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.
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."
gary[/]
[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
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.
[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.
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.
cheers,
gary
[Solved!] CSS hover working everywhere 'cept IE??!?
Robert Heinlein, through his characters, expressed many times the opinion that impoliteness ought to be a capital offense. I'm coming around to that.
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.
No Wonder
in light of the part of world you're coming from
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..."
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
[Solved!] CSS hover working everywhere 'cept IE??!?
Mælstrøm,
Check your PM's for a little advise on Newbie behavior please.
Hugo
[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 . . .
[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 , 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
Wow!
cssFriend:
You're a man to my liking! I feel the same way, although I am only 30 Greetz!!
Gary:
thanks for the correction. Sorry about any confusion! I never figured diverting to be an issue, since I like doing that as well 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
Hugo:
See now, KK5's comment sounded much nicer than your PM!
[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.
[Solved!] CSS hover working everywhere 'cept IE??!?
Happy New Year everyone (
)