css einstellungen für verschiedene browser
Vetinari
- css
0 Ingo Turski0 Antipitch
hallo,
habe ein paar probleme mit einer navigationsleiste und mir deshalb den folgenden thread angesehen:
http://de.selfhtml.org/css/layouts/navigationsleisten.htm
dort fand ich einige gute tipps, welche ich umgesetzt habe, aber ich bekomme es nicht hin, dass die website sowohl im ie als auch im firefox gut aussieht. hier mal der link:
http://www.martinlanius.de/test.html
und hier der css teil für das script test.html:
div#Rahmen {
width: 48.1em;
padding-left: 0em;
border: 0px;
background-color: #014286;
}
* html div#Rahmen { /* Korrektur fuer IE 5.x */
width: 47.9em;
w\idth: 47.9em;
}
div#Rahmen div {
clear: left;
}
ul#Navigation {
margin: 0; padding: 0;
font: normal 100% Verdana,Arial,Helvetica;
text-align: center;
}
ul#Navigation li {
list-style: none;
float: left; /* ohne width - nach CSS 2.1 erlaubt */
position: relative;
margin: 0em; padding: 0;
}
* html ul#Navigation li { /* Korrektur fuer den IE 5 und 6 */
margin-bottom: -0.1em;
}
ul#Navigation a, ul#Navigation span {
display: block;
width: 104.8px; /* Breite den in li enthaltenen Elementen zuweisen */
padding: 0em 0em;
text-decoration: none; font-weight: bold;
border: 1px solid white;
border-left-color: white; border-top-color: white;
color: white; background-color: #4195DE;
}
* html ul#Navigation a, * html ul#Navigation span {
width: 79.4pt; /* Breite Block nach altem MS-Boxmodell für IE 5.x */
w\idth: 79.4pt; /* korrekte Breite Block fuer den IE 6 im standardkonformen Modus */
}
ul#Navigation a:hover {
color: white; background-color: #3154A2;
}
span#bild {
margin-left: 0.2em;
}
mal abgesehen davon, dass die menüleiste in beiden browsern leicht unterschiedlich aussieht, rutscht das kleine bild links von der navigation im firefox zu weit nach links. deshalb hatte ich margin-left: 0.2em angegeben. hilft aber nix ...
gruss, martin
Hi,
ich bekomme es nicht hin, dass die website sowohl im ie als auch im firefox gut aussieht. hier mal der link:
http://www.martinlanius.de/test.html
Du solltest einen aktuellen DOCTYPE angeben und vor allem einen, der die Browser in den standardkonformen Modus versetzt, d.H. bei HTML Transitional mit Angabe der DTD.
* html div#Rahmen { /* Korrektur fuer IE 5.x */
width: 47.9em;
w\idth: 47.9em;
}
Dir ist klar, dass die zweite Angabe überflüssig ist, solange Du den IE6 in den quirks mode schickst?
* html ul#Navigation a, * html ul#Navigation span {
width: 79.4pt; /* Breite Block nach altem MS-Boxmodell für IE 5.x */
w\idth: 79.4pt; /* korrekte Breite Block fuer den IE 6 im standardkonformen Modus */
}
und hier ebenfalls. Abgesehen davon ist pt sehr ungeeignet für die Bildschirmdarstellung.
freundliche Grüße
Ingo
hallo,
das mit der pt-angabe war zu versuchszwecken, da ich die größen nicht pixelgenau hinbekommen habe, weder mit em nochmit px.
habe das script jetzt mal mit:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
"http://www.w3.org/TR/REC-html40/strict.dtd">
versehen. müsste so ok sein, oder?
die probleme bestehen aber weiter ...
mir fiel noch auf, dass sich bei mir zwei angaben 'beißen':
im script test.html habe ich das bild mit align="left" im <img> tag versehen. das bild soll aber per <span> anweisung in der css mit: margin-left: 0.2em; nach rechts verschoben werden. wenn ich im <img> tag das align="left" rausnehme, bekomme ich unter dem bild plötzlich einen rand, d.h. das <td> tag wird höher. keine ahnung, was da passiert ...
gruss, martin
ach ja, hier noch der link zu o.g. effekt:
http://www.martinlanius.de/test.html
die korrigierte angabe in der css datei lautet:
* html ul#Navigation a, * html ul#Navigation span {
width: 104.5px; /* Breite Block nach altem MS-Boxmodell für IE 5.x */
w\idth: 104.5px; /* korrekte Breite Block fuer den IE 6 im standardkonformen Modus */
}
gruss, martin
Hallo
ach ja, hier noch der link zu o.g. effekt:
http://www.martinlanius.de/test.htmldie korrigierte angabe in der css datei lautet:
* html ul#Navigation a, * html ul#Navigation span {
width: 104.5px; /* Breite Block nach altem MS-Boxmodell für IE 5.x */
w\idth: 104.5px; /* korrekte Breite Block fuer den IE 6 im standardkonformen Modus */
}
Wie kommst du darauf, dass ein Pixel teilbar ist? Du kannst relative Einheiten wie z.B. pt, em, % teilen. Auch absolute Angaben wie cm oder mm lassen sich teilen.
Aber ein Pixel ist ein Pixel ist ein Pixel. Schluss, Punkt, aus (sozusagen).
Tschö, Auge
Hi,
die korrigierte angabe in der css datei lautet:
* html ul#Navigation a, * html ul#Navigation span {
width: 104.5px; /* Breite Block nach altem MS-Boxmodell für IE 5.x */
w\idth: 104.5px; /* korrekte Breite Block fuer den IE 6 im standardkonformen Modus */
}
Da Du den IE jetzt nicht mehr in den quirks mode schickst, musst Du hier (wie auch bei den anderen Hacks) schon den korrekten Wert angeben.
Und was das Bild betrifft: der Abstand dürfte von der reservierten Unterlänge herrühren. Definiere im CSS für das Bild display:block oder vertical-align:bottom.
freundliche Grüße
Ingo
Hallo
habe das script jetzt mal mit:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
"http://www.w3.org/TR/REC-html40/strict.dtd">
versehen. müsste so ok sein, oder?
Nein. Nicht rumdoktern sondern erst nachdenken und dann handeln.
im script test.html habe ich das bild mit align="left" im <img> tag versehen.
Wenn du die Strict-Variante von HTML verwendest, stehen dir Elemente und Attribute zur (optischen) Auszeichnung (wie 'align="left"') nicht zur Verfügung. Wenn du sie dennoch verwenden willst, musst du auf HTML Transitional ausweichen.
zum Nachlesen:
SELFHTML: Dokumenttyp-Deklaration zeigt die verschiedenen Varianten, die jeweilige Notation und grundlegende Hinweise zu den Unterschieden. SELFHTML: HTML-Varianten geht mehr in die Details.
Tschö, Auge
Hi Ingo,
* html div#Rahmen { /* Korrektur fuer IE 5.x */
width: 47.9em;
w\idth: 47.9em;
}
Dir ist klar, dass die zweite Angabe überflüssig ist, solange Du den IE6 in den quirks mode schickst?
Mich würde mal interessieren, was die zweite anweisung überhaupt bewirkt.
Hab das jetzt schon ein Paar mal gesehen, aber noch keine beschreibung, was das bewirkt.
Auch CSS font angaben wie
font: 13px/24px "Lucida Grande", Lucida, Verdana;
^^^^^^^^^
Kennst du eine Seite, wo diese angaben erklärt werden?
Grüße,
Engin
GYRO
Grütze .. äh ... Grüße!
font: 13px/24px "Lucida Grande", Lucida, Verdana;
> ^^^^^^^^^
> Kennst du eine Seite, wo diese angaben erklärt werden?
[Ich kenne eine](http://jendryschik.de/wsdev/einfuehrung/eigenschaften/schrift#font) ;)
Cü
Kai
--
[Der vertuschte Gefahrstoff: Dihydrogenmonoxid](http://www.dhmo.de/fakten.html)
ie:{ fl:( br:< va:) ls:? fo:| rl:? n4:° ss:{ de:] js:| ch:? mo:| zu:|
Hi Kai,
font: 13px/24px "Lucida Grande", Lucida, Verdana;
> > ^^^^^^^^^
> > Kennst du eine Seite, wo diese angaben erklärt werden?
>
> [Ich kenne eine](http://jendryschik.de/wsdev/einfuehrung/eigenschaften/schrift#font) ;)
Die kenn ich doch auch. ;-)
Hab noch nie line-height benützt, werde ich gleich mal beschnuppern.
Bleibt noch die Frage, warum man sowas
> > width: 47.9em;
> > w\idth: 47.9em;
macht.
Grüße,
Engin
GYRO
--
[Hang the DJ](http://www.myvideo.de/watch/433794) | [Team Vestax - Limited Edition](http://nimmet.de/nimmet-bilder/vestax.JPG)
Grütze .. äh ... Grüße!
Bleibt noch die Frage, warum man sowas
width: 47.9em;
w\idth: 47.9em;macht.
Das ist allerdings _so_ sinnlos. Üblicherweise setzt man sowas ein, wenn man alten Browsern wie IE 5 eine /andere/ Breite geben will als allen neueren Browsern, aber mit gleichen Werten ist es einfach nur hyperliquid.
Cü
Kai
Hi Kai,
Bleibt noch die Frage, warum man sowas
width: 47.9em;
w\idth: 47.9em;macht.
Das ist allerdings _so_ sinnlos. Üblicherweise setzt man sowas ein, wenn man alten Browsern wie IE 5 eine /andere/ Breite geben will
Dann wäre das Rätsel ja endlich gelöst. ;-)
Ich werd mir mal dieses Multiple IE auf den Rechner packen.
IE 6 hab ich mittlerweile halbwegs im Griff, jetzt muss ich mir mal den IE 5 zur Brust nehmen.
Grüße,
Engin
GYRO
Hi,
Bleibt noch die Frage, warum man sowas
width: 47.9em;
w\idth: 47.9em;macht.
Das ist allerdings _so_ sinnlos. Üblicherweise setzt man sowas ein, wenn man alten Browsern wie IE 5 eine /andere/ Breite geben will
Dann wäre das Rätsel ja endlich gelöst. ;-)
ein Rätsel war das eigentlich nie. In Deinem Anfangscode hattest Du doch die Kommentare stehen gelassen:
width: 79.4pt; /* Breite Block nach altem MS-Boxmodell für IE 5.x */
w\idth: 79.4pt; /* korrekte Breite Block fuer den IE 6 im standardkonformen Modus */
Diese hättest Du vielleicht auch lesen (und verstehen) sollen...
Über den Star-HTML-Hack wird das nur den IEs vorgesetzt und über den Tan-Hack die Angabe für den 6er im standardkompatiblen Modus überschrieben - was natürlich normalerweise mit dem korrekten Wert für alle übrigen Broser erfolgen sollte.
Ich werd mir mal dieses Multiple IE auf den Rechner packen.
IE 6 hab ich mittlerweile halbwegs im Griff, jetzt muss ich mir mal den IE 5 zur Brust nehmen.
Du vergißt den 7er. Aber der verhält sich bei einem entsprechendem DOCTYPE mit etas Glück wie andere standardkonforme Browser.
freundliche Grüße
Ingo
Hi Ingo,
width: 47.9em;
w\idth: 47.9em;
Dann wäre das Rätsel ja endlich gelöst. ;-)ein Rätsel war das eigentlich nie. In Deinem Anfangscode hattest Du doch die Kommentare stehen gelassen:
width: 79.4pt; /* Breite Block nach altem MS-Boxmodell für IE 5.x */
w\idth: 79.4pt; /* korrekte Breite Block fuer den IE 6 im standardkonformen Modus */
Wenn man sich diese beispiele ansieht wirft das ja ganz andere fragen
auf, mir war nur nicht in den Sinn gekommen, das das beispiel des Op
völlig sinnlos ist.
Was soll man denn auch unter
width: 79.4pt; /* Breite Block nach altem MS-Boxmodell für IE 5.x */
w\idth: 79.4pt; /* korrekte Breite Block fuer den IE 6 im standardkonformen Modus */
verstehen, zweimal die exakt gleiche angabe für width.
Diese hättest Du vielleicht auch lesen (und verstehen) sollen...
Das stimmt allerdings.
Über den Star-HTML-Hack wird das nur den IEs vorgesetzt und über den Tan-Hack die Angabe für den 6er im standardkompatiblen Modus überschrieben -
Ich hätte wohl doch mal das Kapitel CSS-Browserweichen zum Ausschließen älterer Browser durchlesen sollen,
hatte ich bis Heute versäumt.
Ich werd mir mal dieses Multiple IE auf den Rechner packen.
IE 6 hab ich mittlerweile halbwegs im Griff, jetzt muss ich mir mal den IE 5 zur Brust nehmen.Du vergißt den 7er. Aber der verhält sich bei einem entsprechendem DOCTYPE mit etas Glück wie andere standardkonforme Browser.
Nein, nicht vergessen, hab nur leider keinen zur Hand, ab und zu kommt mir mal ein IE 7
unter die Finger, da versuche ich schnell offensichtliche fehler an Ort und Stelle
zu beheben.
Kommt Zeit kommt IE 7.
Grüße,
Engin
GYRO
hallo,
habe ein paar probleme mit einer navigationsleiste und mir deshalb den folgenden thread angesehen:
http://de.selfhtml.org/css/layouts/navigationsleisten.htm
dort fand ich einige gute tipps, welche ich umgesetzt habe, aber ich bekomme es nicht hin, dass die website sowohl im ie als auch im firefox gut aussieht. hier mal der link:
http://www.martinlanius.de/test.html
Hi Martin,
wo in deinem jetzigen code der Fehler liegt, ist etwas zeitaufwendig zu sagen. Schmeiß erstmal alle Tabellen raus (valides XHTML / CSS: keine Tabellen für Designzwecke!!!). Dieser code würde mit den richtigen stylings reichen, um alles darzustellen.
<div id="navi">
<ul>
<li><a href="#Beispiel">Startseite</a></li>
<li><a href="#Beispiel">Produkte</a></li>
<li><a href="#Beispiel">Neu</a></li>
<li><a href="#Beispiel">Alabaster</a></li>
<li><a href="#Beispiel">Über uns</a></li>
<li><a href="#Beispiel">Kontakt</a></li>
</ul>
</div>
Für die Zentrierung in der Seite gibst du dem div feste Breite und setzt margin left und right auf auto. Und gib ihm das komplette Hintergrundbild oder setz dein Logo vielleicht in ein zusätzliches div vor die ul, damit du es evtl. verlinken kannst. Ach ja, das Javascript, warum benutzt du das?
Gruß
Antipitch
Hallo
... Ach ja, das Javascript, warum benutzt du das?
Damit eine Ausklappnavigation (die momentan HTML-seitig allerdings nicht notiert ist) auch im MSIE < 7 funktioniert.
Tschö, Auge
hallo,
habe den rat von antipitch befolgt und alle tabellen rausgeworfen, die bilder zu einem hintergrundbild zusammengefasst und meine navi draufgesetzt. tolle sache - siehe hier:
http://www.martinlanius.de/test2.html
aber nur mit dem ie! im firefox fehlt das hintergrundbild und eine tabelle, welche darunterhängt und mittig gesetzt ist, rutscht neben die navi :-(
hier noch mal die komplette neue css:
div#Top {
background-image: url(images/alabaster_top.jpg);
width: 765px;
margin-left: auto;
margin-right: auto;
margin-top: 0;
border: 0;
}
div#Block {
width: 643px;
margin-left: 122px;
margin-top: 91px;
border: 0;
}
ul#Navigation {
margin: 0;
padding: 0;
text-align: center;
}
ul#Navigation li {
list-style: none;
float: left; /* ohne width - nach CSS 2.1 erlaubt */
position: relative;
margin: 0;
padding: 0;
}
ul#Navigation a {
display: block;
width: 105px; /* Breite den in li enthaltenen Elementen zuweisen */
padding: 0;
text-decoration: none;
font: bold 13px Verdana,Arial,Helvetica;
border: 1px solid white;
border-left-color: white; border-top-color: white;
color: white; background-color: #4195DE;
}
* html ul#Navigation a, * html ul#Navigation span {
width: 105px; /* Breite Block nach altem MS-Boxmodell für IE 5.x */
w\idth: 105px; /* korrekte Breite Block fuer den IE 6 im standardkonformen Modus */
}
ul#Navigation a:hover {
color: white; background-color: #3154A2;
}
gruss, martin
Yerf!
hallo,
habe den rat von antipitch befolgt und alle tabellen rausgeworfen, die bilder zu einem hintergrundbild zusammengefasst und meine navi draufgesetzt. tolle sache - siehe hier:
http://www.martinlanius.de/test2.html
aber nur mit dem ie! im firefox fehlt das hintergrundbild und eine tabelle, welche darunterhängt und mittig gesetzt ist, rutscht neben die navi :-(
Das mit der Tabelle liegt an dem float:left der <li>s. Gib der Tabelle ein clear:left um das zu beheben.
Und bei dem Hintergrundbild war ich erst selbst am rätseln, da mir mein FireBug das Div nicht gehighlighted hat, als wär es nicht da... Als ich ihm dann einen Rahmen gab, war es plötzlich inklusive Hintergrund da. Klingt verdächtig nach Collapsing Margins dachte ich mir da... und tatsächlich: gib nicht dem div#block den margin-top, sondern dem div#top ein padding-top, dann geht es.
Gruß,
Harlequin
hallo,
danke für alle tipps! jetzt habe ich es fast...
der firefox braucht für den unteren container (orange) ein margin-top, damit dieser nicht hoch hinter die navi rutscht.
hier mal die css angabe zu dem <div> Inhalt:
div#Inhalt {
width: 765px;
background-color: orange;
margin-left: auto;
margin-right: auto;
margin-top: 18px;
min-height: 200px;
border: 0;
}
damit sähe es im firefox gut aus, während im ie der container Inhalt jetzt nach unten rutscht, was natürlich nicht sein soll...
und hier mal der link zum ergebnis ohne margin-top: 18px;
www.martinlanius.de/test2.html
wahrscheinlich brauche ich nur noch irgendwo die richtige padding angabe, oder eine anweisung, welche nur für den ie bestimmt ist - aber wie und wo genau?
gruss, martin
Yerf!
wahrscheinlich brauche ich nur noch irgendwo die richtige padding angabe, oder eine anweisung, welche nur für den ie bestimmt ist - aber wie und wo genau?
Hm, ich würde hier das margin-top glaub ich einfach vor dem IE verstecken:
#Top>#Inhalt{
margin-top:18px;
}
Den > Selektor kann der IE 6 nicht und ignoriert diese Regel. Allerdings müsste man das ganze mal im IE7 testen, da hab ich gerade keinen zur Hand. Notfalls müsste man das über Conditional Comments lösen, da kann man dann genau angeben, für welche IE-Versionen das sein soll.
Gruß,
Harlequin
danke, so was hatte ich gesucht ...
komisch allerdings, dass der container Top im firefox jetzt trotz margin-top: 0; nicht (mehr) am oberen bilschirmrand hängt, sondern 4-5 pixel darunter ...
gruss, martin
Yerf!
komisch allerdings, dass der container Top im firefox jetzt trotz margin-top: 0; nicht (mehr) am oberen bilschirmrand hängt, sondern 4-5 pixel darunter ...
Das liegt daran, dass der Body noch ein Margin von 8px hat. Wirf mal die veralteten Attribute aus dem Body-Tag raus und steuer das über CSS:
body{margin:0}
Kleiner Tipp noch: hol dir mal für den Firefox den Firebug, damit kann man sehr gut eine Seite analysieren (damit hab ich auch schon die ganze Zeit gesucht). Für den IE gibts auch was, nennt sich IE Developer Toolbar und ist von MS, ich hab blos grad keinen Link parat.
Gruß,
Harlequin
Kleiner Tipp noch: hol dir mal für den Firefox den Firebug, damit kann man sehr gut eine Seite analysieren (damit hab ich auch schon die ganze Zeit gesucht).
Gerade wenn es um CSS geht, gefällt mir besser Web Developer, damit kannst du live das CSS bearbeiten und die Veränderungen sehen.
Struppi.
Jaja, https://addons.mozilla.org/de/firefox/addon/60
Struppi.
hallo leute,
habe jetzt mal die seiten hochgeladen und siehe da: schon wieder ein neuer effekt: im ie rutscht alles in die linke ecke. habe jetzt mal alle margin anweisungen für <body> rausgenommen, da ja der container Top den gesamten inhalt aufnimmt, aber keine änderung.
die site setzt sich jetzt aus drei php dateien zusammen: index_neu.php und per include: header_neu.php und footer_neu.php
hier der link: www.alabaster-world.de/index_neu.php
bitte keinen weiteren links folgen, da es nur um die index_neu.php geht.
gruss, martin
hier der link: www.alabaster-world.de/index_neu.php
ich hab den Thread nicht verfolgt und weiß daher nicht ob dir das schon gesagt wurde, aber die Seite ist im Quirksmodus, was bedeutet das der IE im fehlerhaften Boxmodell ist und die Abstände falsch berechnet. Darüber hinaus zeigt die Fehlerkonsole im FF zwei CSS Fehler an.
Darüber hinaus hat die Seite aber noch mehr Fehler
Struppi.
Yerf!
habe jetzt mal die seiten hochgeladen und siehe da: schon wieder ein neuer effekt: im ie rutscht alles in die linke ecke. habe jetzt mal alle margin anweisungen für <body> rausgenommen, da ja der container Top den gesamten inhalt aufnimmt, aber keine änderung.
Dese Seite hat auch einen anderen Doctype, als die Testseite. Durch HTML Transitional ohne DTD-Angabe landet der IE im Quirksmode, dadurch kann er keine Zentrierung per margin:auto.
hier der link: www.alabaster-world.de/index_neu.php
bitte keinen weiteren links folgen, da es nur um die index_neu.php geht.
Die Seite zeigt bei der Validierung (ich hab im Firefox noch das Tidy-Plugin, das automatisch HTML-Fehler anzeigt) kommen auch noch 21 Meldungen...
Scheinen aber nur 4 Fehler zu sein: <style type=text/css> der Wert hinter Type muss in Anführungszeichen. Dann meckert er noch am <embed> und <bgsound> rum (gehören nicht zum HTML-Standard) und in einem Link darf kein <hr> sein.
Gruß,
Harlequin
die guten alten fehler beim paste and copy ;-)
klar, der doctype war dabei verlorengegangen ...
jetzt sieht es gut aus!
danke, martin
Yerf!
Gerade wenn es um CSS geht, gefällt mir besser Web Developer, damit kannst du live das CSS bearbeiten und die Veränderungen sehen.
Die hab ich auch drauf, benutze sie aber kaum noch, da Firebug mir persönlich eher zusagt. Das live editieren geht damit ebenfalls.
Gruß,
Harlequin
hallo leute,
habe jetzt mal die seiten hochgeladen und siehe da: schon wieder ein neuer effekt: im ie rutscht alles in die linke ecke.
wenn ich alle margin anweisungen für <body> rausnehme, da ja der container Top den gesamten inhalt aufnimmt und darstellt, werden laut ie developer tool irgendwelche margin-werte für <body> gesetzt top: 15px, left: 10px, bottom: 15px usw.
wenn ich margin-top auf 0 setze, wird dies auch ausgeführt, aber margin left und right auf auto bríngt keinen erfolg ...
die site setzt sich jetzt aus drei php dateien zusammen: index_neu.php und per include: header_neu.php und footer_neu.php
hier der link: www.alabaster-world.de/index_neu.php
bitte keinen weiteren links folgen, da es nur um die index_neu.php geht.
gruss, martin
http://www.martinlanius.de/test2.html
aber nur mit dem ie! im firefox fehlt das hintergrundbild und eine tabelle, welche darunterhängt und mittig gesetzt ist, rutscht neben die navi :-(
Hi Martin,
sieht doch schon gut aus.
1. Das äußere div ist im Grunde noch eins zuviel. Du kannst es aber auch als Zentrierungscontainer für deine Navi und alle noch folgenden Elemente der Seite benutzen. Dann gibtst du halt nur dem das margin left und right auto. Hättest du die Tabelle (die du ja nicht benutzen wirst ;-) unterhalb der Navi aber innerhalb von div "top" mit den neuen margins notiert, wäre sie auch in der Mitte.
2.Gib dem div mit dem Hintergrundbild eine min-height Angabe, dann zeigt es auch Firefox.
Gruß
Antipitch