Hi guys,
I'm making a dutch site on pc problems, software, tips and tricks for windows...
But... I have a problem with my css, or more correct... with Internet Explorer!
First problem was Internet Explorer only allowing pseudoclasses on a-elements.
If you want a new layer with some text to appear when hovering a certain element, that element can only be an a-element.
I have to say in my case that wasn't really a problem, because I wanted a box with some text to appear when hovering a menu item.
http://www.software.frihost.net/home.htm
As you can see on this page, the top menu has got 4 links. When you hover a link, a box appears, with some extra information. I made this by putting a span-element into an a-element, then defining the position of the span-element, and then hiding the element on :link, :visited.
You get this css:
Putting the span somewhere else on the page:
| Code: |
a.menulink span {
position: absolute;
left: 250px;
top: 70px;
width: 500px;
height: 110px;
background: white;
padding: 5px 5px 5px 5px;
border: 1px red solid;
text-align: left;
float: left;
}
|
Defining when the span should be visible:
| Code: |
a:link span {
display: none;
}
a:visited span {
display: none;
}
a:hover span {
display: block;
}
a:active span {
display: block;
}
|
But the span doesn't disappear again when you move your cursor away from the link.
In short: In Internet Explorer the :hover status doesn't change back to the :link status when moving your cursor away from the link.
I hope you understood something of my best English and you can help me out here.
James 
| Code: |
a:link span {
display: none;
}
a:visited span {
display: none;
}
a:hover span {
display: block;
}
a:active span {
display: none;
} |
Maybe that would work?#1: Span elements are a generic inline element, not a generic block-level element. Use "inline" instead of "block".
#2: IE and the hover pseudo-class on the children of A nodes is glitchy, use JavaScript instead to serve-up IE.
Marston, I tried but it didn't work... 
Aredon, I changed the block-values into inline-values. It didn't had a negative effect on my page, so I'll leave it that way.
Someone noticed a strange thing. If you remove position: absolute; from a.menulink span {, the layout gets messed up, but IT WORKS...
So I just have to figure out a way, to keep the position: absolute; in my css, because I need it to get the span away from my top menu, but keeping the effect of position: absolute; not being in my css...
I tried by putting the position: absolute; only in a.menulink:hover span and a.menulink:active span but that didn't work either...
As I'm not familiar to javascript, can someone help me on that? I just wanted to keep it out of my site because those big chunks of javascript code cannot be edited easily and you have to put things in the head-section of your page and stuff...
Help me... 
| James007 wrote: |
Marston, I tried but it didn't work...
Aredon, I changed the block-values into inline-values. It didn't had a negative effect on my page, so I'll leave it that way.
Someone noticed a strange thing. If you remove position: absolute; from a.menulink span {, the layout gets messed up, but IT WORKS...
So I just have to figure out a way, to keep the position: absolute; in my css, because I need it to get the span away from my top menu, but keeping the effect of position: absolute; not being in my css...
I tried by putting the position: absolute; only in a.menulink:hover span and a.menulink:active span but that didn't work either...
As I'm not familiar to javascript, can someone help me on that? I just wanted to keep it out of my site because those big chunks of javascript code cannot be edited easily and you have to put things in the head-section of your page and stuff...
Help me... |
Try using position: relative;
Who knowsIf I use position: relative; Things don't disappear either... the next info block just appears NEXT TO the previous info block... I guess Internet Explorer just isn't capable of css hovers if the appearing and disappearing element is visually outside of the link.
Last edited by Stubru Freak on Sun Apr 02, 2006 2:47 pm; edited 2 times in total
Probably, but that doesn't solve my problem... I need something like a .htc file or a javascript code... I think...
Give the span an id value, and add to each link:
| Code: |
| onmouseover = "showElement('theID');" onmouseout = "hideElement('theID');" |
Where you replace theID by the id of the span you want to show up.
Then add these javascript functions:
| Code: |
function showElement(id){
document.getElementById(id).style.display = "block";
}
function hideElement(id){
document.getElementById(id).style.display = "none";
}
|
Didn't test it let me know if it doesn't work.
Edit: I changed my mind and chose for block, as that seems to better fit what you are making, even though span isn't a block-level element by nature, you are transforming it to one here in my opinion.
If possible it would be better to use div instead of span anyway.
But I think the only real solution to this would be to just stop giving Internet Explorer it's own piece of code on every website on the net so people will face it: Internet Explorer isn't capable of rendering websites. The second quote should be in the head-section? (I don't know a thing of Javascript)
| James007 wrote: |
| The second quote should be in the head-section? (I don't know a thing of Javascript) |
Yes, it has to be in the head-section or in a seperated, linked file.You could also place it in the body as long as it's before the code of your spans.
well... should there be a script-tag around it, because now there isn't and it just shows it in my page...?
James Yes
| Code: |
<script type="text/javascript">
<!--
function showElement(id){
document.getElementById(id).style.display = "block";
}
function hideElement(id){
document.getElementById(id).style.display = "none";
}
//-->
</script> |
Now it's messed up in both browsers... Could you show it? It's probably a mistake in the javascript.
Wait! It does work!!
You're my herooooo !!!!! 
http://www.software.frihost.net/home-javascr.htm
One more problem....
I have a little moving gif, that only needs to show up when clicking on the menu-item. So use this:
For all the img with class="clear" (just a name) in a span element, the img should only be visible when actually clicking the link.
| Code: |
a:link img.clear {
display: none;
}
a:visited img.clear {
display: none;
}
a:hover img.clear {
display: none;
}
a:active img.clear {
display: block;
}
|
But in IE.... the Gif isn't at the same place as it is in Firefox, It doesn't show when you click the link, but if you have clicked the link, it shows when you hover.... omg
James [/code] Add this to the links code:
| Code: |
| onmousedown = "showElement('clear');" onmouseup = "hideElement('clear');" |
And change
| Code: |
| onmouseout = "hideElement('theID');" |
to
| Code: |
| onmouseout = "hideElement('theID');hideElement('clear');" |
This makes it display when it has to, but I can't find why it is displayed at the wrong location. http://www.software.frihost.net/home-javascr.htm#
Well, If you have FireFox you see how it should work... when you click, the image should be visible... when you don't click any more, it should be gone... and I think you defined that right in your javascript code, but it doesn't really work... or maybe I've made a mistake...
Check please! (Thank you VERY MUCH already) | James007 wrote: |
http://www.software.frihost.net/home-javascr.htm#
Well, If you have FireFox you see how it should work... when you click, the image should be visible... when you don't click any more, it should be gone... and I think you defined that right in your javascript code, but it doesn't really work... or maybe I've made a mistake...
Check please! (Thank you VERY MUCH already) |
You should give every image a seperate ID and and change 'clear' to for example 'clear1', 'clear2', and so on.http://www.software.frihost.net/home.htm
I just left the image out, it didn't work at all... but tnx for the javascript!!!!
Topic solved!
James007 
These CSS look awesome. I am a noobie and would love suggestions of where or what I need to do to learn more about how to do it.
