Homepage für jeden Browser kompatibel machen

[m3ndaX]

Hallo ich habe problem:

body
{
background-color:#F00; /*Rot*/
}

#test
{
height:200px;
width:200px;
margin:400px;
background-color:#000; /*schwarz*/
}

*html #test
{
height:200px;
width:200px;
background-color:#FFF; /*weiß*/
}

*+html #test
{
height:200px;
width:200px;
background-color:#FFF; /*weiß*/
}


eigentlich sollte nun in Firefox ein roter hintergrund mit schwarzen viereck kommen, und im Internet Explorer ein roter hintergrund mit weißem viereck...

In firefox funktioniert es, aber im Internet Explorer kommt auch ein roter hintergund mit schwarzem viereck, wo liegt der fehler?

schonmal danke für die hilfe

 

[prm]

*html greift nur im IE 6 und
*+html nur im IE 7

 

[m3ndaX]

Ist *+html nicht IE 7 und höher?
was ist dann für IE 8 und IE 9?

 

[MrMurphy]

Hallo,

was ist dann für IE 8 und IE 9?

Nix.

Die Browserweichen und Conditional Comments sind weder offizieller HTML- noch CSS-Code. Von daher ist es Glückssache, ob die Programmierer entsprechende Möglichkeiten "einbauen" und ob die dann auch veröffentlicht werden. Beim IE 8 und 9 wurde so eine inoffizielle Möglichkeit meiner Kenntnis nach noch nicht entdeckt.

Die Browserweichen werden in erster Linie auch dazu genutzt, das die Seiten möglichst gleich oder zumindest ähnlich angezeigt werden. Wenn die Browser HTML / CSS richtig anzeigen sind die nicht mehr so gefragt. Das eine Seite wie von dir gewünscht in den unterschiedlichen Browsern auch unterschiedlich angezeigt werden soll ist eher unüblich. Infos findest du z. B. unter

SELFHTML: Stylesheets / CSS-basierte Layouts / Browserweichen

Gruss

MrMurphy

 

[m3ndaX]

Danke für die Antwort :)
Aber, wie mach ich dann eine Homepage, die auf dem IE 8 und IE 9 gut aussieht?
Weil ich hab eine Homepage erstellt, die Auf Firefox und Opera gut aussieht, aber auf IE fehlen buttons alles verschoben usw... wie bekomm ich das hin, dass es da auch gut aussieht?
weil ehrlichgesagt sahen bisher alle Homepages die ich gesehen habe auch auf dem IE gut aus...

 

[mermshaus]

Die neuen IE-Versionen sind eigentlich relativ nah an den anderen Browsern dran, was die korrekte Darstellung und Unterstützung von HTML und CSS angeht. Es wäre gut, wenn du dein konkretes Problem schildern könntest (etwa mit einem Link zu einer Demoseite, im Zweifel zur kompletten Seite).

 

[m3ndaX]

Also Hier die UL ist z.b. Ein Beispiel dafür...
Links auf Firefox und Rechts auf dem IE...

Wenn Jemand eine Ahnung hat, kann ich auch den Code posten oder schicken oder so...
Danke für die Hilfe ;)

 

[prm]

Die meisten Ursachen für unterschiedliche Darstellungen liegen heute weniger an den Browsern, sondern vielmehr an invalidem Quellcode.
Lass deine Seite also zunächst validieren und bereinige ggf. die Fehler.
Zum zweiten benötigt der IE einen standardkonformen Doctype damit er das CSS-boxmodell korrekt darstellt.
Poste ggf. mal einen Link zu deiner Seite und das Problem wird sich vermutlich schnell lösen lassen.

 

[m3ndaX]

Danke :)
ich hab nun mit HTML Validator for firefox die HP überprüft und habe nun 21 Fehler gefunden...
Ich werd mich wieder melden, sobald ich die fehler behoben habe... wobei ich von den meisten Fehlern die ursache nicht genau verstehe...

 

[Tronjer]

Für das Problem würden sich mehrere Möglichkeiten anbieten.

- Erstens existieren für alle (6, 7, 8, 9) IE Versionen Browserhacks. Einfach mal googeln und ausprobieren.

- Zweitens lassen sich mit Conditional Comments unterschiedliche Stylesheets einbinden. Das lohnt sich allerdings eher bei umfangreichem CSS.

- Drittens kann man in PHP mit den Funktionen $_SERVER['HTT_USER_AGENT'] oder get_browser() und einer Kontrollstruktur dynamische Tags erzeugen. Im HTML verwendet man als Klassennamen Variablen und ersetzt diese dann je nach Browserversion.

- Viertens ginge so etwas auch mit Javacript und navigator.userAgent. Wobei mit Frameworks wie jQuery dort komfortablere Möglichkeiten der CSS-Manipulation existieren.

 

[m3ndaX]

Kann mir vielleicht jemand erklären warum das falsch ist:


<ul> <a href="Index.html"><li>Home</li></a> <a href="über uns.html"><li>&Uuml;ber uns</li></a> <a href="produkte.html"><li>Produkte</li></a> <a href="kontakt.html"><li>Kontakt</li></a> <a href="anfahrt.html"><li>Anfahrt</li></a> <a href="news.html"><li>News</li></a> </ul>

mein Validator bringt einmal einen Fehler bei jedem <li> und zum schluss bei </ul>

<li> : [h=2]Document type does not allow element %1 here[/h]
</ul> :
[h=2]End tag for ... omitted, but OMITTAG NO was specified[/h]
Danke schonmal für die Hilfe :)

 

[Elroy]

Hallo.

Die Links gehören mit in deine Listenpunkte mit rein.
Innerhalb eines <ul> darf nur <li> vorkommen.

Falsch

 <a href="Index.html"><li>Home</li></a>

Richtig

 <li><a href="index.html" title="Startseite">Home</a></li>

Ich kann mir nicht vorstellen das deine Navigation so funktioniert.

Gruss
Elroy

 

[mermshaus]

Als Ergänzung zu Tronjer: Browserspezifische Hacks sollten immer das allerletzte Mittel sein. Mit korrektem HTML und CSS kommt man heutzutage in den meisten Fällen ans Ziel.

 

[m3ndaX]

Danke Elroy,
nun gibt es keinen Fehler mehr, aber nun ist nurnoch der schriftzug ein Link, und nichtmehr der Button...
Ich habe mir ein Video angeschaut, in dem beschrieben wird man soll es so machen wie ich, da es die einzigste Lösung ist, das der ganze Button ein Link ist...
Ich hoffe ihr habt dafür auch ne Lösung :)

 

[Elroy]

Das ist jetzt wieder CSS.

Damit der ganze Button anklickbar wird musst du deinem Link ein display. block mitgeben.

Lies dir auf dieser Seite Stichpunkt CSS: Experimente mit display mal den Abschnitt über display: block durch.
Mach das aber bitte in deinem CSS File und nicht wie dort gezeigt mit Inline Styles.

P.S. Das Video ist Schrott, am besten nicht mehr benutzen.

Gruss
Elroy

 

[m3ndaX]

Okay Danke :)
Ja wie gesagt, ist meine erste Homepage, und wenn ich google und etwas find probier ich es halt aus, und wenn es geht freu ich mich :)
Aber für verbesserungen bin ich immer offen :)

Noch die Letzte Frage, dann hab ich alle 21 Fehler beseitigt :) :
[h=2]Element ... undefined[/h]Das kommt einmal bei meinem <nav> bereich und einmal bei einer schrift <h10> an was liegt das?

 

[Tronjer]

<h10> gibt es nicht und <nav> ist ein HTML5 Element.

 

[prm]

<nav> ist ein Element von html 5, was m.W. noch kein offizieller Standard ist und deshalb von den Validatoren beanstandet wird.
Verwende dafür einen id mit Bezeichnung deiner Wahl, z.B.

<ul id="nav">

und definiere in CSS:

 #nav {styleangaben}

Überschriften gibt es nur von h1 bis h6.

 

[m3ndaX]

Perfekt, ihr seit die Besten Danke euch :)
und schon sieht meine HP auf dem IE auch so aus wie auf Firefox Opera usw :)
DANKE! :)