23.09.2010, 14:19
|
|||
|
|||
Problem Browserweiche IE CSS
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;
}
Wer sich das bis hier schon durchgelesen hat... besten dank!
Geändert von 00001 (23.09.2010 um 14:24 Uhr) 
|
| Sponsored Links |
|
23.09.2010, 14:26
|
||||
|
||||
|
Aus trotz sollte man das so machen:
Code:
<!--[if IE]>
<style type="text/css">
body {display: none};
</style>/><![endif]-->
 Benutz doch einfach gleich für alle Browser die Grafiken dann sparst du dir so ein rumgefummel. Ich persönlich mache das so, denn sowas tu ich mir nicht an
__________________
#m { f : g } /* jnv */ Geändert von jnv (23.09.2010 um 14:37 Uhr)
|
| Sponsored Links |
|
23.09.2010, 14:28
|
|||
|
|||
|
Schreibe doch die runden ecken gleich einmal für alle browser. Also weise überall die ecken als img zu. Denn auch ältere Safari etc könnend as nicht. So machste es einmal @all und good is ^^
|
|
23.09.2010, 15:12
|
||||
|
||||
|
Durch die xml-Deklaration vor dem Doctype dürfte der IE sowieso im Quirksmodus sein. Nimm die am besten raus, der IE kann sie eh nicht.
Die Grafiken kannst du entweder für alle Browser einsetzen oder nur für den IE (IE-Stylesheet). Wenn du keine Bilder lädst, dann lädt die Seite halt schneller.
__________________
Rettet die Erde.... sie ist der einzige Planet mit Schokolade!
|
|
24.09.2010, 08:30
|
|||
|
|||
|
@jnv & nils_1309
das es so geht ist mir auch klar. ist abe rhalt nicht das was ich will @praktikant das mit dem quirksmodus ist ein guter tipp. nur wie sollte ich dem ie mitteilen das er den entsprechenden teil aus seinem css nimmt und nicht aus dem allgemeinen? denn es kommt mir vor als ob die allg. css datei die vom ie "überschreibt"...
|
|
24.09.2010, 10:23
|
||||
|
||||
|
Die Datei muss nur aufgerufen werden (nach dem normalen Stylesheet) und dann müssen alle relevanten Werte (mit selber oder höherer Wichtigkeit) überschrieben werden.
Funktioniert sicherlich so wie du es machst.
__________________
Rettet die Erde.... sie ist der einzige Planet mit Schokolade!
|
 |
| Themen-Optionen | |
| Ansicht | |
|
|
Ähnliche Themen
|
||||
| Thema | Autor | Forum | Antworten | Letzter Beitrag |
| Einbindung von frei erhältlichen Scripten - CSS Problem | DonL | CSS | 1 | 22.01.2011 16:09 |
| Problem beim ein/ausblenden von Spalten in Tabellen via CSS und JavaScript | chrisol_76 | CSS | 2 | 21.07.2008 17:37 |
| Css und Steam Problem | justinlenz | Offtopic | 3 | 27.03.2008 21:58 |
| CSS Problem | Adriana | CSS | 0 | 09.09.2006 16:51 |
| CSS Tips & Tricks | Webnauts | Ressourcen | 0 | 25.08.2006 23:04 |
Linear-Darstellung
