Willkommen im cgboard - classic games Forum! Deine gemütliche Retro Gaming Community. Besuche uns auch im Discord Chat.

[Frage] IE zeigt Website falsch an
#1
0
Hi!

Also eine Arbeitskollegin von mir aus dem Krankenhaus filzt in ihrer Freizeit, bietet dafür auch Kurse an und fragte mich mal vor einer halben Ewigkeit, ob ich mal eine Website für ihre Filzsachen machen kann.
Da wir zu der Zeit sowieso gerade Webdesign im Studium hatten und eine Website anfertigen mussten, hat das eh gepasst.

Ich muss dazu sagen, dass ich trotz des einen Semesters in dem wir Webdesign hatten nicht viel Ahnung von der Materie habe. Alles was ich in Dreamweaver eintragen kann sind Grundlagen, die ich mir nur mit extrem viel Rumprobiererei aneignen konnte (in den Vorlesungen damals im 3. Semester hab ich eh nix gerafft, ich musste alles im Nachhinein via Google lernen um das Fach zu bestehen).

So, letzte Woche war es dann aber mal soweit, dass wir ihre vorgefertigten Texte und Fotos auf die Website packen konnten damit die Seite endlich mal online gehen kann. Und immer wenn ich mir die Zwischenergebnisse angesehen habe (damals wie heute), war alles in bester Ordnung. Auch damals in der Prüfung war alles gut mit der Seite, angeschaut wurde die Seite immer mit Chrome, Firefox und Safari. Nur nie mit Internet Explorer.

Die Tage hat sie mir dann aber bescheid gegeben, dass die Seite irgendwie kaputt und verschoben aussieht, wenn sie von der Arbeit aus drauf zugreift. Da dachte ich mir ja noch, die Rechner bei uns im Krankenhaus sind eh alle scheiße und der IE da drauf ist bestimmt aus der Steinzeit.
Aber später hab ich dann rausgefunden, dass das Problem tatsächlich jeder hat, der maximal IE mit Version 8 benutzt. Und das sind bestimmt nicht wenige. Erst ab IE 9 gibt es keine Probleme mit der Seite mehr.

Jetzt hab ich gelesen, dass < IE 8 keine Media Queries unterstützt.
Leider hatte ich bis vorhin noch so ein Ding im Code drin, hab ich aber jetzt rausgenommen.
Problem:
Media Query ist jetzt zwar weg, aber der IE 8 zeigt die Website trotzdem nicht richtig an.
Wie kann das denn sein, dass nur der IE die Seite falsch anzeigt?
Laut http://validator.w3.org ist der HTML Code schon mal fehlerfrei.
Lediglich im CSS Code gibt es 6 Fehler, allerdings sind diese nur in der Lightbox, für welche ich mir den Code runtergeladen habe. Aber die Lightbox kann's doch nicht schuld sein oder?

Ist der IE einfach zu dumm oder hab ich hier echt irgendwas falsch?

Das ist die Website: http://www.kreativ-sabinchen.de

Das der HTML Code der Index Seite:
<!doctype html>

<html>
<head>
<meta charset="UTF-8">
<title>Sabinchen</title>
<script src="js/jquery-1.7.2.min.js"></script>
<script src="js/lightbox.js"></script>
<link href="css/default.css" rel="stylesheet" type="text/css" media="screen">
</head>
<body>
<div id="content_bg"><img class="window_bg" src="images/background_window.png" alt="bg_win"></div>
<section id="logo"> <a href="index.html"><img class="logo" src="images/sabinchen_logo.png" alt="Logo"></a></section>
<ul>
<li> <a class="menu1" href="about.html" ></a></li>
<li> <a class="menu2" href="works.html" ></a></li>
<li> <a class="menu3" href="gallery.html" ></a></li>
<li> <a class="menu4" href="contact.html" ></a></li>
</ul>
<section id="content_index">
<img src="images/cover.png" alt="cover">
</section>
</body>
</html>

CSS
body {
background-image: url(../images/background.png);
background-position: center;
background-repeat: repeat-y;
overflow: hidden;
}
nav {
margin-top: -30px;
text-align: center;
}
.menu1 {
width: 149px;
background-repeat: no-repeat;
height: 87px;
position: absolute;
top: 0%;
left: 50%;
margin-top: 150px;
margin-left: -230px;
background-image: url(../images/menu_01.png);
}
.menu1:hover, .menu:active {
background-image: url(../images/menu_01.png);
}
.menu2 {
width: 147px;
background-repeat: no-repeat;
height: 81px;
position: absolute;
top: 0%;
left: 50%;
margin-top: 160px;
margin-left: -80px;
background-image: url(../images/menu_02.png);
}
.menu2:hover, .menu:active {
background-image: url(../images/menu_02.png);
}
.menu3 {
width: 151px;
background-repeat: no-repeat;
height: 93px;
position: absolute;
top: 0%;
left: 50%;
margin-top: 150px;
margin-left: 70px;
background-image: url(../images/menu_03.png);
}
.menu3:hover, .menu:active {
background-image: url(../images/menu_03.png);
}
.menu4 {
width: 149px;
background-repeat: no-repeat;
height: 85px;
position: absolute;
top: 0%;
left: 50%;
margin-top: 150px;
margin-left: 220px;
background-image: url(../images/menu_04.png);
}
.menu4:hover, .menu:active {
background-image: url(../images/menu_04.png);
}
#logo {
width: auto;
height: auto;
position: absolute;
top: 0%;
left: 50%;
margin-left: -670px;
margin-top: 20px;
}
#menu {
margin-top: 2%;
margin-left: 50px;
color: #999;
float: left;
}
h1 {
font-size: 20px;
}
ul {
list-style-type: none;
}
a {
text-decoration: none;
}
#content_bg {
display: block;
position: absolute;
top: 0%;
left: 50%;
margin-top: 180px;
margin-left: -493px;
height: auto;
width: auto;
}
#content_index {
display: block;
position: absolute;
top: 0%;
left: 50%;
margin-top: 260px;
margin-left: -340px;
height: 450px;
width: 820px;
overflow: auto;
padding: 10px;
}
#content {
box-shadow: 0px 0px 10px -5px #000 inset;
display: block;
position: absolute;
top: 0%;
left: 50%;
margin-top: 240px;
margin-left: -400px;
height: 430px;
width: 770px;
overflow: auto;
padding: 10px;
background-image: url(../images/content_bg.jpg);
}
font-family: helvetica, arial;
/* line 6, ../sass/lightbox.sass */
#lightboxOverlay {
position: absolute;
top: 0;
left: 0;
z-index: 90;
width: 100%;
height: 500px;
background-color: #000;
}
/* line 15, ../sass/lightbox.sass */
#lightbox {
position: absolute;
left: 0;
width: 100%;
z-index: 10000;
text-align: center;
line-height: 0;
font-family: "lucida grande", tahoma, verdana, arial, sans-serif;
font-weight: normal;
}
/* line 24, ../sass/lightbox.sass */
#lightbox img {
/*width: auto;
height: auto;*/
}
/* line 27, ../sass/lightbox.sass */
#lightbox a img {
border: none;
}
/* line 30, ../sass/lightbox.sass */
.lb-outerContainer {
position: relative;
background-color: white;
*zoom: 1;
width: 250px;
height: 250px;
margin: 0 auto;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-ms-border-radius: 4px;
-o-border-radius: 4px;
border-radius: 4px;
}
/* line 38, ../../../../.rvm/gems/ruby-1.9.2-p290/gems/compass-0.12.1/frameworks/compass/stylesheets/compass/utilities/general/_clearfix.scss */
.lb-outerContainer:after {
content: "";
display: table;
clear: both;
}
/* line 39, ../sass/lightbox.sass */
.lb-container {
padding: 10px;
}
/* line 42, ../sass/lightbox.sass */
.lb-loader {
position: absolute;
top: 40%;
left: 0%;
height: 25%;
width: 100%;
text-align: center;
line-height: 0;
}
/* line 51, ../sass/lightbox.sass */
.lb-nav {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: 10;
}
/* line 59, ../sass/lightbox.sass */
.lb-container > .nav {
left: 0;
}
/* line 62, ../sass/lightbox.sass */
.lb-nav a {
outline: none;
}
/* line 65, ../sass/lightbox.sass */
.lb-prev, .lb-next {
width: 49%;
height: 100%;
background-image: url("data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7");
/* Trick IE into showing hover */
display: block;
}
/* line 72, ../sass/lightbox.sass */
.lb-prev {
left: 0;
float: left;
}
/* line 76, ../sass/lightbox.sass */
.lb-next {
right: 0;
float: right;
}
/* line 81, ../sass/lightbox.sass */
.lb-prev:hover {
background: url(../images/prev.png) left 48% no-repeat;
}
/* line 85, ../sass/lightbox.sass */
.lb-next:hover {
background: url(../images/next.png) right 48% no-repeat;
}
/* line 88, ../sass/lightbox.sass */
.lb-dataContainer {
margin: 0 auto;
padding-top: 5px;
*zoom: 1;
width: 100%;
-moz-border-radius-bottomleft: 4px;
-webkit-border-bottom-left-radius: 4px;
-ms-border-bottom-left-radius: 4px;
-o-border-bottom-left-radius: 4px;
border-bottom-left-radius: 4px;
-moz-border-radius-bottomright: 4px;
-webkit-border-bottom-right-radius: 4px;
-ms-border-bottom-right-radius: 4px;
-o-border-bottom-right-radius: 4px;
border-bottom-right-radius: 4px;
}
/* line 38, ../../../../.rvm/gems/ruby-1.9.2-p290/gems/compass-0.12.1/frameworks/compass/stylesheets/compass/utilities/general/_clearfix.scss */
.lb-dataContainer:after {
content: "";
display: table;
clear: both;
}
/* line 95, ../sass/lightbox.sass */
.lb-data {
padding: 0 10px;
color: #bbbbbb;
}
/* line 98, ../sass/lightbox.sass */
.lb-data .lb-details {
width: 85%;
float: left;
text-align: left;
line-height: 1.1em;
}
/* line 103, ../sass/lightbox.sass */
.lb-data .lb-caption {
font-size: 13px;
font-weight: bold;
line-height: 1em;
}
/* line 107, ../sass/lightbox.sass */
.lb-data .lb-number {
display: block;
clear: left;
padding-bottom: 1em;
font-size: 11px;
}
/* line 112, ../sass/lightbox.sass */
.lb-data .lb-close {
width: 35px;
float: right;
padding-bottom: 0.7em;
outline: none;
}
/* line 117, ../sass/lightbox.sass */
.lb-data .lb-close:hover {
cursor: pointer;
}
#history p {
font-family: Arial, Helvetica, sans-serif;
}

Vielleicht kann ja mal jemand der sich damit gut auskennt einen Blick drauf werfen und mir sagen was hier falsch läuft.
Kann man das irgendwie kompatibel zum IE machen?

Danke!
Zitieren
#2
0
Also, es wird schwer dir zu helfen ohne eine Liste mit Fehlern. Eigentlich hilft bei IE-Problemen, oft nur trial&error - außer du kennst alle 19831913 Ausnahmen des IE Big Grin

Im Prinzip aber:
- Transparente PNGs gehen beim IE erst ab 7 (glaub ich)
- Bei meinem IE 10 test hab ich gemerkt, dass beim klick auf die Bilder das Bild grau wird. Versuch mal mit der Pseudoklasse :active (http://reference.sitepoint.com/css/pseudoclass-active) dieses Verhalten wegzubekommen.

Ping mich gerne nochmal an hier. Aber wie gesagt, am besten einfach ganz pragmatisch mal einen Screenshot + Fehlerliste posten + Screenshot wie es sein soll. Sonst ist es schwer (auch mit Code) zu wissen, was du dir vorstellst.

Weil Code - egal welche Art - macht eigentlich selten direkt, was man denkt, was er machen sollte Big Grin
OGND Member seit dem legendären ezboard
Old Games Never Die
[Bild: elefant.gif]
Der Elefant vergisst nie
Zitieren
#3
0
offtopic:

Ich habe mir die Seite angeschaut und finde sie von der aufmachung für das "Thema" wirklich schön.Folgende Gedanken habe ich:

-Warum habe ich auf der index-seite links das blaue ding (Karte? Was da unter Sabinchens roter Karte steht)nicht, wie auf allen anderen seiten?

[Bild: index5hju6.jpg] [Bild: anderstlj9y.jpg]

Weiter: (bitte nicht als Kritik auffassen, sondern als Vorschlag): In der Gallerie und auf der Startseite sind verschiedene Fotos zu sehen. Im Gegensatz zur Website erscheinen diese ganz und gar nicht aufgeräumt. tlw. stehen irgendwelche unwichtige, wuchtige Objekte unscharf im Vordergrund, die den "Blick ablenken".

[Bild: pic_02_a.jpg]
hier dieser "Turm"

[Bild: cover.png]
Hier der graue Berg irgendwas.

Man fragt sich manchmal, was das denn nun ist: Z. B. Hier:
[Bild: pic_06_a.jpg]

Zum Thema Licht und Schatten. Klar, wo Licht ist, ist auch Schatten. Aber:
[Bild: pic_03_a.jpg]
Wenn kein Licht, dann mit ner Lampe direkt drauf?... Vlt. könnte man hier nochmal ein wenig mit ps aufhellen... oder ganz rausnehmen.

Nochmal zurück zu folgendem:
[Bild: pic_02_a.jpg]
Tageslicht. Schön! Aber das Produkt an sich im Dunkeln? Man könne hier z. B. links von der Kamera ein 50x50cm Stück Styropor postieren, was das ganze ein wenig aufhellt, so wird der Blick nicht unbedingt auf den (hellen Hintergrund gelenkt)

Aber das nur als Anmerkung! Wink

Zitieren
#4
0
Danke für eure Antworten! Smile

Also die Kritik kann ich gerne mal weiterleiten, mit den Fotos habe ich aber nicht das geringste zu tun. Ein Kumpel von ihr ist Hobbyfotograf und er hat die meisten Bilder gemacht. Und manche Bilder wiederum sind von ihr selbst geschossen mit einer herkömmlichen Digitalkamera.
Ich habe ihr aber schon mal gesagt, dass viele Fotos bestimmt eh nur übergangsweise sein sollen, und dass ihr Fotograf da ja mal ganz viele neue Fotos machen kann, die dann alle aus einer Hand kommen.
Fänd ich auch besser. Wink


Oh, das vertikale blaue Ding darf da gar nicht hin. Das war ursprünglich teil des Media Queries, denn die Seite hat sich vertikal aufgebaut sobald man das Browserfenster schmal gezogen hat. Da ist auf sämtlichen .html-Dateien versehentlich noch die Grafik eingebaut gewesen, die hatte ich nur in der index.html entfernt. Hab ich soeben gefixt! Wink

Also hier ist ein Screenshot so wie es im IE 8 aussieht (das ist jetzt zwar eine Webvorschau für den IE 8, aber genau so sieht's bei IE 8 tatsächlich aus, hat mir erst heute noch ein Kumpel gezeigt). Der Content der Seite verschwindet einfach hinter das blaue Fenster:
[Bild: Bildschirmfoto20131203um21.34.14.png]

So sieht die Website normaler Weise aus, so wie es sein sollte:
[Bild: Bildschirmfoto20131203um22.00.22.png]

Und hier sieht man die Fehler, die mir für den CSS Code ausgegeben werden:
http://jigsaw.w3.org/css-validator/valid...g=&lang=de

Okay, das mit den tranzparenten PNGs ab IE 7 ist natürlich doof, aber das wäre noch ein Punkt wo ich drüber hinwegsehen würde, der IE 7 ist immerhin von 2006. Da kann ich nur hoffen, dass kaum einer noch einen Browser aus 2006 benutzt.

Und du meinst die Bilder aus der Galerie? Dass die Bilder grau werden kann ich bei mir jetzt nicht beobachten. Aber ich versteh auch ehrlich gesagt nicht, wie ich das jetzt mit dem active einbauen muss.
Also, "content" ist die Box, wo sämtliche Inhalte angezeigt werden, je nachdem auf welcher Seite man sich befindet. Das wären, wenn man z.B. auf der Seite "Galerie" ist, die Bilder.
Aber... wie genau funktioniert das? Big Grin Soll ich jetzt in der CSS das "active" um den Bereich "content" schreiben?
Zitieren
#5
0
Leider kann ich dir nicht sagen, wo genau der Fehler liegt. Möchte dir aber noch zwei Tipps geben:

- Auf Laptops mit 15" Bildschirm passt die Seite nicht auf den Monitor, es sind keine Scrollbalken vorhanden. Evtl. kannst du die Abstände oben etwas verringern bzw. Logo verkleinern. Also nur, wenn du das unterstützen möchtest...

[Bild: mXiULB9.png]

- Falls du das nicht weisst, du kannst mit deinem IE verschiedene Versionen simulieren im Entwicklermenü, welches du mit F12 einblenden kannst. So bist du nicht unbedingt auf Seiten wie browsershots.org angewiesen.

Mfg
Rayman
Raymans FTP - 24h online
Unmengen an DOS-Games, cgboard Uploads, riesige Amiga-, C64-,
Nintendo-, Atari-, Sega- und ScummVM Collections, Handbücher usw.
Zitieren
#6
0
Oh klasse, danke für den Tipp!
Dass es bei manchen Laptops nicht in den Screen passt habe ich echt nicht berücksichtigt. Bzw. nicht gänzlich, denn auf meinem 13" MBP passt es voll rein (zumindest zu 99%). Hängt wahrscheinlich von der Auflösung ab.
Also, sobald ich das hier einmal alles in Ordnung gebracht habe, werde ich definitiv verschiedene Größen anfertigen, damit es möglichst auf jedem Screen (im Idealfall auch auf Smartphones) perfekt dargestellt wird. Danke! Smile

Ich habe keinen Internet Explorer, den gibt es für OS X meine ich nur bis Version 5. Deswegen muss ich die Kompatibilität mit dieser einen Internetseite da prüfen. Wink

Ps: Scrollbalken ist jetzt drin!
Zitieren
#7
0
purpur schrieb:Ps: Scrollbalken ist jetzt drin!

Jetzt sieht's gut aus und ist bedienbar, super Wink

Mfg
Rayman
Raymans FTP - 24h online
Unmengen an DOS-Games, cgboard Uploads, riesige Amiga-, C64-,
Nintendo-, Atari-, Sega- und ScummVM Collections, Handbücher usw.
Zitieren
#8
0
Sehr gut! Wink

Also wie es aussieht, ist mit der Website ab IE 9 alles in Ordnung und die Probleme tauchen nur bei 8 und älter auf.
Da ist die Frage, wie viele Leute heute noch den IE 8 benutzen. Laut Wikipedia ist der so gut wie 5 Jahre alt, wer benutzt sowas noch?
Und ob sich die zusätzliche Arbeit dann überhaupt lohnt...

Und für den Fall dass es doch wichtig sein sollte:
Ich wüsste jetzt trotzdem nicht wie ich die Website so überarbeiten müsste, damit der IE 8 die richtig anzeigt.
Zitieren
#9
0
IE8 würde ich schon noch unterstützten. Bei Version 7 und 6 wäre mir das den Aufwand nicht wert. Ich werd morgen mal auf der Arbeit in den virtuellen Maschinen mit nativen IE8 testen und schauen was ich so finde.

//Edit:
Nach einen kurzen Blick auf die Webseite noch ein Tipp:
Diese schwarze Schrift auf dem Pink sieht überhaupt nicht aus. Die Rote Schrift in den "Buttons" wäre meiner Meinung nach passender.
Zitieren
#10
0
purpur schrieb:Hi!

Die Tage hat sie mir dann aber bescheid gegeben, dass die Seite irgendwie kaputt und verschoben aussieht, wenn sie von der Arbeit aus drauf zugreift. Da dachte ich mir ja noch, die Rechner bei uns im Krankenhaus sind eh alle scheiße und der IE da drauf ist bestimmt aus der Steinzeit.

Was ist denn das für eine IT Administration? Ich arbeite als Administrator und bei unseren Kunden wird die neue IE Version getestet und wenn gut ..ausgerollt. Aber IE8 und dann im Krankehaus Geschockt.... das ist ja ein nogo, da kann man genauo gut die Firewall ausschalten.
Gibt es denn irgendein wichtigen grund warum dort der IE8 Aktiv ist. Das teil wird ja gar nicht mehr *wirklich* supportet und wir sind bei IE11 (Win7/WinCool.
Zitieren
#11
0
Wir sind bei IE10 da IE11 bis jetzt nur Probleme macht ;D
IE8 ist aber wirklich übel.
[Bild: 5dnx1syg1tc.jpg]
I am Guybrush Threepwood, mighty Pirate!

[Bild: general-small.png]
Cebion's Adventure Corner! Adventures von 1986-2000
Zitieren
#12
0
Habe glaub ich dein Problem ausgemacht.
Der IE8 unterstützt die <section> Elemente nicht!
Abhilfe könnte HTML5Shiv schaffen.


Traxx Amiga EP schrieb:Was ist denn das für eine IT Administration? Ich arbeite als Administrator und bei unseren Kunden wird die neue IE Version getestet und wenn gut ..ausgerollt. Aber IE8 und dann im Krankehaus Geschockt.... das ist ja ein nogo, da kann man genauo gut die Firewall ausschalten.
Gibt es denn irgendein wichtigen grund warum dort der IE8 Aktiv ist. Das teil wird ja gar nicht mehr *wirklich* supportet und wir sind bei IE11 (Win7/WinCool.
IE8 ist die letzte unter XP nutzbare IE Version. XP hat eine Verbreitung von ~40%. Der Rest ist selbst erklärend.
Zitieren
#13
0
Richtig, XP geht nur bis IE 8, und im Krankenhaus ist überall noch XP installiert. Wink

Aber... Ich glaub es hat geklappt! Big Grin
Zumindest sieht es hier schon mal ziemlich gut aus:
Die Index-Seite wird schon mal richtig dargestellt. Das einzige was wohl immer noch nicht geht ist der pinke Hintergrund in der Box, die Box ist sozusagen also einfach unsichtbar, aber der Inhalt (also Texte und co.) wird trotzdem angezeigt und das ist ja das wichtigste.
Ich denke das ist dann der Kompromiss oder? Oder kriegt man sowas auch noch relativ leicht hin? Aber selbst wenn nicht, ich denke damit können die IE 8 Leute leben, denn immerhin stimmt jetzt die Anordnung der ganzen Elemente und man kann die Seite normal benutzen und lesen. Smile

Und tausend Dank schon mal, ich hätte echt nicht damit gerechnet dass es da tatsächlich eine so simple Lösung für gibt!
Zitieren
#14
0
Cebion schrieb:Wir sind bei IE10 da IE11 bis jetzt nur Probleme macht ;D
IE8 ist aber wirklich übel.

Was denn für Probleme?
Zitieren
#15
0
[Bild: 5dnx1syg1tc.jpg]
I am Guybrush Threepwood, mighty Pirate!

[Bild: general-small.png]
Cebion's Adventure Corner! Adventures von 1986-2000
Zitieren
#16
0
Das einzige was mir jetzt plötzlich auffällt, ist, dass bis IE 10 die eingebetteten Bilder gar nicht angezeigt werden. Bei IE 11 dagegen schon.

Ist euch das nicht aufgefallen, oder ist das jetzt nur bei mir so?
Hab's grad bei NetRenderer gesehen, aber auch schon nach 'nem Reboot unter Win 7 mit IE 11 -> Kompatibilitätsmodus auf 10, 9 und 8... was ist das denn jetzt schon wieder. Cry

[Bild: Bildschirmfoto20131204um17.34.06.png]
Zitieren


Möglicherweise verwandte Themen…
Thema Verfasser Antworten Ansichten Letzter Beitrag
  [HTML] Old Magazines Website danianeve 0 2.110 06.04.2010, 21:38
Letzter Beitrag: danianeve
  Quartex Website "secret"? Insanus 7 2.636 21.09.2007, 07:56
Letzter Beitrag: Insanus
  Juhu! Die Humongous Website ist noch online! dorianpa 0 1.471 07.04.2007, 11:59
Letzter Beitrag: dorianpa
  [Sonstiges] HIPHIP/R&B WEBSITE Kanak4Life 11 3.140 16.12.2005, 16:33
Letzter Beitrag: Insanus
  Website von 2Pac 2Pac 3 2.499 02.04.2004, 14:56
Letzter Beitrag: challenger17

Gehe zu:


Benutzer, die gerade dieses Thema anschauen: 1 Gast/Gäste