PerkulatorMedlem sedan nov. 20072 inlägg
Hej! Jag är ny här, och behöver lite hjälp. Håller på med mest design, men ska lära mig CSS.
Nu till frågan,
det är så att jag håller på med en CSS-sida och den funkar utmärkt i Opera, Firefox och till viss del IE 6 o 7. Men det största problemet är att inte menyn funkar i IE 6.
Kan någon hjälpa mig?
Här är en länk: http://www.imadethis.se/test/contact.html
Jag är inte så haj på detta ännu, så det må vara en simpel lösning!
Tacksam för all hjälp.
EDIT. Kan tillägga att jag använder mig av en css-fil (http://www.imadethis.se/test/css/ie.css) så att positive/relative ska funka i IE. Vad jag har märkt nu är att om jag använder mig av denna så funkar i stället INTE dropdown menun alls. SUCK
I grunden vill jag har en CSS sida med en dropdown meny (pga av att sidan kommer innehålla en massa information så funkar inte en vanlig meny, måste ha ca 20-25 klickbara undermenyer), hjälp? /EDIT
MVH PERKULATOR :bire
voigtann1Medlem sedan juni 20018 810 inlägg
Den fungera inte alls bra i Firefox för mig...
Kollade din källkod... jag förstå inte varför du ha:
<!--[if lte IE 6]><link rel="stylesheet" href="css/ie.css" type="text/css"><table><tr><td><![endif]>
på rätt många platser.
du behöver inte länka in din CSS så många gånger, en gång räcker.
(jag förstå varför du använder "if" men du behöver verklingen inte lägga in <link> på varje plats.(varför har du en tabel när du inte använder tabeller längre i din navigering?)
PerkulatorMedlem sedan nov. 20072 inlägg
Ok. Men kan jag bestämma vart jag vill ha "ie.css", för som sagt det gör så att scrollen funkar i IE men gör också att menyn inte funkar i IE. :S
voigtann1Medlem sedan juni 20018 810 inlägg
placera
<!--[if lte IE 6]><link rel="stylesheet" href="css/ie.css" type="text/css" /><![endif]>
inne i header taggen där den ska vara..
voigtann1Medlem sedan juni 20018 810 inlägg
Tog exemplet från sidan du har fått koden av och ritar bara ut en meny men detta fungera på samtliga läsare IE6,IE7 och Firefox som jag har testat den på.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title></title>
<link rel="stylesheet" href="new_menu.css" type="text/css" />
</head>
<body>
<div class="menu">
<ul>
<li><a href="../menu/index.html">ART&DESIGN<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="photos.html" title="Photos">Photos</a></li>
<li><a href="photos.html" title="Photos">Photos</a></li>
<li><a href="photos.html" title="Photos">Photos</a></li>
<li><a href="photos.html" title="Photos">Photos</a></li>
<li><a href="photos.html" title="Photos">Photos</a></li>
<li><a href="photos.html" title="Photos">Photos</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>
</div>
</body>
</html>
new_menu.css
/* ================================================================
This copyright notice must be untouched at all times.
The original version of this stylesheet and the associated (x)html
is available at [url]http://www.cssplay.co.uk/menus/basic_dd.html[/url]
Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.
This stylesheet and the assocaited (x)html may be modified in any
way to fit your requirements.
=================================================================== */
/* remove the bullets, padding and margins from the lists */
.menu ul{
list-style-type:none;
padding:0;
margin:0;
}
/* make the top level links horizontal and position relative so that we can position the sub level */
.menu li{
float:left;
position:relative;
z-index:100;
}
/* use the table to position the dropdown list */
.menu table{
position:absolute;
border-collapse:collapse;
z-index:80;
left:-1px;
top:25px;
}
/* style all the links */
.menu a, .menu :visited {
display:block;
font-size:10px;
width:149px;
padding:7px 0;
color:#000;
background:#949e7c;
text-decoration:none;
margin-right:1px;
text-align:center;
}
/* style the links hover */
.menu :hover{
color:#444;
background:#d4d8bd;
}
/* hide the sub level links */
.menu ul ul {
visibility:hidden;
position:absolute;
width:149px;
height:0;
}
/* make the sub level visible on hover list or link */
.menu ul li:hover ul,
.menu ul a:hover ul{
visibility:visible;
}
Kort exempel men denna fungera i samtliga läsare.. du har gjort en del missar + ändringar på ditt exempel.
