Strona źle wyświetlana w IE

0

Witam, strona www.sukniadlaciebie.cba.pl działa dobrze pod wszystkimi przeglądarkami, w IE - mam tu IE10 galeria rozjeżdża się, ramka pod zdjęciem jest rozciągana, stopka też nie przylega do brzegów i pasek z logo nie przylega do prawej krawędzi.

Tu mam css, idzie jakoś formatowanie ustawić dla IE?

 /*TŁO*/


 
 body
  {
  background-repeat: no-repeat;
  background-attachment:fixed;
  background-size: 100% 100%;
  -moz-background-size: 100% 100%;
 
/*cover test?*/
 background-size:cover;
  background-image: url(images/bg1.jpg);


  } 
  
 
#mylink:link, #mylink:visited {
	text-decoration: none;
	display: block;
	font-weight: bold;

	color: #fff;
	padding: 0px 20px;


}

#mylink:hover {
	background-color: #800;
	background-image: url("tlored.gif");
}





#menu {


	background: #980BA5;
	border-bottom: 3px solid white;
	color: white;
	position: absolute;
	text-align: center;
    top: 0;
	left:0;
	right: 0;

	width: 100%;
	

}


#stopka {


	background: #980BA5;
	border-top: 3px solid white;

	color: white;
	position: fixed;
    bottom: 0;
	left:0;


	width: 100%;
	

}



#ladowanie {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('images/loading.gif') no-repeat center center;
}



#ramka{
	background-image: url('images/bg.png');
	background-repeat: no-repeat;

  /*width: 586px;*/
  padding: 10px 30px; /* wys x szer ramki*/
 


}

#zdjecie{
width: 420px;

}

#miniaturki {
width: 100%;

}
#miniaturki img {
    margin: 5px;
    cursor: pointer;
}
td 
{
	color: #FFF;
}



0

Co do Stopki i logo spróbuj dodać do body "margin:0;padding:0".
Dobrą praktyką jest do każdego projektu dodawać na początku reset.css, który wyczyści domyślne style przeglądarki i zapewni większe prawdopodobieństwo poprawnego wyświetlania pod różnymi przeglądarkami.
Oczywiście wtedy więcej trzeba napisać samemu, ale masz pewność, że wszystko wygląda tak jak chcesz. np coś takiego: http://meyerweb.com/eric/tools/css/reset/reset200802.css

0

Po zastosowaniu reset.css, jakieś postępy są. Działam dalej, zobaczę co się uda

0

OK, problem menu i stopki rozwiązany po zastosowaniu resetowania.
Prawie, bo stopka w normalnych przeglądarkach jest na dole, w IE jak tekstu jest mało to jest do góry, powinna przyklejać się na dole, bottom:0 nie działa? I teraz ta ramka jeszcze, ustalam rozmiar tak w kodzie html :

<div id="ramka" style="background-size: 475px 580px; -moz-background-size: 475px 580px;">
	<div id="zdjecie"></div>

Rozumiem że to na IE nie zadziała?

0

Tak przypatrzyłem się bardziej w kod strony i są bardzo duże błędy projektowe.

  • z
    Nie korzysta się do pozycjonowania elementów na stronie! W ogóle staraj się unikaj korzystać z
    . Zamiast tego używaj marginesów
  • z position:absolute korzystaj tylko w uzasadnionych przypadkach. Zauważ, że jak usuniesz regułe "position:absolute" z #menu to nie musiałbyś używać
    do pozycjonowania
  • tabel używaj tylko do tworzenia tabel. Po co Ci tabela z jedną komórką?

Generalnie strona fajnie się prezentuje i nie spodziewałem się, że w środku znajdę takie kwiatki. Czyżby jakiś generator?

0

nie, pisałem prawie od 0, poprawię kod

0

Ten absolute był tam przez przypadek, wcześniej miałem chyba fix, tak że menu było zawsze na stronie widoczne ale za wiele miejsca zajmowało więc miałem to wywalić

1 użytkowników online, w tym zalogowanych: 0, gości: 1