Jag fixade med
w\idth: xxx; (på de ställen där det behövs)
!important
hjälper också till, i synnerhet på margin.
Frågan#1
Jag har efter lite meckande med CSS fått till en meny så som jag vill ha den, men den ser bara bra ut i FF.
Kan någon vänlig själ kanske tipsa om vad jag ska göra för att få det att se likadant ut i IE?
Bifogar skärmdumpar från FF och IE.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Meny</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<style type="text/css">
body { background:#E3E3E3; margin:8px; }
body, td, th, input,
textarea, select, h1, h2,
h3, h4, h5, h6 { font-family: Verdana, Arial, Helvetica, sans-serif; color:#000000; }
body, td, th, input,
textarea, select { font-size:10px; }
#nav a {
font-weight:bold;
display:block;
padding:5px 20px;
border:#FFFFFF 2px solid;
margin-top:-2px;
background-color:#E3E3E3;
color:#000000;
text-decoration:none;
}
#nav > li > a {
background-color:#CFCFCF;
}
#nav > li > a {
margin-right:-2px;
}
#nav a:hover {
background-color:#CFCFCF;
}
#nav > li > ul {
z-index:999;
}
#nav > li > ul > li > a {
width:120px;
}
ul { /* all lists */
padding: 0;
margin: 0;
list-style: none;
}
li { /* all list items */
float: left;
position: relative;
}
li ul { /* second-level lists */
background-color:#E3E3E3;
display: none;
position: absolute;
top: 1em;
left: 0;
}
li>ul { /* to override top and left in browsers other than IE, which will position to the top right of the containing li, rather than bottom left */
top: auto;
left: auto;
}
li:hover ul, li.over ul { /* lists nested under hovered list items */
display: block;
}
</style>
<script type="text/javascript"><!--//--><![CDATA[//><!--
function menuInit() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
}
node.onmouseout=function() {
this.className=this.className.replace(" over", "");
}
}
}
}
}
//--><!]]></script>
<script type="text/javascript">
<!--
function init() {
menuInit();
}
//-->
</script>
</head>
<body onLoad="init();">
<ul id="nav">
<li><a href="javascript:;">Bokning</a>
<ul>
<li><a href="javascript:;">Sök hotell</a></li>
<li><a href="javascript:;">Sök arrangemang</a></li>
<li> </li>
<li><a href="javascript:;">Sök bokning</a></li>
<li><a href="javascript:;">Låsta bokningar</a></li>
<li><a href="javascript:;">Alla låsta bokningar</a></li>
<li><a href="javascript:;">Mina bokningar</a></li>
<li><a href="javascript:;">Aktuell bokning</a></li>
<li> </li>
<li><a href="javascript:;">Betalning</a></li>
</ul>
</li>
<li><a href="javascript:;">Backoffice</a>
<ul>
<li><a href="javascript:;">Bokningsbevakning</a></li>
<li><a href="javascript:;">Ej fakturerade</a></li>
<li><a href="javascript:;">Obetalda bokningar</a></li>
<li><a href="javascript:;">Biljettera</a></li>
<li> </li>
<li><a href="javascript:;">Voucherlista hotell</a></li>
<li><a href="javascript:;">Voucherlista biljetter</a><li>
<li> </li>
<li><a href="javascript:;">Väntande request</a></li>
<li><a href="javascript:;">Alla requests</a></li>
<li> </li>
<li><a href="javascript:;">Alla låsta bokningar</a></li>
<li><a href="javascript:;">Ankomstlista</a></li>
<li><a href="javascript:;">Ankomstlista 2v</a></li>
</ul>
</li>
<li><a href="javascript:;">Produkt</a></li>
<li><a href="javascript:;">Administration</a></li>
<li><a href="javascript:;">Ekonomi</a></li>
<li><a href="javascript:;">SiteBuilder</a></li>
<li><a href="javascript:;">Startsida</a></li>
</ul>
</body>
</html>
