:strip_icc():strip_exif()/u/100559/avatar_cloud_klein.jpg?f=community){kind=avatar}
Ik heb weer eens wat ruzie met IE...
Het gaat om het volgende:
Ik heb een eenvoudig menu in een lijst staan:
met de volgende css:
Nu zijn er 2 problemen eigenlijk. Ten eerste zijn deze png bestanden transparant... Hier is al heel veel over gezeurd, maar voor oplossingen bij background-image in css heb ik nog niet veel gezien. Helaas niets werkends.
Dit zou op te lossen zijn door de plaatjes gewoon in de <li> tags te zetten en dan werkt de normale png fix behavior die ik kan gebruiken gewoon.
Daarmee komen we bij een nieuw probleem. De hover werkt uiteraard niet op de li in IE. Hier is vast wel een of andere behavior voor te vinden of desnoods te maken.
Verder wil IE die hover alleen maar pakken als je echt over de tekst heengaat met je muis en niet zoals in FF als je gewoon over een willekeurig stuk van de <a> tag gaat met je muis.
Is hier misschien een "trucje" voor om dat voor elkaar te krijgen in IE?
Het eenvoudigste zou zijn om de plaatjes in de li te stoppen met een hover behavior, dan zal het probleem in IE dat ie alleen de echte tekst pakt voor de hover en niet de padding of ruimte boven of onder de tekst ook al voor een groot deel opgelost zijn. (in die padding komen immers de plaatjes en die zullen dan wel meedoen in de hover)
Ook zou ik natuurlijk gewoon javascript functies aan de plaatjes kunnen hangen voor onmouseover en onmouseout, wat waarschijnlijk ook door die behaviors wordt gedaan, als ik ze in die li's zet.
Dan heb je helemaal geen hover meer nodig. Nu blijft wel het 2e probleem bestaan dat die onmouseover ook alleen maar getriggered zal worden als je echt over de content gaat en niet over lege stukken. Buiten dit vind ik het gewoon niet mooi om al die javascript functies daarvoor te moeten gebruiken.
Nou ben ik natuurlijk veeleisend en moeilijk en ik wil zo min mogelijk vage behaviors gebruiken.
Wie heeft er een idee hoe ik 1 van deze (of beide) problemen het beste aan kan pakken?
Uiteraard kan ik altijd terugvallen op een naar mijn idee lelijkere oplossing, maar misschien kan het ook zoals ik wil
Het gaat om het volgende:
Ik heb een eenvoudig menu in een lijst staan:
code:
1
2
3
4
5
6
7
8
9
| <div id="global_nav">
<ul id="global_menu">
<li><a id="menu_1" href="#">MENU 1</a></li>
<li><a id="menu_2" href="#">MENU 2</a></li>
<li><a id="menu_3" href="#">MENU 3</a></li>
<li><a id="menu_4" href="#">MENU 4</a></li>
<li><a id="menu_5" href="#">MENU 5</a></li>
</ul>
</div> |
met de volgende css:
code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
| #global_menu {
list-style-type: none;
font-family: Helvetica, Verdana, Arial;
font-size: 16px;
font-weight: bold;
width: 100%;
}
#global_menu li {
display: block;
float: left;
margin-left: 8px;
margin-right: 8px;
}
#global_menu li a {
display: block;
background-position: left;
background-repeat: no-repeat;
padding-left: 45px;
line-height: 42px;
color: #000000;
text-decoration: none;
border: 1px solid red;
}
#menu_1 {
background-image: url(../images/button_1.png);
}
#menu_1:hover {
background-image: url(../images/button_1_over.png);
}
#menu_2 {
background-image: url(../images/button_2.png);
}
#menu_2:hover {
background-image: url(../images/button_2_over.png);
}
#menu_3 {
background-image: url(../images/button_3.png);
}
#menu_3:hover {
background-image: url(../images/button_3_over.png);
}
#menu_4 {
background-image: url(../images/button_4.png);
}
#menu_4:hover {
background-image: url(../images/button_4_over.png);
}
#menu_5 {
background-image: url(../images/button_5.png);
}
#menu_5:hover {
background-image: url(../images/button_5_over.png);
} |
Nu zijn er 2 problemen eigenlijk. Ten eerste zijn deze png bestanden transparant... Hier is al heel veel over gezeurd, maar voor oplossingen bij background-image in css heb ik nog niet veel gezien. Helaas niets werkends.
Dit zou op te lossen zijn door de plaatjes gewoon in de <li> tags te zetten en dan werkt de normale png fix behavior die ik kan gebruiken gewoon.
Daarmee komen we bij een nieuw probleem. De hover werkt uiteraard niet op de li in IE. Hier is vast wel een of andere behavior voor te vinden of desnoods te maken.
Verder wil IE die hover alleen maar pakken als je echt over de tekst heengaat met je muis en niet zoals in FF als je gewoon over een willekeurig stuk van de <a> tag gaat met je muis.
Is hier misschien een "trucje" voor om dat voor elkaar te krijgen in IE?
Het eenvoudigste zou zijn om de plaatjes in de li te stoppen met een hover behavior, dan zal het probleem in IE dat ie alleen de echte tekst pakt voor de hover en niet de padding of ruimte boven of onder de tekst ook al voor een groot deel opgelost zijn. (in die padding komen immers de plaatjes en die zullen dan wel meedoen in de hover)
Ook zou ik natuurlijk gewoon javascript functies aan de plaatjes kunnen hangen voor onmouseover en onmouseout, wat waarschijnlijk ook door die behaviors wordt gedaan, als ik ze in die li's zet.
Dan heb je helemaal geen hover meer nodig. Nu blijft wel het 2e probleem bestaan dat die onmouseover ook alleen maar getriggered zal worden als je echt over de content gaat en niet over lege stukken. Buiten dit vind ik het gewoon niet mooi om al die javascript functies daarvoor te moeten gebruiken.
Nou ben ik natuurlijk veeleisend en moeilijk en ik wil zo min mogelijk vage behaviors gebruiken.
Wie heeft er een idee hoe ik 1 van deze (of beide) problemen het beste aan kan pakken?
Uiteraard kan ik altijd terugvallen op een naar mijn idee lelijkere oplossing, maar misschien kan het ook zoals ik wil
:strip_icc():strip_exif()/u/43400/avatar.jpeg?f=community){kind=avatar}
Ik zie niet in waarom dat alleen met PNG's zou kunnen. Kwestie van je GIF's "slim" snijden:
en mouseover: 
Op die site heb je al gif's 
Maar je snapt mijn idee wel 