Frage stellen
ich habe eine box mit runden ecken erstellt und möchte nun einen border um die box machen. im ie6 passt auch alles wunderbar, nur der firefox verschiebt die rechte seite um 1px. hab schon so viel rumgepuzzelt das mir echt nix mehr einfällt. wäre cool wenn mir jemand weiterhelfen könnte.
Hier der HTML-Code:
- Code: Alles auswählen
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="new 6.css" rel="stylesheet" type="text/css">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<title>Herzlich Willkommen!</title>
</head>
<body>
<div id="window">
<div class="window_corner">
<b class="top">
<b class="r1"></b><b class="r2"></b>
<b class="r3"></b><b class="r4"></b>
<b class="r5"></b><b class="r6"></b>
<b class="r7"></b>
</b>
</div>
<div id="header"></div>
<div id="left_column"></div>
<div id="main_content"></div>
<div id="right_column"></div>
<div id="blauer_Balken2">
</div>
<div id="footer">
</div>
<div class="window_corner">
<b class="bottom">
<b class="r7"></b><b class="r6"></b>
<b class="r5"></b><b class="r4"></b>
<b class="r3"></b><b class="r2"></b>
<b class="r1"></b>
</b>
</div>
</div><!--window ende-->
</body>
</html>
Und hier der CSS-Code:
- Code: Alles auswählen
body {
text-align: center;
font-family: verdana, arial,sans-serif;
height: 100%;
width: 100%;
padding: 0;
margin: 0;
background: #fff url(img/verlauf.gif) repeat-x;
}
#window {
position: absolute;
width: 950px;
height: 519px;
text-align: left;
top: 50%;
margin-top: -265px;
left: 50%;
margin-left: -475px;
font-size: 12px;
background: #fff;
background-repeat: no-repeat;
background-position: center bottom;
}
#header {
width: 100%;
height: 45px;
text-align: center;
margin: 0;
padding: 0;
}
#blauer_Balken2 {
clear: both;
width: 100%;
height: 30px;
background: #648FC6 url(../img/balken_verlauf.gif) repeat-x;
text-align: center;
margin: 0;
padding: 0;
}
#footer {
width: 100%;
height: 20px;
text-align: right;
border-right: 1px solid #666;
}
#left_column {
width: 200px;
height: 410px;
float: left;
}
#main_content {
width: 550px;
height: 410px;
float: left;
margin: 0;
padding: 0;
}
#right_column {
width: 200px;
height: 410px;
float: left;
}
.window_corner {
width: 100%;
background: #fff;
}
.window_corner .top {
display:block;
background: #c5c7cb;
}
.window_corner .bottom{
display:block;
background: #d3d3d7;
}
.window_corner .top b, .window_corner .bottom b {
display:block;
height: 1px;
overflow: hidden;
background: #fff;
}
.window_corner .top .r1{
margin: 0 5px;
border-left: 1px solid #666;
border-right: 1px solid #666;
border-top: 1px solid #666;
}
.window_corner .bottom .r1{
margin: 0 5px;
border-left: 1px solid #666;
border-right: 1px solid #666;
border-bottom: 1px solid #666;
}
.window_corner .r2 {
margin: 0 3px;
border-left: 1px solid #666;
border-right: 1px solid #666;
}
.window_corner .r3{
margin: 0 2px;
border-left: 1px solid #666;
border-right: 1px solid #666;
}
.window_corner .r4{
margin: 0 1px;
border-left: 1px solid #666;
border-right: 1px solid #666;
}
.window_corner .r5{
margin: 0 0.5px;
border-left: 1px solid #666;
border-right: 1px solid #666;
}
.window_corner .r6{
margin: 0 0.3px;
border-left: 1px solid #666;
border-right: 1px solid #666;
}
.window_corner .top .r7, .window_corner .bottom .r7 {
margin: 0 0.1px;
height: 5px;
border-left: 1px solid #666;
border-right: 1px solid #666;
}
Danke schon mal!