Ecke abgerundet

Status
Nicht offen für weitere Antworten.

schiese

Erfahrenes Mitglied
Hallo,
ich habe ein Problem bei meinem Menu. Ich möchte gerne die Ecke unten rechts abrunden. Im FF klappt es auch, nur im IE wird es falsch dargestellt. Habe es schon mit bottom:0px versucht, aber dann klappt esd überhaupt nicht. Hat jemand eine Idee?

Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Startseite</title>
<style type="text/css">
<!--

#hauptlinks {
width:150px;
font-size:9pt;
font-family:Arial, sans-serif;
float:left;
}

#hauptrechts {
width:650px;
font-size:9pt;
font-family:Arial, sans-serif;
float:left;
}

div.clear {
clear:both;
}




ul#navohne {
border:1px solid rgb(150,150,150);
color:rgb(255,255,255);
padding-left:15px;
font-size:9pt;
font-weight:bold;
font-family:Arial, sans-serif;
background-color:rgb(150,150,150);
width:130px;
line-height:20px;
list-style:none;
margin:0;
}

ul#navunten {
border-left:1px solid rgb(200,200,200);
border-right:1px solid rgb(200,200,200);
border-bottom:1px solid rgb(200,200,200);
list-style:none;
padding-left:15px;
font-size:9pt;
font-family:Arial, sans-serif;
background-color:rgb(230,230,230);
width:130px;
margin:0;
height:300px;
}

ul#nav {
list-style: none;
margin:0;
padding:0;
}

ul#nav a {
padding-left:15px;
font-size:9pt;
font-family:Arial;
color:rgb(0,0,0);
text-decoration:none;
width:130px;
background-color:rgb(240,240,240);
display:block;
line-height:20px;
border-left:1px solid rgb(200,200,200);
border-right:1px solid rgb(200,200,200);
border-bottom:1px solid rgb(200,200,200);
}

ul#nav a:hover {
background-color:rgb(230,230,230);
color:rgb(0,0,0);
font-weight:bold;
}

#rundeecke {
position:relative;
top:279px;
left:107px;
}

//-->
</style>
</head>
<body>




<p>
<!-- Hauptbox links //-->

<div id="hauptlinks">

<p align="center">
<img src="logo.jpg">
</p>

<ul id="navohne">
 <li> &nbsp; &nbsp;Kategorie</li>
</ul>
<ul id="nav">
 <li><a href="#">Menu</a></li>

 <li><a href="#">Menu</a></li>
 <li><a href="#">Menu</a></li>
 <li><a href="#">Menu</a></li>
 <li><a href="#">Menu</a></li>
</ul>
<ul id="navohne">
 <li> &nbsp; &nbsp;Kategorie</li>

</ul>
<ul id="nav">
 <li><a href="#">Menu</a></li>
 <li><a href="#">Menu</a></li>
 <li><a href="#">Menu</a></li>
</ul>
<ul id="navohne">
 <li> &nbsp; &nbsp;Kategorie</li>

</ul>
<ul id="nav">
 <li><a href="#">Menu</a></li>
 <li><a href="#">Menu</a></li>
 <li><a href="#">Menu</a></li>
</ul>
<ul id="navunten">
 <li><div id="rundeecke"><img src="rundeecken.bmp"></div></li>
</ul>

</div>

<!-- Hauptbox rechts //-->

<div id="hauptrechts">


Inhalt


</div>

<div class="clear"></div>

</body>
</html>

HIer der LINK

schiese
 
Mach es dir doch einfacher, indem du einfach ein weiters div- oder p-Element unter dem Menü einfügst und die abgerundete Ecke als Hintergrundbild einbindest.

HTML:
#clear_nav{
   width:150px;
   background:transparent url(rundeecken.bmp) bottom right no-repeat;
}

Das sollte dann auch im IE & Co problemlos funktionieren.
 
Hi,

wenn ich für das Dokument einen Doctype angebe, der den IE nicht in den Quirksmodus versetzt, wird das Menü in der korrekten Breite (130px + 15px = 145px) dargestellt.
 
Status
Nicht offen für weitere Antworten.
Zurück