Archief - :hover in IE

Het archief is een bevroren moment uit een vorige versie van dit forum, met andere regels en andere bazen. Deze posts weerspiegelen op geen enkele manier onze huidige ideeën, waarden of wereldbeelden en zijn op sommige plaatsen gecensureerd wegens ontoelaatbaar. Veel zijn in een andere tijdsgeest gemaakt, al dan niet ironisch - zoals in het ironische subforum Off-Topic - en zouden op dit moment niet meer gepost (mogen) worden. Toch bieden we dit archief nog graag aan als informatiedatabank en naslagwerk. Lees er hier meer over of start een gesprek met anderen.
E

Enigma²

Legacy Member
ik heb een menu in tabelvorm, met submenu voor 1 item dat door volgend script wordt gestuurd :

Code: 
<script>

function expand(s, m)
{
   var browser = window.navigator.appName;
   var dif = 0;
   if (browser != "Microsoft Internet Explorer") { dif = 12; }

   var d = document.getElementById(m);
   var td = document.getElementById(s);
   var left = td.offsetLeft;
   var top = td.offsetTop + 25;
   var width = td.offsetWidth - dif;

   td.style.color = "black";
   td.style.backgroundColor = "#EEEEEE";

   d.style.top = top;
   d.style.left = left;
   d.style.width = width;
   d.style.position = "absolute";
   d.style.visibility = "visible";
   d.style.display = "block";
}

function collapse(s, m)
{
   var d = document.getElementById(m);
   var td = document.getElementById(s);

   td.style.color = "white";
   td.style.backgroundColor = "white";

   d.style.position = "static";
   d.style.visibility = "hidden";
   d.style.display = "none";
}

function collapseAll()
{
   var menuDiv = document.getElementById("menu");
   var divs = menuDiv.getElementsByTagName("div");
   var div;

   for (i = 0; i < divs.length; i++)
   {
      div = divs[i];
      div.style.visibility = "hidden";
      div.style.display = "none";
   }
}
</script>

het menu ziet er als volgt uit :

Code: 
<div id="menu" onmouseout="javascript:collapseAll();">
<table class="menu2" border="0" id="navBar" width="100%">
<tr>
<td><a href="x.htm">x</a></td>
<td><a href="y.htm">y</a></td>
<td class="button" width="20%" valign="top" id="item3" onmouseover="expand(this.id, 'menu3');" onmouseout="collapse(this.id, 'menu3');">
<a href="z.htm"><p>z</p></a>
<div id="menu3" class="exp" onmouseout="collapse('item3', this.id);">
<p class="button"><a href="a.htm" class="menuitem">A</a></p>
<p class="button"><a href="b.htm" class="menuitem">B</a></p>
</div></td>
<td><a href="u.htm">u</a></td>
<td><a href="v.htm">v</a></td>
<td><a href="w.htm">w</a></td>
</tr></table></div>

mijn css ziet er als volgt uit

Code: 
.menu2 td:hover {color:#FFFFFF;background-color:#9b6f41;}
a {color:#9b6f41;text-decoration: none;}

.menu2{position : absolute;top:174px;left:64px;width:565px;font-size:11pt;text-align:center;}
.menu2 td:hover a{color:white;}


P
{padding-top: 0px;
margin: 0;}

td.button
{
color: black ;
background: white ;
border: 0px solid #CCCCCC;
margin: 0px;
padding: 0px;
}

div.exp
{
padding-bottom: 0px;
padding-left: 0px;
padding-right: 0px;
font-weight: bold;
background-color = #FFFFFF;
border = 1px solid #FFFFFF;
margin-top:0px;
margin-left:0px;
}

p.button
{
color: #9b6f41 ;
background: #ebe2d9 ;
border: 1px solid #CCCCCC;
margin: 0px;
padding: 0px;
display: block ;
}

a.menuitem:link
{
text-decoration: none ;
color: #9b6f41; ;
background: #ebe2d9 ;
display: block ;
}

a.menuitem:visited
{
text-decoration: none ;
color: #9b6f41; ;
background: #ebe2d9 ;
display: block ;
}

a.menuitem:hover
{
text-decoration: none ;
color: #FFFFFF ;
background: #9b6f41 ;
display: block ;
}

a.menuitem:active
{
text-decoration: none ;
color: #FFFFFF ;
background: #9b6f41 ;
display: block ;
}

in IE7 werkt dit perfect, maar in langere versies van IE werkt de hover niet en verdwijnt het submenu als je let je muis van het eerste naar het tweede submenu probeert te gaan

hoe los ik deze 2 problemen op ?
R

RpR

Legacy Member
IE6 ondersteunde geen hover op bepaalde element maar was op te lossen met javascript onmouseover
E

Enigma²

Legacy Member
RpR zei:
IE6 ondersteunde geen hover op bepaalde element maar was op te lossen met javascript onmouseover
Klik om te vergroten...

ja klopt, maar op de knoppen waar een submenu is, is dat niet van toepassing.De javascript voor het submenu zorgt ook voor een hover-effect, maar dan alleen voor de achtergrond.De tekstkleur blijft hetzelfde (wellicht omdat ik in de css een kleur aan a{} heb gegeven;Anders was dit het gekende blauw). Dus hoe kan ik dit oplossen door mijn huidige javascript aan te passen?
B

Bram

Legacy Member
Probeer eens suckerfish dropdowns ofzo (google it), die werken overal... Of anders mss gebruik maken van een lightweight JS framework dat dit soort bugs beter opvangt?
E

Enigma²

Legacy Member
SveltestSword zei:
Probeer eens suckerfish dropdowns ofzo (google it), die werken overal... Of anders mss gebruik maken van een lightweight JS framework dat dit soort bugs beter opvangt?
Klik om te vergroten...

dat heb ik opgezocht en zoals gezegd kleurt enkel de achtergrond en verdwijnt het submenu als ge van de eerste cel naar een andere gaat. Kan je geen fout in mijn code vinden?
E

Enigma²

Legacy Member
ik heb het menu nu opnieuw gemaakt, maar dan met ul/li ipv tabellen. Het blijkt nu te werken, met een of andere JS erbij.

Een stomme vraag mss, maar hoe kan ik de (horizontale) lijst een totale breedte meegeven, waarbij de lijst elementen hun breedte bepaald worden door de lengte van de letters en dus niet noodzakelijk allemaal gelijk zijn
E

Enigma²

Legacy Member
Enigma² zei:
ik heb het menu nu opnieuw gemaakt, maar dan met ul/li ipv tabellen. Het blijkt nu te werken, met een of andere JS erbij.

Een stomme vraag mss, maar hoe kan ik de (horizontale) lijst een totale breedte meegeven, waarbij de lijst elementen hun breedte bepaald worden door de lengte van de letters en dus niet noodzakelijk allemaal gelijk zijn
Klik om te vergroten...

niemand die een antwoord weet?
als je de vergelijking maakt met tabellen: daar is de breedte van elke cel afhankelijk van de letters die erin staan en niet van de totale breedte.Bij een lijst heeft elk element dezelfde lengte
E

Enigma²

Legacy Member
hieronder staat mijn css voor het menu.In IE6 werkt de hover bij het submenu wél, maar bij het vaste menu niet (de background alleszinds niet). Waar zit de fout dan ergens, want dit is toch zeer vreemd.De tekstkleur kan ik wel laten hoveren,maar de achtergrond lukt niet.Ook de submenu's werken perfect in IE ouder dan de 7.

Code: 
#nav {position : absolute;
		 	top:178px;
			left:67px;
			font-size:11pt;
			text-align:center;
			width:700px;
}

#nav a {
	font-weight: ;
	color: #9b6f41;

}

#nav li li a {
	display: block;
	font-weight: normal;
	color: #9b6f41;
	padding: ;
}

#nav li a {
	display: block;
	font-weight: normal;
	color: #9b6f41;
	padding: ;
}

#nav li a:hover {
	padding:0px ;
	border:0px ;
	border-width:0px ;
	background-color:#9b6f41;
	color:white;
}

#nav li li a:hover {
	padding:0px ;
	border:0px ;
	border-width:0px ;
	background-color:#9b6f41;
	color:white;
}

li {
	float: left;
	position: relative;
	text-align: center;
	cursor: default;
	background-color: white;
	color:#9b6f41;
	border: ;
	border-width:;
}

li ul {
	display: none;
	position: absolute;
	top: 100%;
	left:0px ;

	font-weight: normal;
	background: white;
	padding: ;
	border-right: ;
}

li>ul {
	top: auto;
	left: 0px;
}

li li {
	display: block;
	float: none;
	background-color: transparent;
	border: 0;
}

li:hover ul, li.over ul {
	display: block;
}

li#normaal{width:105px;}
li#normaal li{width:105px;}
li#normaal a:hover{background-color:#9b6f41;}
li#normaal li a:hover{background-color:#9b6f41;}
li#groter{width:150px;}
li#groter li{width:150px;}
li#groter a:hover{background-color:#9b6f41;}
li#groter li a:hover{background-color:#9b6f41;}
n

n00bslayer

Legacy Member
Je hebt volgens mij een probleem met de overerving in je css. De laatste selectors wegen niet zoveel door als jouw eerste declaraties. waardoor je background niet overschreven wordt zoals je wil. li#id < #id li. Zie uitleg.

Kopieer eens de code van deze pagina, en bewerk ze tot je het menu helemaal naar je zin hebt. Je zal het hier volgens mij veel gemakkelijker mee hebben om op door te werken.

En een online voorbeeldje is nog zo gemakkelijk eigenlijk. ;)
Het archief is een bevroren moment uit een vorige versie van dit forum, met andere regels en andere bazen. Deze posts weerspiegelen op geen enkele manier onze huidige ideeën, waarden of wereldbeelden en zijn op sommige plaatsen gecensureerd wegens ontoelaatbaar. Veel zijn in een andere tijdsgeest gemaakt, al dan niet ironisch - zoals in het ironische subforum Off-Topic - en zouden op dit moment niet meer gepost (mogen) worden. Toch bieden we dit archief nog graag aan als informatiedatabank en naslagwerk. Lees er hier meer over of start een gesprek met anderen.
Terug
Bovenaan