Beim Internet-Explorer schneidet die div-Ebene den unteren Bereich
der 2 Links ab, beim Firefox hingegen erscheint die Ebene hinter den
Links.
Der Firefox stellt die Seite korrekt dar, auch wenns fehlerhaft aussieht. Die SPAN Tags sind inline-Elemente und vergrößern sich nicht automatisch wenn der A Tag durch sein padding nach außen "drückt".
Wie kann man den farbigen Rahmen mit CSS so einstellen, so
dass dieser die 2 Links, als Ganzes berandet.
Du könntest die SPAN Tags weglassen und einfach den A Tags einen Rahmen verpassen.
Am besten fasst du das ganze noch in ne Liste, dann isses semantisch korrekt:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<title>test</title>
<style type="text/css">
body {
text-align : center;
margin : 0px;
}
.body {
margin : 0px auto;
width : 63px;
font-family : Tahoma, Verdana, Arial, Sans-Serif;
font-style : normal;
font-variant : normal;
text-align : left;
}
.navi {
list-style-type:none;
}
.navi, .navi li {
margin:0;
padding:0;
}
.navi a {
float:left;
display:block;
font-size : 13px;
text-decoration: none;
color: #ffffff;
padding: 5px;
background: #878D70;
border: 1px solid #C9D8B1;
}
.navi a:hover {
background: #95A35B;
}
</style>
</head>
<body>
<div class="body">
<ul class="navi">
<li><a href="">test</a></li>
<li><a href="">test</a></li>
</ul>
</div>
</body>
</html>