Frage stellen
Meine Menüleiste ist im IE nach rechts verschoben und ich weiss nicht woran es liegen könnte. Ich habe schon alles auf "0" gesetzt (reset.css). Leider ist die Menüleiste im IE immernoch nicht da wo sie sein sollte.
Wie kann ich es so machen, dass die Menüpunkte genau in den schwarzen Balken passen und trotzdem im FF & IE gleich aussehen?
Ich wäre für jeden Tip dankbar.
Testseite: http://web4me.kilu.de/
index.html
- Code: Alles auswählen
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<link rel="stylesheet" type="text/css" href="css/reset.css" media="all">
<link rel="stylesheet" type="text/css" href="css/index.css" media="all">
<link rel="stylesheet" type="text/css" href="css/dropdown.css" media="all">
<title>hp-test</title>
<!--[if IE]>
<style type="text/css" media="screen">
#menu ul li {float: left; width: 100%;}
</style>
<![endif]-->
<!--[if lte IE 6]>
<style type="text/css" media="screen">#navi { behavior:url("csshover.htc"); }</style>
<![endif]-->
<!--[if lt IE 7]>
<style type="text/css" media="screen">
body {behavior: url(csshover.htc); font-size: 100%;}
#menu ul li a {height: 1%;}
}
</style>
<![endif]-->
</head>
<body>
<div class="box960">
<div class="background">
<!-- start dropdown -->
<div class="link_menue">
<ul class="navi">
<li><a href="./">MENUE</a>
<ul>
<li><a href="./">PUNKT 1</a></li>
<li><a href="./">PUNKT 2</a></li>
<li><a href="./">PUNKT 3</a></li>
<li><a></a></li>
<li><a></a></li>
<li><a></a></li>
</ul>
</li>
</ul>
</div>
<div class="link_menue2">
<ul class="navi">
<li><a href="./">MENUE 2</a>
<ul>
<li><a href="./">PUNKT 1</a></li>
<li><a href="./">PUNKT 2</a></li>
<li><a href="./">PUNKT 3</a></li>
<li><a></a></li>
<li><a></a></li>
<li><a></a></li>
</ul>
</li>
</ul>
</div>
<!-- end dropdown -->
</div><!-- end background -->
</div><!-- end box960 -->
</body>
</html>
index.css
- Code: Alles auswählen
body
{
background: #C0C0C0;
color: #red;
font-size: 11px;
}
a
{
color: #333;
text-decoration: none;
}
a:hover
{
color: #333;
text-decoration: none;
}
a img
{
border : none;
}
/*
-----------------------------------------------
class
----------------------------------------------- */
.box960 {
margin-left: auto;
margin-right: auto;
width: 960px;
}
.background
{
background-image: url(../img/main_bg.jpg);
width:960px; height:466px;
}
.link_menue
{
position:absolute;
left:140px;
top:175px;
}
.link_menue2
{
position:absolute;
left:291px;
top:175px;
}
/*
-----------------------------------------------
ID
----------------------------------------------- */
dropdown.css
- Code: Alles auswählen
/*###################*/
/* Beginn Navigation */
/*###################*/
.navi, .navi ul {
list-style-type:none;
margin:0;
padding:0;
} /* Style-Reset */
.navi li {
width:150px;
float:left;
} /* Horizontale Anordnung */
.navi li ul {
display:none;
} /* Normalzustand eingeklappt */
.navi li:hover ul {
display:block;
} /* Ausgeklappt */
/*###################*/
/* Styles fuers Auge */
/*###################*/
.navcontainer {
height:50px;
position:relative;
}
.navi {
position: relative;
display: block;
margin: 0px;
padding: 0px;
text-align:center;
}
.navi li {
border:1px solid #000;
margin:0 32px 0 0;
color: silver;
font-family: Georgia, Garamond, "Times New Roman", serif;
font-size: 16px;
}
.navi ul li {
border:none;
margin:0;
}
.navi a {
font-weight:bold;
text-align:center;
display:block;
padding:0.1em;
text-decoration: none;
}
.navi a:link, .navi a:visited {
color:#FFF;
background:#A8CFF0;
text-decoration: none;
}
.navi a:active, .navi a:hover {
color:red;
background:#FFF;
text-decoration:none;
}
reset.css
- Code: Alles auswählen
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
outline: 0;
}
body {
line-height: 1;
color: black;
background: white;
}
ol, ul {
list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: separate;
border-spacing: 0;
}
caption, th, td {
text-align: left;
font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: "";
}
blockquote, q {
quotes: "" "";
}
Grüße
blackhtml
