Browserweiche und css für mozilla und co?

sunshine · 26. Juni 2008

Hallo zusammen.

Ich habe eine Seite im drei Spalten-Layout und Kopfbanner erstellt. Dabei habe ich die einzelnen Bereich mit div's positioniert.
Nun läßt sich das Ergebnis nicht überall gleich schön ansehen. In einigen Browsern zerschießt es das Layout ganz in manchen ist es gar nicht zu sehen...
Das Stichwort ist - so habe ich schon rausgefunden - heißt dabei wohl Browserweiche (Conditional Comments). Wie man diese einbinden muss, habe ich gefunden .

Für jeden berücksichtigten Browser solch ein Syntax:

Nun verstehe ich aber nicht, wie ich die speziellen css-Dateien anpassen kann....(Brett vorm Kopf?!?) Ich meine, gibt es für die einzelnen Browser andere "Keywords" innerhalb der Css. Oder muss ich mir sämtliche Browser zulegen und dann das Layout per Hand anpassen?

Ich weiß im Moment überhaupt nicht, wie ich das (möglichst schnell) umsetzten kann....

Danke Euch, sunshine
(meine css-Datei lautet...

body {
background-color: #EAEAEA;
font-family: Sans-serif, Trebuchet MS, Arial, Helvetica;
padding: 0px;
margin: 0px;
min-width: 40em; /* Mindestbreite verhindert Umbruch und Anzeigefehler in modernen Browsern */
}

p, td, dd {
margin-top:12px; margin-bottom:12px;
font-size:10pt;
line-height:1.35;
color: #000000;
font-family: "Sans Serif", "Trebuchet MS", Arial, Helvetica, san-serif;
}

#wrap {/* Bereichsdefinition (zentrierte Allgemeinausrichtung)*/
width: 900px;
margin: 0 auto;
text-align: left;
}

#kopf {/* Bereichsdefinition für Logo/Banner*/
background-color:#FFFFFF;
width: 900px;
height: 105px;
text-align:right;
margin: 15px;
}

#navigation_seite { /* Bereichsdefinition */
font-size: 75%;
float: left;
width: 220px;
margin-left: 15px;
margin-top: 5px;
padding: 0;
background-color:#EAEAEA;
}

#navigation_seite h4, a {
font-size: 85%;
line-height:1.0;
color: #0318FE;
text-decoration: none;
}

#navigation_seite p {
font-size: 75%;
line-height:1.0;
color: #000000;
text-decoration: none;}

#hauptfenster {/* Bereichsdefinition */
margin-left: 235px;
margin-right: -65px;
margin-top: 0px;
background-color:#FFFFFF;
width: 495px;
float: left;
padding: 15px;
}

#hauptfenster a {
color: #0318FE;
text-decoration:none;
}

#hauptfenster a:hover, #kontakt a:hover, #downloads a:hover {
color: #0318FE;
text-decoration:underline;
}

#kontakt {
font-size: 75%;
float: right;
width: 220px;
margin-right: -65;
margin-top: 5px;
padding: 5;
background-color:#FFFFFF;
}

#downloads {
padding: 10px;
background-color:#FFFFFF;
float: right;
height: 75%;
width: 220px;
margin-right: -65;
margin-top: 20px;
padding: 5px;
}
#kontakt h1, #downloads h1{
font-size:10pt;
margin-bottom:14px;
margin-top:10px;
margin-left:5px;
line-height:1.2;
color: #000000
padding: 5px;
}

#kontakt p, #downloads p {
margin-left:5px;
text-decoration:none;
font-size:9pt;
line-height:1.2;
}

#kontakt a, #downloads a{
margin-left:5px;
text-decoration:none;
font-size:9pt;
line-height:1.2;
color: #0318FE;
}

#downloads li {
list-style-type: none;
font-size:9pt;
line-height:1.2;
color: #000000;
}

p.copyright {
padding-top: 20px;
font-size: 9pt;
text-align: right;}

div {clear:both;}

dt {
font-size:10pt;
font-weight: bold;
font-family: san-serif, Trebuchet MS, Arial, Helvetica;
line-height:1.35;
color: #000000;}

ul {
list-style-type: circle;
font-size:10pt;
line-height:1.35;
color: #000000;
font-family: "Sans Serif", "Trebuchet MS", Arial, Helvetica, san-serif;}

caption {
text-align: center;
line-height: 1;
font-weight: bold;
font-style: italic;
font-size: 18pt;
}

thead, tfoot {
font-weight: bold;
}

p.abb {margin-top:0; margin-bottom:12px;
font-size:10pt;
line-height:1.35;
color: #000000;
font-family: "Sans Serif", "Trebuchet MS", Arial, Helvetica, san-serif;
clear:left;
text-align:left;}

p.foto {margin-top:0; margin-bottom:12px;
font-size:10pt;
line-height:1.35;
color: #000000;
font-family: "Sans Serif", "Trebuchet MS", Arial, Helvetica, san-serif;
}

.merke {
font-size:8pt;
font-style:italic;
line-height:1.35;
color: #000000;
font-family: "Sans Serif", "Trebuchet MS", Arial, Helvetica, san-serif;
}
}
.mehr, .zurueck {font-size:9pt;
line-height:1.35;
color: #000000;
font-family: "Sans Serif", "Trebuchet MS", Arial, Helvetica, san-serif;
}

.top {
font-size: 7pt;
line-height:0.5;
text-align:right;
color: #000066;
font-family: Arial, Helvetica, san-serif;
}

.anmerkung {
font-size: 10pt;
font-style:italic;
line-height:1.35;
color: #4D65A0;
font-family: Sans-serif, Trebuchet MS, Arial, Helvetica;
}

.noprint {margin-top:12px; margin-bottom:12px;
font-size:10pt;
line-height:1.35;
color: #4D65A0;
font-family: "Sans Serif", "Trebuchet MS", Arial, Helvetica, san-serif;
}

.images {
float:left;}

img {margin-right:10px;
margin-bottom:10px;
margin-top:10px;
font-size:10pt;
line-height:1.35;
color: #4D65A0;
font-family: "Sans Serif", "Trebuchet MS", Arial, Helvetica, san-serif;
}
img_alt {padding:20px align=bottom}

h1 {font-size:12pt; margin-bottom:14px; line-height:1.2;color: #000000}
h2 {font-size:11pt; margin-bottom:13px; margin-top:26px; line-height:1.2;color: #000000}
h3 {font-size:10pt; margin-bottom:12px; margin-top:24px; line-height:1.2;color: #000000; margin-top:0;}
h4 {font-size:10pt; margin-bottom:6px; margin-top:11px; line-height:1.2;color: #000000; text-decoration:underline}
h5 {font-size:10pt; margin-bottom:0px; margin-top:0px; line-height:1.2;color: #000000;font-style:italic}
li {font-size:10pt; line-height:1.35;color: #000000}
ol {font-size:10pt; line-height:1.35;color: #000000;style="margin-right:2em";style="margin-left:2em"}
a {text-decoration:none; font-weight:none; font-size:9pt; line-height:1.2;}

hr{
size:5px;
color:#FF0000;
width:75%;
align:center;}

a.info {text-decoration:none;color:red;font-weight:normal;}
a.info:hover {text-decoration:none; color:red;}
a.info span {visibility:hidden;position:absolute;padding:3px;font-weight:normal;text-decoration:none;width:550px;}
a.info:hover span {visibility:visible;background-color:#CFCFCF;font-size:10pt;color:#000000;text-decoration:none;}
________________________________________________
Es wäre schön, wenn mir jemand mal sanft auf den Hinterkopf hauen könnten, vielleicht fällt dann der Groschen!

Foster · 26. Juni 2008

Hi, meist ist es so, dass verschiedene Browser spezielle Befehle etwas unterschiedlich oder gar falsch interpretieren.
So kann Opera beispielsweise mit der CSS-Eigenschaft overflow-x nichts anfangen, während der IE7 einige Javascript-Slider falsch verarbeitet, der IE6 dagegen mit CSS schlecht klarkommt und oft Mist baut.
So habe ich in meinem jüngsten Projekt auch das Problem gehabt, dass der ältere IE6 bis auf das CCS-Dropdownmenü soweit alles ganz gut darstelte, der IE7 dann was bei meinem JS-Slider falsch machte und auch einige Positions-Angaben über CSS anders angezeigt wurden.
Es musste also, wie bei dir eine Browserweiche her.

Wie du dir inzwischen aber vielleicht vorstellen kannst, gibt es keine Allzweckwaffe in Sachen Browserweichen. Jeder Browser hat so seine Macken und es gilt sie ganz einfach alle per Hand auszubessern. Am besten also auch die populärsten Browser IE, Firefox und Opera runterladen und immer schauen, ob alles korrekt angezeigt wird, wobei eigentlich immer nur die Internet-Explorer-Browser einige Schwierigkeiten bereiten.

Browserweiche und css für mozilla und co?

Jetzt mitmachen!

Teilen