Przesuwający się DIV

Mam mały problem z działaniem w przeglądarce IE strony nad którą aktualnie pracuję. Sprawa wygląda tak, że po kliknięciu na odnośnik za pomocą funkcji load z jQuery do DIV-a wczytywany jest fragment kodu html, znajdujący się w pliku tekstowym na serwerze.

Problem dotyczy sytuacji, gdy scrollbar jest przesunięty w dół (choćby nieznacznie) i kliknie się na dowolny odnośnik. Wówczas div do którego wczytywany jest tekst przesuwa się w górę strony i jego część "chowa się" pod innym, umieszczonym na górze strony DIV-em z grafiką i menu. Oczywiście nie jest to zjawisko przeze mnie pożądane, dlatego prosiłbym o pomoc / podpowiedź co konkretnie skopałem.

Należy dodać, że przesunięcie przedmiotowego DIV-a nie dotyczy jego zawartości (np. tekstu) lecz jego tła, obramowania itd.

Problem dotyczy tylko IE - w przeglądarkach z silnikiem Gecko czy Webkit wszystko działa jak należy.

Podaję adres strony: www.ubezpieczenialubanie.dl.pl/test/

Kod z arkusza stylów:

body {
text-align: center;
margin: 0px;
padding: 0px;
background: #1E5799;
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#1E5799), to(#7DB9E8));
background: -webkit-linear-gradient(#1E5799, #7DB9E8);
background: -moz-linear-gradient(#1E5799, #7DB9E8);
background: -ms-linear-gradient(#1E5799, #7DB9E8);
background: -o-linear-gradient(#1E5799, #7DB9E8);
background: linear-gradient(#1E5799, #7DB9E8);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 );
}

a { 
text-decoration: none; 
color: blue;
} 

a:hover {
 color: red;
 text-decoration: underline;
}

div.tab {
	border-radius: 10px;
	behavior: url(PIE.htc);
	
	font-family: Verdana;
}

div.tab-shadow {
	box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.50);
}

div.tab-shadow-bg {
	background: #FFFFFF;
	background: -ms-linear-gradient(#FFFFFF, #7DB9E8);
	background: linear-gradient(#FFFFFF, #7DB9E8);
	-pie-background: linear-gradient(#FFFFFF, #7DB9E8);
}

div.tu {
	border-radius: 10px 10px 0px 0px;
	background: #3b2996;
	color: white;
	padding: 10px 10px 10px 10px;
	text-align: center;
	font-weight: bold;
}

div.u {
	border-radius: 0px 0px 10px 10px;
	background: #fcffd4;
	color: blue;
	margin-bottom: 30px;
	padding: 10px 10px 10px 10px;
}

#main {
width: 750px;
height: 100%;
}

#menu {
margin-bottom: 5px;
}

#lewy {
padding: 10px 5px 0px 5px;
width: 220px;
float: left;
text-align: left;
margin-right: 10px;
}

#div1 {
padding: 10px 10px 10px 10px;
width: 515px;
height: auto;
float: left;
text-align: justify;
font-size: 12;
}

#stopka {
font-size: 10;
text-align: center;
float: bottom;
font-family: Verdana;
margin-top: 20px;
}

a.left, p.left {
	font-size: 12;
}

b.left {
	font-size: 14;
}

b.tel {
	font-size: 15;
}

img.menu {
cursor: pointer;
}

img.left {
float: right;
border: none;
margin: 0px;
padding: 0px;
}

1. Na IE8 to, o czym mówisz nie występuje.
2. Wiesz, że z takim menu Google nie wie, że Twoja strona ma jakieś podstrony?
3. Gradient nie działa na Operze, ja stosuję taką deklarację: background-image: -o-linear-gradient(bottom, #EAEAEA 0%, #FFFFFF 100%); i jest ok - sprawdź sobie.

dzek69 napisał(a)

1. Na IE8 to, o czym mówisz nie występuje.

Hmm. Sprawdzałem na kilu komputerach z IE8 - problem występował w każdym przypadku. Jeśli możesz, sprawdź tak: kliknij "Ubezpieczenia" , przewiń stronę w dół (tak, abyś jeszcze widział przyciski) i kliknij dowolny inny odnośnik.

dzek69 napisał(a)

2. Wiesz, że z takim menu Google nie wie, że Twoja strona ma jakieś podstrony?

Tak. Nie dodałem jeszcze znaczników ALT do obrazków. Myślę, że wtedy powinno być OK.

dzek69 napisał(a)

3. Gradient nie działa na Operze, ja stosuję taką deklarację: background-image: -o-linear-gradient(bottom, #EAEAEA 0%, #FFFFFF 100%); i jest ok - sprawdź sobie.

Opera w wersji 11.61 wyświetla gradient - ale dzięki za słuszną uwagę, bo być może jakaś starsza wersja go nie widzi.

1. faktycznie, teraz jest źle. Ale spójrz na screenshota z Opery: http://prntscr.com/700hj/direct - to że stopka wciska się po prawej stronie nie świadczy dobrze ;) Coś niedomknięte? A może zapomniałeś o overflow: hidden? W każdym razie - coś jest konkretnie źle, tylko inne przeglądarki to poprawiają lepiej niż IE8.

2. Alty nic nie zmienią - bo google nie zna linków do podstron. Lepiej gdybyś dał tam elementy <a> i wstawił tam linki do podstron, do których można przejść bez obsługi javascriptu - natomiast potem przez javascript zablokujesz przechodzenie pod te linki i będziesz ładował ajaxem jak teraz.

3. Hm, moja Opera: http://prntscr.com/700jh/direct

1. faktycznie - nie zauważyłem, że stopka się przemieszcza. No nic - wydrukuję sobie listing i sprawdzę krok po kroku gdzie może być błąd.

2. Dziękuję za radę. Strona w podobnej postaci istnieje już dobre pół roku i w sumie zawsze była dość wysoko w wynikach wyszukiwania. Linki do podstron też były. Aczkolwiek podsunąłeś mi ciekawe rozwiązanie i na pewno je wykorzystam. :)

3. • zwracam honor - nie mam pojęcia dlaczego u mnie strona wygląda OK a u Ciebie nie (może chodzi o rozdzielczość ekranu?), więc wstawię gradient w sposób przez Ciebie opisany. Dzięki!

1. wydrukuję???? A może zacznij używać normalnego IDE, które pomoże Ci zorganizować kod (chociażby przez podświetlenie pary tagów otwierających/zamykających), wyświetli błędy na bieżąco itd..

1a) Zajrzałem na szybko w kod:
<script language="JavaScript"> -- element <script> bodajże w żadnym standardzie nigdy nie posiadał atrybutu language - wyżej masz jQuery - tak ma wyglądać tag script (w html5 z tego, co kojarzę można pominąć type).
1b) if(-1 != navigator.userAgent.indexOf("MSIE 8")) { /* cssy */ } -- bez sensu. Wpisz w google "komentarze warunkowe IE" i poczytaj. Jest to pewniejsze sprawdzenie przeglądarki i niewymagające javascriptu.
1c) Twoja strona bez javascriptu: http://prntscr.com/70wzr/direct - tak widzi ją Google (pomijając, że Google interesuje sam tekst, a nie grafiki) - trochę tekstu, żadnych linków. Tak widzą ją też ludzie z NoScriptem i podobnymi. Trochę porażka.

3. Ja do gradientów używam tego: http://gradients.glrzad.com/

4. Menu też nie powinno być obrazkami. Własne fonty (nie wiem czy to nie jakiś wydumany font w menu) obsługują wszystkie przeglądarki (tak naprawdę userzy każdej przeglądarki oprócz IE mają ją w najnowszej wersji) - w tym IE, cienie pod tekstem też, a słowo pisane, a nie na obrazku jest bardziej dostępne, widziane przez Google itd.

Ja to niestety bym przepisał tę stronę od nowa ;P

dzek69 napisał(a)

1. wydrukuję???? A może zacznij używać normalnego IDE, które pomoże Ci zorganizować kod (chociażby przez podświetlenie pary tagów otwierających/zamykających), wyświetli błędy na bieżąco itd..

Używam KEDa. Myślę, że jest OK. Co do drukowania - jakoś wolę doszukiwać się błędów gdy mam coś na papierze tym bardziej, że pracuję na notebooku, gdzie pole "manewru" mam dość ograniczone. O gustach się nie dyskutuje ;)

dzek69 napisał(a)

Ja to niestety bym przepisał tę stronę od nowa ;P

Też na to wpadłem. ;) Moim zamierzeniem było na szybko poprawić layout. Ale wiadomo jak wychodzi "na szybko"...

BTW - dzięki za uwagi. Nie jestem z zawodu programistą/webmasterem - czasami coś tam stworzę "z doskoku", dlatego nie jestem na bieżąco z aktualnymi "trendami" w tworzeniu stron internetowych. Postaram się jednak nadrobić zaległości.