03.12.2013, 19:03
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:
CSS
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!
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>
<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;
}
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!