Farben bündig machen *verwirrt*

[Kalma]

Hey..

ich habe ein Problem:

Und zwar: wenn ihr euch mal diesen Link anschaut:
http://dfmusik.de/stuff/olsen/
seht ihr, das die Farben an den Ecken nicht "bündig" sind.

Wie bkomm ich das hin?


David

 

[Gumbo]

Die nicht durchgängige Darstellung Firefox’ des abgerundeten Rahmens scheint wohl eine Fehldarstellung zu sein. Woran das liegt, weiß ich allerdings nicht.

 

[Kalma]

Meine Codes:


index.php

<link href="include/style.css" rel="stylesheet" type="text/css">

<table width="200" class="menu">
  <tr>
    <td>
	 <div class="menuh">
	  Index	 </div>
	 <a href="#" class="menui">Home</a> 
	 <a href="#" class="menui">Home</a> 
	 <a href="#" class="menui">Home</a> 
	 <a href="#" class="menui">Home</a>
	</td>
  </tr>
</table>

style.css

.menu {
 border:3px solid red;
 border-left:none;
 -moz-border-radius-topright:10px;
 -moz-border-radius-topleft: 00px;
 -moz-border-radius-bottomright:10px;
 -moz-border-radius-bottomleft: 00px;
}

.menuh {
 -moz-border-radius-topright:10px;
 background-color:#FFCC00;
 font-weight:bold;
}

.menui {
 background-color:#FFFFCC;
 border-top:1px dashed;
 border-width:thin;
 display:block;
}
.menui:hover {
 background-color:#FF9900;
 border-top:1px dashed;
 border-width:thin;
 display:block;
}

Vielleicht hilfts weiter

 

[Gumbo]

Wie wär’s, wenn du die Links aus der deplatzierten Tabelle befreist und ihnen vielleicht eine Liste genehmigst?

<div class="box">
	<h3>Index</h3>
	<ul>
		<li><a href="#">Home</a></li>
		<li><a href="#">Home</a></li>
		<li><a href="#">Home</a></li>
		<li><a href="#">Home</a></li>
	</ul>
</div>

.box {
	padding: 3px;
	padding-left: 0;
	border: 3px solid red;
	border-left: none;
	-moz-border-radius: 0 11px 11px 0;
}

.box h3 {
	margin: 0;
	background-color: #FFCC00;
	-moz-border-radius-topright: 11px;
}

.box ul, box ul li {
	list-style: none;
	margin: 0;
	padding: 0;
}
.box ul li a {
	display: block;
	background-color: #FFFFCC;
	border-top: thin 1px dashed;
}
.box ul li a:hover {
	background-color: #FF9900;
}