Homepage nicht kompatibel mit IE

[Meister]

Hallo,
über dei Google-Suche kam ich hier her, da ich gern in der Freizeit programmiere bzw. zur Zeit eher noch mit HTML gestalte und auch gern Internetseiten erstelle, bin ich nun Mitglied hier :)

Ich habe nun eine Homepage erstellt, mit Chrome, Safari, Firefox geht alles super. Nur bei dem doofen IE wird es anders angezeigt. Da es eine Geschäfts-Homepage ist, soll sie für alle Kunden und potenziellen Kunden natürlich gehen, da benutzt nun Mal jeder einen anderen Browser, so dass ich gezwungen bin, dass zu richten, damit man es auch im IE vernünftig öffnen kann.

Laut Google-Suche weiß ich nun, dass der IE mit den CSS-Codes manchmal Probleme hat.

Hier der Link zur Seite:
EST- Speer GmbH

Es geht um die Navigation, sie ist in einem Div-Container. Beim IE ist zwischen den einzelnen Grafiken eine Leerzeile und somit verrutscht die letzte Grafik in die nächste Zeile :(


Mit freundlichen Grüßen
Josch

 

[threadi]

Bei den Fehlern im HTML-Code kein Wunder:
[Invalid] Markup Validation of [url]http://est-speer.de/ - W3C Markup Validator[/URL]
Wenn der HTML-Code sauber ist, hat auch der IE seltens Probleme mit CSS, und wenn dann ist es nur spezielles Zeug wie box-shadow oder border-radius (natürlich bezogen auf eine aktuelle Version des IE10).

Die Bilder, die Du einbindest, sind auch viel zu groß. Bei mir braucht die Seite trotz schnellem DSL fast eine Minute zum Laden. Das solltest Du dringend überarbeiten.

 

[Cheffchen]

Hallo,

ok ich bin jetzt mal ganz ganz doll lieb zu dir.

Menü als bilder ist nicht ganz so schön, als Menü würde ich dir ein ul li liste empfehlen da dies auch von Suchmaschienen als Menü erkannt wird.
Die bilder sind etwas groß ca. 3´000px große bilder um 100px großes bild an zu zeigen ist doch nicht ganz so optimal und macht kein glücklich, lieber ein schicken zoom effekt ist besser.

Es geht um die Navigation, sie ist in einem Div-Container. Beim IE ist zwischen den einzelnen Grafiken eine Leerzeile und somit verrutscht die letzte Grafik in die nächste Zeile

ne der macht ein rahmen rum weil bilder verlinkt hast die wohl das Menü darstellen sollen. (eure kunden haben gute augen wa?)

Die sache mit Tabellen und design fang ich jetzt mal nicht an weil ich ja gschrieben habe bin ganz ganz doll lieb zu dir.

Cheffchen

 

[PumkinPatrick]

Zu den Bildgrößen etc. wurde ja alles gesagt.
Die Rahmen bekommst du weg in dem du:

a img 
{ border: none; }

vergibst...

 

[Cheffchen]

@PumkinPatrick

Hallo,
Ich finde das super das dich beteiligst und dein Wissen mit unwissenden teilst, denn so lernt man ja auch mit dazu.

Aber selbst wenn das jetzt blöd klinkt, glaube wir haben die eine css Zeile mit Absicht nicht gesagt, zumindest ich.

Wie er das gemacht hat, ist leider nicht nur total falsch, sondern hat nur Nachteile für ihn. Deswegen wollte zumindest ich ihn in die richtige Richtung schubsen.

Aber rein technisch hast natürlich recht, das man so den Rahmen gelöscht bekommt.

Cheffchen

 

[PumkinPatrick]

@Cheffchen


Naja ich stimme dir ja zu aber, was an deinem Beitrag ist denn Hilfe zur Selbsthilfe?


Die Bilder die er da, zugegebenermaßen, nicht Optimal aber immerhin, eingebunden hat, sind einfach Hintergrundbilder für die Navigation und dienen dem Hover Effekt. (Auch wenn er das Falsch angegangen ist), diese haben mit den Großen 3000px nichts zu tun. Es handelt sich nur um die Navigation.
Mein Hinweis bezieht sich Erstmal darauf, das die Navigation funktioniert und er so keine Nachteile erhält, was den Betrieb der Seite angeht.Die Seite muss ja ersteinmal Funktionieren, kann ja nur besser funktionieren.

Aber selbst wenn das jetzt blöd klinkt, glaube wir haben die eine css Zeile mit Absicht nicht gesagt, zumindest ich.

Was das "Wir" angeht, hoffe ich doch nicht, dass es sich hier um eine Geschlossene Gesellschaft handelt;)
und jeder helfen darf wie er das möchte.

@ Meister


Erst einmal solltest du das Verlinken der Bilder anders angehen, ich spreche von den Großen unten eingeblendeten Bildern.
Hier reicht es, wenn du diese auf 300px Verkleinerst und ich meine nicht, das du diese mit Höhe und weite in CSS auf 300px beschränkst, sondern, dass du diese mit einem Grafikprogramme (z.B Gimp) verkleinerst.
Du kannst die 300px Bilder mit deinen Großen Bilder Verlinken,

<a href="img-vorschau/bild-groß.jpg" target="_blank"><img src="img-groß/bild-klein.jpg"/></a>

dadurch verringert sich die Ladezeit schon einmal erheblich. Da ersteinmal die Vorschauen geladen werden aber ich empfehle dir generell eine Galerie.

ansonsten zum Hover und in Diesem Zusammenhang das wechseln der Hintergrundgrafik in deiner Navigation:
Im CSS definierst du deine Id in etwa so

<style>

#link_navi_1
{background-image: url(deinbildlink/bild_normal.jpg);}

#link_navi_1:hover
{background-image: url(deinbildlink/bild_mouseover.jpg);}

</style>

dadurch bekommst du deinen Hover Effekt, ohne auf die Rahmen achten zu müssen.
wie Cheffchen schon sagte ist hierzu allerdings ein Neuaufbau notwendig.