Är det någon som kan hjälpa mig att hitta rätt doctype till min kod?
Jag har fått flera svar som tyder på att det är fel på min doctype, det är därför mina listor hamnar på olika höjd i IE och FF.
Just nu har jag denna doctype:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
hej hannahb
Det du kan göra är att sätta din ul och li margin och padding till 0. Sedan leker du du med margin-left på ditt li objekt tills det ser ok ut.
[red]
ul, li
{
margin: 0;
padding: 0;
}
ul li
{
margin-left: 15px;
}
[/red]
Nej det blev ingen skillnad att sätta den doctypen du föreslog jarvklo, men tack ändå! :)
Här kommer koden:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>menu</title>
<link rel="stylesheet" type="text/css" href="ie.css">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript" type="text/javascript">
activateMenu = function(nav) {
/* currentStyle restricts the Javascript to IE only */
if (document.all && document.getElementById(nav).currentStyle) {
var navroot = document.getElementById(nav);
/* Get all the list items within the menu */
var lis=navroot.getElementsByTagName("LI");
for (i=0; i<lis.length; i++) {
/* If the LI has another menu level */
if(lis[i].lastChild.tagName=="UL"){
/* assign the function to the LI */
lis[i].onmouseover=function() {
/* display the inner menu */
this.lastChild.style.display="block";
}
lis[i].onmouseout=function() {
this.lastChild.style.display="none";
}
}
}
}
}
window.onload= function(){
/* pass the function the id of the top level UL */
activateMenu('nav');
}
</script>
</head>
<body>
<div id="menu">
<ul id="nav">
<li> <a class="mainmenu" href="demo.php?p_id=1">STARTSIDA</a> </li>
<li> <a class="mainmenu" href="demo.php?p_id=2">HUVUDMENY</a>
<ul>
<li><a class="undermenu" href="demo.php?p_id=3">UNDERMENY</a></li>
<li><a class="undermenu" href="demo.php?p_id=4">UNDERMENY</a></li>
</ul>
</li>
<li> <a class="mainmenu" href="demo.php?p_id=10">HUVUDMENY</a>
<ul>
<li><a class="undermenu" href="demo.php?p_id=11">UNDERMENY</a></li>
<li><a class="undermenu" href="demo.php?p_id=12">UNDERMENY</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
I CSS:en ser det ut såhär:
#nav{list-style: none;}
#nav ul {
top:0;
padding:0;
margin:0;
list-style: none;
width:10em;
z-index:99;
position:relative;
overflow:visible;
}
#nav li {
top:0;
margin:0;
padding:0;
position: relative;
float:left;
width: 10em;
background-color:#0C2577;
border-bottom:none;
display:block;
height:auto;
}
#nav a.mainmenu {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: bold;
color: #FFFFFF;
text-decoration:none;
display:block;
padding: 0.1em;
margin:0 0.2em 0.2em 0.2em;
background-color:#0C2577;
width:9.5em;
height:0.8em;
}
#nav a.undermenu {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: normal;
color: #FFFFFF;
text-decoration:none;
display:block;
padding: 0.1em;
margin:0.2em 0 0.2em 0.2em;
background-color:#0C2577;
width:9.5em;
height:1em;
}
#nav ul{
display:none;
}
/*all see this */
#nav ul ul, #nav ul ul ul{
display:none;
position:absolute;
margin-top:-1.8em;
margin-left:12em;
}
/* non-IE browsers see this */
#nav ul li>ul, #nav ul ul li>ul{
margin-top:-1.4em;
}
#nav li:hover ul ul, #nav li:hover ul ul ul{
display:none;
}
#nav li:hover ul, #nav ul li:hover ul, #nav ul ul li:hover ul{
display:block;
}
li>ul {
top: auto;
left: auto;
}
Hoppas någon kan hjälpa mig...börjar bli ganska less :)
Det fungerar ju hur bra som helst!
Ibland är man bra dum va...jag måste ju ha provat sätta margin och padding till noll precis överallt utom där det skulle vara...:OO
Vet inte hur många som sagt att det ska fungera om jag sätter dem till noll, och jag har försökt och provat och provat...
Jaja...det här problemet lär jag inte göra om iallafall, tack tack!
