x-kom hosting

Problem z wyświetlaniem strony w Internet Explorer

RobertoGato
utworzono
utworzono (edytowane)

Witam,

Tworzę prostą stronę i mam problem z przeglądarką IE 7. Nie mam jeszcze zbyt dużego doświadczenia z problemami związanymi z różnym sposobem czytania kodu przez przeglądarki i w związku z tym strona zamiast wyglądać tak:

W Firefoxie:

[url="http://w784.wrzuta.pl/obraz/5igDqbvXWad/zrzut2"]Zdjęcie1[/url]

W IE 7 wygląda tak:

[url="http://w784.wrzuta.pl/obraz/5s0jrShjJ1L/zrzut1"]Zdjęcie2[/url]

Co powoduje ten problem że w zasadzie to nawet tło się poprawnie nie wyświetla?

Kod strony:

[code]
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
body {
text-align: center;
background-color: #D6D6D6;
background-image: url(Lessons/images/Zielone%20tapetki/greenHouseEffect%20(1)
.jpg);
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
background-image: url(Lessons/images/Zielone%20tapetki/greenHouseE.jpg);
}
<!--
#gorny_pojemnik {
height: 100px;
width: 750px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
position: relative;
margin-top: 20;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
top: 20px;
font-size: small;
}
#prostokat_gornego_pojemnika {
height: 30px;
width: 717px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
position: relative;
top: -15px;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
}
#glowny_pojemnik {
height: 770px;
width: 800px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
margin: 0 auto;
position: static;
background-color: #F0F0F0;
}
#lewy_blok {
height: 500px;
width: 200px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
top: 60px;
right: 50px;
position: relative;
left: -20px;
}
#prawy_bok {
height: 500px;
width: 500px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
position: relative;
left: 248px;
top: -4px;
}
#stopka {
height: 40px;
width: 749px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
left: -5px;
top: 60px;
position: relative;
}
-->
</style>
</head>

<body>
<div id="glowny_pojemnik">
<div id="gorny_pojemnik">
<h1>Moja strona domowa</h1>
<div id="prostokat_gornego_pojemnika">
<div id="lewy_blok"><div id="prawy_bok"></div>
<div id="stopka">Content for id "stopka" Goes Here</div>
</div>
</div>
</div>
</div>
</body>
</html>

[/code]

Co robię żle że IE wyświetla w ten sposób stronę?

Pozdrawiam i z góry bardzo dziękuję za pomoc! :)

wojtex5
komentarz
komentarz

IE ma swój świat i swoje kredki
samej przeglądarki nie zmienimy, ale możemy użyć komentarzy warunkowych - wykonają się tylko wtedy gdy warunek będzie spełniony.
możesz o nich poczytać [url=http://leksykot.top.hell.pl/lx3/Z/komentarze_warunkowe]TUTAJ[/url]
wstaw w komentarzu warunkowym kod który ustawia ujemny margines na pojemnik zawierający całą przesuniętą treść.

poza tym tło może sie nie wstawiać w IE, bo możliwe że jest bardzie jdokładny niż FF - ustaw adres do tła w taki sposób: [html]background-image: url('Lessons/images/Zielone tapetki/greenHouseEffect (1).jpg');
....
background-image: url('Lessons/images/Zielone tapetki/greenHouseE.jpg');
[/html]
zastanawia mnie to, dlaczego ustawiasz dwa razy tło dla <body>... (?)
poza tym generalnie adresy podaje się w apostrofach albo cudzysłowach - w ten sposób nie wymagasz od przeglądarki interpretacji całego adresu.

  • 2 tygodnie później...
harrold15
komentarz
komentarz

Spróbuj do lewego bloku dodać float: left;

RobertoGato
komentarz
komentarz

Już to zrobiłem wcześniej.Rzeczywiście to trochę pomogło! Dziękuję bardzo za okazaną pomoc! :)

Wciąż szukasz rozwiązania problemu? Napisz teraz na forum!

Możesz zadać pytanie bez konieczności rejestracji - wystarczy, że wypełnisz formularz.

×
×
  • Dodaj nową pozycję...

Powiadomienie o plikach cookie

Strona wykorzystuje pliki cookies w celu prawidłowego świadczenia usług i wygody użytkowników. Warunki przechowywania i dostępu do plików cookies możesz zmienić w ustawieniach przeglądarki.