z-index funkar inte i Internet Explorer

Ja, det borde gå, du få nog bidrar med kod för att få reda på var du gör felen. du kan ha en overflow som ställer till det för dig, du har kanske en position som du inte sätter ett z-index på, du har kanske inte en validerad HTML kod osv. Det omöjligt att säga vad du gör för fel.

Bara en stilla undran. Du sitter väl inte med IE6 och testar?

Nej, det är IE8. Men jag fick det att funka nu.

Jag har en annan fråga ang. jQuery. Jag vill ju göra så som det är på https://www.bygghemma.se. Min jQuery kod ser ut såhär:

$(function() {
  $('#main_nav a').mouseover(function() {
	$('.embedded_shopwindow').css('display','block');
  });
  $('.embedded_shopwindow').mouseout(function() {
	$(this).css('display','none');
  });
});

Nu blir de så att div:en försvinner så fort man tar muspekaren från länken i #main_nav. Och jag vill ju att den ska försvinna då man för muspekaren bort från länken och div:en, som det är på bygghemma. Hur gör jag det?

Var har du dina element? Lägg mouseover på föräldern istället för à-elementet och förmodligen få dy bygga om HTML strukturen

Här e html koden för menyn:

<td class="twstop"><div class="object_vertical object_customcontent"><div style="padding: 0px 0px 0px 5px;" class="customcontent"><div id="main_nav">
  <ul>
    <li class="main_nav_link1"><a href="#" class="selected">HEM</a></li>
    <li class="main_nav_link2"><a class="twstop" href="#">LÄNK 1</a></li>
    <li class="main_nav_link3"><a class="twstop" href="#">LÄNK 2</a></li>
    <li class="main_nav_link4"><a class="twstop" href="#">LÄNK 3</a></li>
    <li class="main_nav_link5"><a class="twstop" href="#">LÄNK 4</a></li>
  </ul>
</div></div></div></td>

sen ligger .embedded_shopwindow i en annan td-cell. Spelar det någon roll?

Jag skall ju ha en .embedded_shopwindow för varje länk. Så om man för muspekaren över länk 1 så skall .embedded_shopwindow 1 visas. När jag sedan lämnar .embedded_shopwindow och länk 1 så skall den .embedded_shopwindow försvinna. Behöver jag bygga om koden då? Dom behöver väl inte ligga under samma förälder?

ramo_and skrev:

Jag skall ju ha en .embedded_shopwindow för varje länk. Så om man för muspekaren över länk 1 så skall .embedded_shopwindow 1 visas. När jag sedan lämnar .embedded_shopwindow och länk 1 så skall den .embedded_shopwindow försvinna. Behöver jag bygga om koden då? Dom behöver väl inte ligga under samma förälder?

Du behöver ju inte, men det bli tio gånger lättare, annars få du blanda in en timeout för att du skall visa menyn i x antal ms innan den försvinner, triggar en ny mouseover på sub-menyn osv... så nej du behöver inte men det bli sjukt mycket mer kod.

Ok dom ligger ju i samma förälder, samma tabell. Funkar det eller måste dom ligger efter varandra i ett element? Nu ligger de ju i varsin td.

ramo_and skrev:

Ok dom ligger ju i samma förälder, samma tabell. Funkar det eller måste dom ligger efter varandra i ett element? Nu ligger de ju i varsin td.

Förmodligen. testar, annars är det bara att ändra din CSS+JS.

ok, men jag förstår inte riktigt hur js-koden skall vara.. För om man är på länk 1 och sen går till länk 2 så ska ju .embedded_shopwindow för länk 1 försvinna och embedded_shopwindow för länk 2 visas..

Du har mouseover på föräldern och visar barn-menyn bara:

$('.embedded_shopwindow', this)

inne i din parent-mouseover kod, då hittar den .embedded_showwindow specifikt barnet .embedded_shopwindow i sig själv.

Hemskt ledsen men jag förstår inte riktigt.. hur jag än gör så försvinner .embedded_shopwindow så får muspekaren lämnar a-elementet..

hur skall jag göra för att få samma effekt som på bygghemma? krävs det mycket kod?

ramo_and skrev:

Hemskt ledsen men jag förstår inte riktigt.. hur jag än gör så försvinner .embedded_shopwindow så får muspekaren lämnar a-elementet..

hur skall jag göra för att få samma effekt som på bygghemma? krävs det mycket kod?

Kolla deras källkod?

Vad har du för HTML, CSS på din sida? Hur ser din JS kod ut just nu? Riktigt svårt att se vad din kod felar om du inte bidrar med relevant kod, du verkar binda mouseover fortfarande på a-elementet, vilket jag bad dig inte att göra.

Hittade detta i källkoden:

$(".liSiteNavi").each(function(){var a=$(this).attr("id");$(this).hovering({container:"#megaMenu_"+a,triggers:".megaMenuOuter",showdelay:200,hidedelay:400})})}};
}

Försökte göra om det så att de skulle passa min sida:

$("#main_nav li").each(function(){
	var a=$(this).attr("id");$(this).hovering({
		container:"#topField"+a,triggers:".embedded_shopwindow",showdelay:200,hidedelay:400})
	});
});

Men de funkar inte alls. Sidan kommer inte ens upp nu.

Så här såg min js-kod ut förut:

$(".embedded_shopwindow").each(function(index){
	$(this).addClass("eq-"+index);
});

$(function() {
  $('#main_nav .main_nav_link2 a').mouseover(function() {
	$('#topField .eq-0').css('display','block');
  });
  $('#main_nav .main_nav_link3 a').mouseover(function() {
	$('#topField .eq-1').css('display','block');
  });
  $('#main_nav .main_nav_link3 a').mouseover(function() {
	$('#topField .eq-2').css('display','block');
  });
  $('#main_nav .main_nav_link4 a').mouseover(function() {
	$('#topField .eq-3').css('display','block');
  });
  
  $('#topField .eq-0').mouseout(function() {
	$('this').css('display','none');
  });
  $('#main_nav .main_nav_link3 a').mouseut(function() {
	$('#topField .eq-1, this').css('display','none');
  });
  $('#main_nav .main_nav_link3 a').mouseout(function() {
	$('#topField .eq-2, this').css('display','none');
  });
  $('#main_nav .main_nav_link4 a').mouseut(function() {
	$('#topField .eq-3, this').css('display','none');
  });

});

jag har fyra länkar och då fyra .embedded_shopwindow där jag lägger till en klass på varje för att kunna särskilja dem (kan inte ändra htmlkoden själv utan får göra det med js).

alla .embedded_shopwindow har display: none o är absolut positionerade.

här e min html struktur:

<td id="topField">
<table>
<tr>
<td class="topnavcell">
  <!--Sökfält-->
</td>
<td class="twstop">
  <div class="object_vertical object_customcontent">
    <div class="customcontent">
      <div id="main_nav">
	    <ul>
		  <li class="main_nav_link1"><a class="selected" href="startsidan">HEM</a></li>
		  <li class="main_nav_link2"><a id="B00" href="#">LÄNK 1</a></li>
		  <li class="main_nav_link3"><a id="B01" href="#">LÄNK 2</a></li>
		  <li class="main_nav_link4"><a id="B02" href="#">LÄNK 3</a></li>
		  <li class="main_nav_link5"><a id="B03" href="#">LÄNK 4</a></li>
		</ul>
	  </div>
	</div>
  </div>
</td>
<td class="topnavcell">
  <div class="object_horizontal object_shopwindow">
    <div id="main_menu_B00" class="embedded_shopwindow">
	  <!-- Innehåll meny 1 -->
	</div>
  </div>
</td>
<td class="topnavcell">
  <div class="object_horizontal object_shopwindow">
	<div id="main_menu_B01" class="embedded_shopwindow">
	  <!-- Innehåll meny 2 -->
	</div>
  </div>
</td>
</tr>
</table>
</td>

Vad får man ändra i den HTML strukturen? tabeller är så extremt fel att använda dig av. Sen så är fortfarande dina .embedded_shopwindow helt fristående, vilket ger dig så mycket extra jobb, mer jobb än vad det är värt att lägga ner.

Alltså, egentligen kan jag göra menyn med helt egen html men då kan inte innehållet importeras automatiskt och det hade vart väldigt bra att göra det... Ja vet att tabeller är helt fel men den plattformen vi har bygger tyvärr på det...

Vad har du kontroll över? Vad kan du ändra själv i koden?

Om innehållet i menyerna skall importeras automatiskt så kan jag inte kontrollera/ändra så mycket. Det jag kan ändra då är:

<td id="topField">
<table>
<tr>
<td class="topnavcell">
  <!--Sökfält-->
</td>
<td class="twstop">
  <div class="object_vertical object_customcontent">
    <div class="customcontent">
      <!-- Detta kan jag ändra -->
      <div id="main_nav">
	    <ul>
		  <li class="main_nav_link1"><a class="selected" href="startsidan">HEM</a></li>
		  <li class="main_nav_link2"><a id="B00" href="#">LÄNK 1</a></li>
		  <li class="main_nav_link3"><a id="B01" href="#">LÄNK 2</a></li>
		  <li class="main_nav_link4"><a id="B02" href="#">LÄNK 3</a></li>
		  <li class="main_nav_link5"><a id="B03" href="#">LÄNK 4</a></li>
		</ul>
	  </div>
          <!-- Slut på ändringsmöjligheter -->
	</div>
  </div>
</td>
<td class="topnavcell">
  <div class="object_horizontal object_shopwindow">
    <div id="main_menu_B00" class="embedded_shopwindow">
	  <!-- Innehåll meny 1 -->
	</div>
  </div>
</td>
<td class="topnavcell">
  <div class="object_horizontal object_shopwindow">
	<div id="main_menu_B01" class="embedded_shopwindow">
	  <!-- Innehåll meny 2 -->
	</div>
  </div>
</td>
</tr>
</table>
</td>

plocka bort dina tabeller då, snälla du har ju möjligheter att plocka bort de tabeller, gör det då!

Sen strukturen som du har gör ditt problem mycket jobbigare än vad det behöver vara (Som jag har påpekat i trådarna ovan) Flytta meny 1 och meny 2 i dina li element och triggar jquery eventmouseover på dina li istället för dina a-element.

Eller kolla JS filerna på bygghemma då de också verkar köra samma variant som dig.