✔ Problem mit Browserweiche

R

retaster

Grünschnabel
Guten Morgen,

ich hab zwar schon einiges gefunden wie man Browserweichen einbindet, allerdings ignoriert mein IE (7) dies.
Ich habe ein zweispaltiges CSS basiertes layout.
Links erscheint ein Menü
Code: 
ul#Navigation   { font-size: 0.78em; float: left; width: 14em;   margin: 0; padding: 0;
und nebendran der Inhalt
Code: 
div#Inhalt.....{ margin-left: 13em; padding: 0; background-color:#F8F0D2; margin-top: 0.4em;   )

Das Problem ist, das mein Firefox
Code: 
margin-top
korrekt darstellt, der IE allerdings nicht.

Ich habe es sowohl mit einer seperaten css Datei versucht, als auch mit
Code: 
<!--[if IE]>
<style type="text/css">
#Inhalt {margin-top: 3em;}
</style>
<![endif]-->

Allerdings ohne Erfolg. Hab ich irgendwo einen Denkfehler ?
Durch die Hintergrundfarbe im Inhalt fällt das optisch unschön auf.
Hier mal meine komplette css Datei:

Code: 
body                             { color: black; background-color: white;   font-size: 100.01%; font-family: Helvetica,Arial,sans-serif;  margin: 0; padding: 1em;                                     }
 ul#Navigation           { font-size: 0.78em; float: left; width: 14em; margin: 0; padding: 0;                                            }
ul#Navigation li         { list-style: none; margin: 0; padding: 0.5em;                  }
ul#Navigation a         { display: block; padding: 0.2em; font-weight: bold;            }
a:link                           { color: #0000FF; background-color: #eee;                       }
a:visited                     { color: #666; background-color: #eee;                          }
a:hover                       { color: black; background-color: white;                        }
a:active                      { color: white; background-color: #eee;                         }
li#Navi a:link            { color: #FF0000; background-color: #eee; }
li#Navi a:visited       { color: #FF0000; background-color: #eee; }
li#Navi a:hover         { color: #FF0000; background-color: white; }
div#Inhalt                 { margin-left: 13em; padding: 0; background-color:#F8F0D2; margin-top:0.4em                  }
.color                        { color: #0000FF;                                               }
.rot               	          { color: #FF0000;                                       }
.blau                         { color: #0000FF;                                       }


Danke schon mal

Gruss
 
Hi,

benenne den Selektor wie folgt, damit es auch eine Übereinstimmung zum vorherigen Stylesheet gibt:

Code: 
<!--[if IE]>
<style type="text/css">
div#Inhalt {margin-top: 3em;}
</style>
<![endif]-->


mfg Maik
 
Oh man....DANKE....

Ich habe das mal bei google gesucht und dort war irgendwo ein Beispiel angegeben ohne das div.......

nochmals Danke

Gruss


##EDIT##

Jetzt muss ich aber doch nochmal fragen....
jetzt ignoriert der IE wieder ....
Stimmt jetzt die Schreibweise nicht ?

Code: 
<link rel="stylesheet" type="text/css" href="http://www.xy.de/styles/main_bilder.css">
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="http://www.xy.de/styles/main_bilder_ie.css">
<![endif]-->

was muss ich da jetzt ändern ?
 
Ich kann darin keinen Fehler entdecken.

Kann es vielmehr sein, dass du in der CSS-Datei das <style>-Element übernommen hast?

Dieses hat darin nichts zu suchen, und führt zur Ignoration des CSS-Codes.

mfg Maik
 
Jetzt hab ich noch eine Frage.....OK ich geb zu sie passt nicht unbedingt hierher......:-(

meine CSS Datei

Code: 
body                    { color: black; background-color: white;
                          font-size: 100.01%; font-family: Helvetica,Arial,sans-serif;
                          margin: 0; padding: 1em;                                     }

ul#Navigation           { font-size: 0.78em; float: left; width: 14em;
                          margin: 0; padding: 0;
                                                       }

ul#Navigation li        { list-style: none; margin: 0; padding: 0.5em;                  }

ul#Navigation a         { display: block; padding: 0.2em; font-weight: bold;            }

a:link    { color: #0000FF; background-color: #F8F0D2;                       }

a:visited { color: #666666; background-color: #F8F0D2;                          }

a:hover   { color: black; background-color: white;                        }

a:active  { color: white; background-color: #F8F0D2;                         }

li#Navi a:link   { color: #FF0000; background-color: #F8F0D2; }

li#Navi a:visited { color: #FF0000; background-color: #F8F0D2; }

li#Navi a:hover  {   color: #FF0000; background-color: white; }

div#Inhalt              { margin-left: 13em; padding: 0; background-color:#F8F0D2; margin-top:0.4em
                                                             }

.color                  { color: #0000FF;                                               }

.rot         	{ color: #FF0000;                                       }

.blau            { color: #0000FF;                                       }


.otab {background-color:#F8F0D2; border-bottom:1px dotted #000000; padding:5; margin:0; cell-spacing:0; font-family: Helvetica,Arial,sans-serif; font-size: 0.78em; font-weight: bold; color: #000000;}
.mtab {background-color:#F8F0D2; border:0; padding:0; margin:0; cell-spacing:0;}
.utab {background-color:#F8F0D2; border-top:1px dotted #000000; padding:5; margin:0; cell-spacing:0; font-family:Verdana; font-size:11px; color: #000000;}
.ctabu {background-color:#F8F0D2; border-bottom:1px dotted #000000; border-right:1px dotted #000000; font-family:Verdana; font-size:11px; color:#000000;}
.ctabo {background-color:#F8F0D2; border-right:1px dotted #000000; font-family:Verdana; font-size:11px; color: #000000;}
.ctabu2 {background-color:#F8F0D2; border-bottom:1px dotted #000000; font-family:Verdana; font-size:11px; color: #000000;}
.ctabo2 {background-color:#F8F0D2; font-family:Verdana; font-size:11px; color:#000000;}


Obwohl die Gif Dateien unten eine andere Background Farbe haben sollten, wird diese in den Klassen otab etc. ignoriert. Dargestellt wird der Hintergrund aus der Klasse a.active. Ich dachte, nachfolgende abweichende Formatierung überschreiben vorherige .......
 
Hast du mal einen Link zu deiner Seite?

Klingt zumindest nach einem Spezifizitäts-Problem.

mfg Maik
 
Ich weiß jetzt nicht, von welchen GIF-Dateien du in der Seite sprichst, aber wenn du Links innerhalb eines Seitenbereichs mit besagter Klasse .otab speziell formatieren willst, dann lautet der Selektor so:

CSS: 
.otab a:link { ... }
.otab a:visited { ... }
.otab a:hover { ... }
.otab a:active { ... }

mfg Maik
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück