[HTML/CSS] Strona się rozjeżdża pod IE (po raz setny? ;))

taosiek · Post autor: **taosiek** » ndz wrz 21, 2008 10:48 pm

Witam serdecznie

Jak w tytule, dopadł mnie chyba najbardziej powszechny problem - strona rozjeżdża się pod IE. Co jest szczególnie dotkliwe, ponieważ pracuję pod Mac OS X i dostęp do IE mam tylko i wyłącznie przez http://browsershots.org/ (dzięki mądrym ludziom za tę stronkę...)

Ale do rzeczy...

"Feralna" strona: http://zencreations.boo.pl/allegro/spa/ ... legro.html

Delikwent wygląda tak jak zamierzono pod FF, Operą i Safari, natomiast sypie się w IE 5/6/7.

Kilka ważnych uwag:
1. Zdaję sobie sprawę, że kod jest mocno koszmarny, ze stylami osadzonymi w elementach, bez DTD itd. Niestety, w założeniu ma to być szablon pod aukcje na Allegro... Co wiąże się z tym, że nie mogę stosować znaczników

Kod: Zaznacz cały

<body> <head>

a co za tym idzie - podpiąć zewnętrznego arkusza stylów lub choćby zagnieździć go w head.
2. Allegro na stronach aukcji wypluwa taki DTD:

Kod: Zaznacz cały

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

Niestety bez linku, więc IE prawdopodobnie działa w quirks mode..
3. Próbowałam zastosować kilka tricków zaproponowanych przez Was w innych tematach, stosowanie

Kod: Zaznacz cały

display: inline

we wszystkim, co ma marginesy i float nie pomogło, podobnie jak resetowanie marginesów i paddingów.
4. Nie jestem pewna, ale chyba box model hack również nie działa, ani też używanie conditional comments...

Będę bardzo wdzięczna za pomoc, spędziłam cały dzień wlepiając ślepia w ten okropny kod i już naprawdę nie wiem, co może byc przyczyną tego "rozjeżdżania"...

ardziej · Post autor: **ardziej** » pn wrz 22, 2008 1:28 pm

w IE to zaladnie nie wyglada.........
a na allegro jak to wyglada moze cos sie zmieni bo tylko Ie ma ten problem..
spróbuj zrobic stronke w tabelkach wiem ze wiekszosc tego nie lubi ale no coz.........

gorylek · Post autor: **gorylek** » pn wrz 22, 2008 1:48 pm

Witam,
jest to całkowicie normalne. Po pierwsze wystarczy sprawdzenie strony przez Validator. Ewentualnie wyświetlić w FF info o stronie. Masz tam napisane że strona jest w trybie wstecznej zgodności. IE oferuję takiej stronie masę błędów jak box model bug itp itd etc. Ogólnie masz wszystko co "programiści" Microsoftu wymyślili

Niech ich piekło pochłonie oraz wszystkie ich dzieci i dzieci ich dzieci...

Nie masz doctype, metatagów, nic. Chcesz wiedzieć czy strona poprawnie się wyświetli po dodaniu jej na allegro ? A no wystarczy prosty myk.

Po pierwsze dodaj:

Kod: Zaznacz cały

<body>
//tutaj kod Twojej strony
</body>
</html>

Teraz najzwyczajniej w świecie uzupełnij swoją stronę o nagłówek Allegro czyli:

Kod: Zaznacz cały

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Allegro.pl - aukcje internetowe, bezpieczne zakupy</title>
<meta name="verify-v1" content="6YgKxlgGTWMjyHi4X5njk/D1dsg/XYAKrSD9mq4/FwU=" />
<meta name="keywords" content="aukcje internetowe,allegro,serwis aukcyjny" />
<meta name="description" content="Allegro - największe aukcje internetowe, najniższe ceny! Kup i sprzedaj!" />
<meta name="classification" content="global,all" />
<meta name="robots" content="all,index,follow" />
<meta name="revisit-after" content="2 days" />
<link rel="shortcut icon" href="http://static.allegro.pl/site_images/1/0/common/favicon.ico" />
<link rel="stylesheet" media="all" type="text/css" href="http://static.allegro.pl/site_images/1/0/index.css" />
</head>

Dla Twojej strony całość powinna wyglądać tak:

Kod: Zaznacz cały

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Allegro.pl - aukcje internetowe, bezpieczne zakupy</title>
<meta name="verify-v1" content="6YgKxlgGTWMjyHi4X5njk/D1dsg/XYAKrSD9mq4/FwU=" />
<meta name="keywords" content="aukcje internetowe,allegro,serwis aukcyjny" />
<meta name="description" content="Allegro - największe aukcje internetowe, najniższe ceny! Kup i sprzedaj!" />
<meta name="classification" content="global,all" />
<meta name="robots" content="all,index,follow" />
<meta name="revisit-after" content="2 days" />
<link rel="shortcut icon" href="http://static.allegro.pl/site_images/1/0/common/favicon.ico" />
<link rel="stylesheet" media="all" type="text/css" href="http://static.allegro.pl/site_images/1/0/index.css" />
</head>
<body>
<div style="text-align:center; width: 100%; background: url('images/body-bg.jpg') top center repeat; margin: 0; padding: 0;">
	
		<div style="margin: 0 auto; width: 800px; font: 11px Verdana, sans-serif; color: #555; line-height: 16px; text-align:left;">
		
			<div style="width: 800px; height: 250px; background: url('images/header.jpg') top left no-repeat;"></div>
				
		<div style="width: 201px; background-color: #fff; background: url('images/sidebar-bg.jpg') top right repeat-y; float: left;">
			
			<img src="images/sidebar-kontakt.jpg" style="margin: 0; padding:0; border:0;"/><div style="padding: 0 20px 0 10px;"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p></div><img src="images/sidebar-bottom.jpg" style="margin: 0; padding:0; border:0;"/><img src="images/sidebar-przesylka.jpg" style="margin: 0; padding:0; border:0;"/><div style="padding: 0 20px 0 10px;">
					<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
				</div>
			<img src="images/sidebar-bottom.jpg"style="margin: 0; padding:0; border:0;" />

				
			<img src="images/sidebar-platnosci.jpg" style="margin: 0; padding:0; border:0;"/>
            	<div style="padding: 0 20px 0 10px;">
					<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
				</div>
			<img src="images/sidebar-bottom.jpg" style="margin: 0; padding:0; border:0;" />

		</div>
		
			<div style="width: 580px; background-color: #fff; background: url('images/content-bg.jpg') top center repeat-y; float: left;">
				<img src="images/content-top.jpg" style="float: left;" />

				<h1 style="display: block; 	height: 50px; text-indent: -9999px; background: url(images/witamy.jpg) top left no-repeat;">Witamy na naszej aukcji!</h1>
					<div style="margin: 0 30px 0 0;">
					<div style="width: 555px; color: #666; padding:0;"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec lacinia, ligula vitae fringilla consequat, mi libero volutpat pede, non imperdiet tortor mi et ipsum. Etiam porttitor. Curabitur sit amet sapien. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec lacinia, ligula vitae fringilla consequat, mi libero volutpat pede, non imperdiet tortor mi et ipsum. Etiam porttitor. Curabitur sit amet sapien.</p>
					</div> 
                    					
<h2 style="display: block;	margin-top: 20px; height: 40px;	text-indent: -9999px; background: url(images/opis.jpg) top left no-repeat;">Opis przedmiotu</h2>
<img style="padding: 3px; margin: 0 15px 15px 0; border: solid #698c4f 1px; float: left;" src="images/towel.png" />

<p>Nulla gravida aliquam sapien. Aenean risus. Suspendisse ut mi et nibh pharetra sodales. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. 
Pellentesque vel pede vitae magna semper bibendum. Suspendisse tortor. Nam et est. Praesent sit amet lorem. Integer ipsum. Praesent a purus. Maecenas ultricies nisi sit amet nisi. Donec adipiscing pretium nisi.</p>

<p>Donec molestie metus ac libero. Morbi egestas mi dignissim turpis. Suspendisse pretium, justo et congue volutpat, sem elit pharetra eros, et ullamcorper quam nunc sed lectus. Ut pede purus, fringilla commodo, eleifend in, dignissim eget, ligula. Nullam eu diam eu dui ultrices dignissim. Fusce posuere libero vel tortor. Integer auctor, massa sed commodo scelerisque, massa eros porta mi, quis facilisis quam massa at nulla. Sed tempor felis. Aenean elit sapien, scelerisque sit amet, vulputate sit amet, volutpat ac, lorem. </p>


					</div>
				<img src="images/content-bottom.jpg" />
			</div>
			
			<div style="clear: both;"></div>
			
			<div style="width: 800px; height: 92px;">
				<img src="images/footer.jpg" border="0" usemap="#Map" />
<map name="Map" id="Map"><area shape="rect" coords="37,18,213,62" href="POZOSTALEAUKCJE" alt="Zobacz nasze pozostaĹ�e aukcje" />

<area shape="rect" coords="219,17,397,62" href="INFORMACJEONAS" alt="Informacje o nas" />
<area shape="rect" coords="408,17,576,62" href="ZADAJPYTANIE" alt="Zadaj pytanie" />
<area shape="rect" coords="583,17,768,61" href="DODAJULUBIONE" alt="Dodaj do ulubionych" />
</map>
			</div>
		
	</div>	
	
</div>	
</body>
</html>

Dopiero tak uzupełniony kod sprawdź w IE.

Kod: Zaznacz cały

spróbuj zrobic stronke w tabelkach wiem ze wiekszosc tego nie lubi ale no coz.........

A kysz szatanie z takimi poradami

Pozdrawiam

[HTML/CSS] Strona się rozjeżdża pod IE (po raz setny? ;))

[HTML/CSS] Strona się rozjeżdża pod IE (po raz setny? ;))

Re: [HTML/CSS] Strona się rozjeżdża pod IE (po raz setny? ;))

Re: [HTML/CSS] Strona się rozjeżdża pod IE (po raz setny? ;))