Servus,
mal schauen wie ich mein Problem erklären kann...
Ich arbeite gerade an einem Template und arbeite da mit rounded corners im CSS. Klappt ja natürlich mit Opera, Firefox, IE9 etc. alles super. Alles unter IE9 unterstützt das ganze ja nicht und mit .htc "Hacks" möchte ich eigtl nicht arbeiten.
Für die älteren Versionen hab ich dann eine Browserweiche gemacht die dann auf eine CSS Datei speziell IE lte 8 verlinkt ist um da Grafiken für die Ecken zu nehmen.
Mein Problem ist jetzt das ich nicht genau weiß was ich jetzt in welches CSS schreiben... Eigtl war ich mir sicher das es schon mal ein Schritt in die richtige Richtung ist... aber war es nicht!
Das ist meine xhtml datei... so hoffe ich doch
Code:
<?xml version="1.0" encoding="windows-1252"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252"/>
<link rel="stylesheet" href="css/xxxx.css" type="text/css"/>
<!--[if lte IE 8]><link rel="stylesheet" href="css/ie.css" type="text/css"/><![endif]-->
<title>xxx.xxx</title>
</head>
<body>
<div id="whitebox">
<div id="header">
<div id="logo"><a href="index.php"><img src="http://xhtmlforum.de/images/logo.png" border="0" alt="Home" /></a>
</div>
<div id="menu">
</div>
</div>
<div id ="greybox">
<span class="greybox-top-right"></span>
<span class="greybox-bottom-left"></span>
<span class="greybox-bottom-right"></span>
</div>
<div id="main">
<div id="contentbox">
<div id="content">
</div>
</div>
</div>
<div id="footer">
</div>
</div>
</body>
</html>
Hier meine eigtl CSS Datei
Code:
body {
background-image:url(../images/bg.jpg);
background-color:#efefef;
background-repeat:no-repeat;
font-size: 11px;
font-family: Verdana, Helvetica;
color:#000000;
padding:0px;
margin:0px;
}
a {
color:#dddddd;
text-decoration:none;
}
#whitebox {
background-image:url(../images/wbg.png);
position:absolute;
width:900px;
height:100%;
left: 50%;
margin-left:-450px;
}
#header {
position:relative;
height:150px;
width:900px;
margin:0;
padding:0;
}
#logo {
position:relative;
float:left;
height:117px;
width:416px;
margin:10px 0px 0 10px;
}
#menu {
position:relative;
height:120px;
width:160px;
}
#greybox {
background-color:#dddddd;
position:absolute;
width:750px;
height:520px;
left: 50%;
margin: 30px 0 0 -375px;
-moz-border-radius:20px;
-webkit-border-radius:20px;
-khtml-border-radius:20px;
border-radius:20px;
box-shadow:8px 8px 6px #777;
-moz-box-shadow:8px 8px 6px #777;
-webkit-box-shadow:8px 8px 6px #777;
-khtml-box-shadow:8px 8px 6px #777;
}
#main {
position:relative;
float:left;
width:740px;
margin:0px 0px 0px 0px;
padding:0;
}
#contentbox {
position:relative;
float:left;
width:700px;
margin:0px 0px 0px 0px;
padding:0;
}
#footer {
position:relative;
width:700px;
height:50px;
}
und die IE lte 8 Ergänzung
Code:
#greybox {
background-image:url(../images/rcol.png) no-repeat;
background-color:#dddddd;
position:relative;
width:750px;
height:520px;
top: 50%;
left: 50%;
margin: -230px 0 0 -750px;
padding: 20px;
}
span.greybox-top-right, span.greybox-bottom-left, span.greybox-bottom-right {
position: absolute;
width: 20px;
height: 20px;
display: block;
}
span.greybox-top-right {
background: url(../images/rcor.png) no-repeat;
top: 0;
right: 0;
}
span.greybox-bottom-left {
background: url(../images/images/rcul.png) no-repeat;
bottom: 0;
left: 0;
}
span.greybox-bottom-right {
background: url(../images/rcur.png) no-repeat;
bottom: 0;
right: 0;
}
Ich will da halt "nur" die "Greybox" tauschen...
Wer sich das bis hier schon durchgelesen hat... besten dank!