css meny buggar ur i IE6 men inte i 5.5

harding-85 · 2008-12-11, 13:40

Har en meny som buggar ur i IE6 , den fungerar bra i Chrome, FF , och IE 5.5 + 7.

menyn har jag lånat css koden från en tutorial och den ser ut så här för menyn:
eller titta på sidan här : http://www.mr-ab.se/mr-ab/

Kod:

/* NAVIGATION BUTTONS */
 	.menu {
	height: 30px;
	width: 844px;
	float:none;
	margin-left: 40px;
 	}
 	.cssnav	{
	position:relative;
	float: left;
	margin: 0px;
	padding: 0;
	font-family: arial, helvetica, sans-serif;
	background: url(../img/button_over.gif) no-repeat;
	width: 102px;
	height: 28px;
	overflow:hidden;/* for ie to hide extra height*/
	background-image: url(../img/button_over.gif);
 	}
 	.cssnav a {
   display: block;
   color: #000000;
   font-size: 11px;
   width: 102px;
   height: 28px;
   display: block;
   float: left;
   color: black; 
   text-decoration: none;
   overflow:hidden;/* for ie to hide extra height*/
 	}
 	.cssnav a:hover {
   color: #ffffff;
 	}
 	
 
 	.cssnav img {width: 102px; height: 28px; border: 0; }
 	* html a:hover {visibility:visible}
 	.cssnav a:hover img{visibility:hidden}
 
 	.cssnav span {
	position: absolute;
	left: 0px;
	top: 7px;
	text-align: center;
	width: 102px;
	cursor: pointer;
	font-size: 12px;
 	}
/* END OF NAVIGATION */

harding-85 · 2008-12-12, 13:29

52 visningar , 0 svar. rackarns =/

scrdj · 2008-12-12, 13:46

Sitter i IE6, vad är det som buggar?

Vet att det är OT, men gillade den gamla versionen mera måste jag säga.

harding-85 · 2008-12-15, 09:49

om du går in på t.ex. produkter så ser du att menyn (både topp och sidmenyn) buggar ur, texten syns inte.

harding-85 · 2008-12-15, 14:13

har hittat problemet.
använder en png fix å det är den som strular till det.
använder den här http://labs.unitinteractive.com/unitpngfix.php
nån som har tips på hur man kan lösa det hela? vill alltså ha en png fix men sammtidigt att texten syns i menyerna.

tacksam för svar!

TommyTisen · 2008-12-16, 19:36

Din css är ju så här
.cssnav a:hover {
color: #ffffff;
}

Vilket ju gör att texten blir vit... sätt den till #000000 så får du iaf svart text.

Eller vill du inte ha hover:n på dom objekten alls?

EDIT: Ah, sorry - kollade bara på startsidan....ser ditt problem nu... ska kolla nogrannare

EDIT2: Det du vill åstakomma är enklare är enklare än vad du gör det. Det du vill ha är att det blir en halv-transparent hovereffekt vid mouseover. Vill du ha kodexempel på hur du kan lösa det på bättre sätt så kan jag snickra ihop lite sen. Skicka ett mess så kan jag lägga in det sen i den här tråden.

TommyTisen · 2008-12-16, 23:19

Har testat detta i IE6 IE7 och FF3 och det funkar. Dock borde man kanske göra javascriptet lite bättre.

Kod:

<html>
<head>
 * *<title>Hover-effect</title>
 * *<style type="text/css">
 * *body
 * *{
 * * * *color: #000000;
 * * * *font-size: 12px;
 * * font-family: arial, helvetica, sans-serif;
 * *}
	.cssnav	{
 * * * *float: left;
 * * * *margin: 0px;
 * * * *padding: 0;
 * * * *text-align:center;
 * * * *background: url(http://www.mr-ab.se/mr-ab/img/button.gif) no-repeat;
	}
 * *.cssnav_hover
 * *{
 * *	float: left;
 * * * *margin: 0px;
 * * * *padding: 0;
 * * * *text-align:center;
 * *	background: url(http://www.mr-ab.se/mr-ab/img/button_over.gif) no-repeat;
 * *}
 * *.cssnav a, .cssnav a:hover, .cssnav_hover a, .cssnav_hover a:hover
 * *{
 * * *color: #000000;
 * * * * display: block;
 * * * * padding:6px 0 7px 0;
 * * * * text-decoration: none;
 * * * *width: 102px;
 * * * *height: 16px;
 * *}
 * *</style>
</head>
<body>
 * *<script type="text/javascript">
 * * * *function changeClass(classname, object)
 * * * *{
 * * * * * *object.setAttribute("className", classname);
 * * * * * *object.setAttribute("class", classname);
 * * * *}
 * *</script>
 * *<div class="menu"> 
 * * * *<div class="cssnav" onmouseover="changeClass('cssnav_hover',this);" onmouseout="changeClass('cssnav',this);"><a href="../index.html"><span>Start</span></a></div> 
 * * * *<div class="cssnav" onmouseover="changeClass('cssnav_hover',this);" onmouseout="changeClass('cssnav',this);"><a href="#"><span>Media</span></a></div> 
 * * * *<div class="cssnav" onmouseover="changeClass('cssnav_hover',this);" onmouseout="changeClass('cssnav',this);"><a href="#"><span>Forskning</span></a></div> 
 * * * *<div class="cssnav" onmouseover="changeClass('cssnav_hover',this);" onmouseout="changeClass('cssnav',this);"><a href="#"><span>Kurser</span></a></div>
 * * * *<div class="cssnav" onmouseover="changeClass('cssnav_hover',this);" onmouseout="changeClass('cssnav',this);"><a href="#"><span>Nöjda kunder</span></a></div>
 * * * *<div class="cssnav" onmouseover="changeClass('cssnav_hover',this);" onmouseout="changeClass('cssnav',this);"><a href="#"><span>Terapeuter</span></a></div>
 * * * *<div class="cssnav" onmouseover="changeClass('cssnav_hover',this);" onmouseout="changeClass('cssnav',this);"><a href="#"><span>Handla</span></a></div>

 * * * *<div class="cssnav" onmouseover="changeClass('cssnav_hover',this);" onmouseout="changeClass('cssnav',this);"><a href="#"><span>Forum</span></a></div>
 * *</div> 

</body>
</html>

harding-85 · 2008-12-17, 10:02

oh tack så mkt Tommy , ska testas. hade lite tidspress så konverterade alla mina PNGs till GIF för att kringå problemet , men det här va kalas!

Syke · 2008-12-17, 12:16

Nu får ni ta och sluta krångla till det.

Det behövs ingen javascript, och inte så mycket onödig HTML-kod. Lite CSS fixar biffen. Se till så att du har en korrekt doctype i den riktiga sidan bara.

Kod:

<html>
<head>
  <title>Hover-effect</title>
  <style type="text/css">
body {
	color: #000000;
	font-size: 12px;
	font-family: arial, helvetica, sans-serif;
}
  
ul#nav {
	list-style-type: none;
	margin: 0;
	padding: 0;
}

ul#nav li {
	display: block;
	float: left;
}

ul#nav li a:link,ul#nav li a:visited {
	display: block;
	width: 102px;
	height: 16px;
	padding: 6px 0 7px 0;
	text-align: center;
	text-decoration: none;
	color: #000;
	background: url(http://www.mr-ab.se/mr-ab/img/button.gif) no-repeat;
}

ul#nav li a:hover, ul#nav li a:active {
	color: #fff;
	background: url(http://www.mr-ab.se/mr-ab/img/button_over.gif) no-repeat;
}

  </style>
</head>
<body>
	<ul id="nav">
 <li><a href="/index.html">Start</a></li>
 <li><a href="#">Media</a></li>
 <li><a href="#">Forskning</a></li>
 <li><a href="#">Nöjda Kunder</a></li>
 <li><a href="#">Blah</a></li>
 <li><a href="#">Bleh</a></li>
	</ul>
</body>
</html>

Nomda · 2008-12-17, 12:17

varför göra det komplicerat när man kan göra det enkelt?

den menyn behöver varken javascript eller skumma positions.

HTML:

Kod:

<div id="navigation">
<ul>
<li><a href="#" class="active">Link<span></span></a></li>
<li><a href="#">Link<span></span></a></li>
<li><a href="#">Link<span></span></a></li>
<li><a href="#">Link<span></span></a></li>
</ul>
</div>

CSS:

Kod:

#navigation { height: 30px; overflow: hidden; }

#navigation ul { margin:0; padding:0; list-style: none; }
#navigation ul li { margin:0; padding:0; list-style: none; display: inline; /* display inline för att fixa utvisningen i IE6*/ }
#navigation ul li a { 
font: 12px arial, verdana;
margin:0;
padding:5px 7px;
list-style: none;
display: block; 
background: url(../img/button.gif) no-repeat top left; /* bakgrundsbild när du inte håller musen över */
float: left;
text-decoration: none;
color: #fff;
text-align: center;
 }

#navigation ul li a:hover {
background: url(../img/button_over.gif) no-repeat top left; /* bakgrundsbild när du håller musen över */
color: #000; /* Textfärg när du håller musen över */
}

/* Utvisning för vilken sida du är inne på */
#navigation ul li a.active { 
background: url(../img/button_over.gif) no-repeat top left; /* bakgrundsbild när du håller musen över */
color: #000; /* Textfärg när du håller musen över */
 }

Aktiva användare som för närvarande tittar på det här ämnet: 1 (0 medlemmar och 1 gäster)

Menu

css meny buggar ur i IE6 men inte i 5.5