WordPress psuje wyglad na IE

Rozwiązano

(@bazan)

Witam,

Wie ktoś dlaczego strona która w czystym HTML wygląda dobrze na IE (poza 6, ale w 8 i 9 wygląda tak jak powinno w każdym calu), po wdrożeniu w wordpress strona nawet na IE9 jest poszatkowana?

Nie działają marginesy ani floating, sypie sie interpretacja paddingowania.

Przed wdrożeniem w wordpress aby przycisk mial szerokosc 200px i mial padding lewy na 40px, trzeba mu bylo dac szerokosc 160px i razem bylo 200px

Po wdrozeniu w css ten sam element musi miec juz wartosc width na 200. Nie rozumiem czemu tak jest.

Zaraz wrzuce na ftp i dam linki do strony w wordpress i czystym html.
Jakie znacie sztuczki na takie rozlatywanie sie stron?
Czytalem ze trzeba dac elementowi nadrzednemu jakas wartosc text-align, zeby. Ale nie dziala to :/

@edit
No niestety mam tymczasowy problem z serwerem ^^
Wklejam link do strony z htmlem: http://www.marcin.bazanowski.pl/proenergy/

i kod z firebuga wytworzonej strony na wordpress:

CSS jest taki sam tutaj i tutaj.




<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
  "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
			<title>Pro Energy || Rezonator Bio-Fotonowy Fala rezonansowa jest energią życia</title>

	<meta name="description" content="Pro Energy" />
	<meta name="keywords" content="Pro Energy" />
	<meta name="author" content="Studio Kreacja" />
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<meta name="lang" content="PL" />

	<link rel="stylesheet" type="text/css" href="http://localhost/proenergy/wp-content/themes/proenergy/reset.css" />
	<link rel="stylesheet" type="text/css" href="http://localhost/proenergy/wp-content/themes/proenergy/style.css" />

	  <!--[if IE]>
	    <link rel="stylesheet" type="text/css" href="http://localhost/proenergy/wp-content/themes/proenergy/ie.css" />
	<![endif]-->

	<meta name='robots' content='noindex,nofollow' />
<link rel="alternate" type="application/rss+xml" title="Pro Energy » Strona główna Kanał z komentarzami" href="http://localhost/proenergy/index.php/strona-glowna/feed/" />
<link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://localhost/proenergy/xmlrpc.php?rsd" />
<link rel="wlwmanifest" type="application/wlwmanifest+xml" href="http://localhost/proenergy/wp-includes/wlwmanifest.xml" />
<link rel='prev' title='Przykładowa strona' href='http://localhost/proenergy/index.php/przykladowa-strona/' />
<link rel='next' title='O Firmie' href='http://localhost/proenergy/index.php/o-firmie/' />
<meta name="generator" content="WordPress 3.3.2" />
<link rel='canonical' href='http://localhost/proenergy/' />
	<style type="text/css">.recentcomments a{display:inline !important;padding:0 !important;margin:0 !important;}</style>
</head>

<body class="glowna">

	<div class="wrapper">

		<div id="header">
		 <a class="logo" href="index.html">Pro Energy</a>

		 <div class="f-right kontakt-top">

		 <span class="tel">tel. 500 811 244</span>
		 <span class="email">e-mail: <a href="mailto:proenergy@op.pl">proenergy@op.pl</a></span>
		 <div class="clear"></div>
		 </div>
		<div class="clear"></div>
		<div class="nav-menu">
			<ul id="menu-nawigacja" class="menu"><li id="menu-item-27" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-27"><a href="http://localhost/proenergy/index.php/o-firmie/">O Firmie</a></li>
<li id="menu-item-26" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-26"><a href="http://localhost/proenergy/index.php/produkty/">Produkty</a></li>
<li id="menu-item-25" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-25"><a href="http://localhost/proenergy/index.php/opinie-lekarzy/">Opinie lekarzy</a></li>
<li id="menu-item-24" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-24"><a href="http://localhost/proenergy/index.php/opinie-klientow/">Opinie klientów</a></li>
<li id="menu-item-23" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-23"><a href="http://localhost/proenergy/index.php/certyfikaty/">Certyfikaty</a></li>
<li id="menu-item-22" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-22"><a href="http://localhost/proenergy/index.php/kontakt/">Kontakt</a></li>
</ul>
		</div>

		<div class="clear"></div>
		</div> <!-- HEADER END -->
	</div>
	<div class="mid-bar-main">
		<div class="wrapper">

			<div class="slider">

			<div class="zamowprezentacje button-big"><a href="#">Zamów prezentację</a></div>

			</div>
			<div class="clear"></div>

		</div>		<!-- MID BAR WRAPPER END -->
	</div><!-- Mid bar END -->
	<div class="mid-bar-bottom"></div>

	<div id="container">

			<div class="wrapper">
				<div class="clear"></div>

						<div id="content-main">   

									<div class="box-bar">

											<div class="box-main box320">
													<div class="box320top"></div>
													<div class="box320middle"> 

											<h4>Minimedic</h4>			<div class="textwidget"><img src="http://localhost/proenergy/wp-content/uploads/2012/07/produkt1.jpg" height="140" width="280" alt="alt" />
<a href="#">zobacz</a></div>

																		</div>
															<div class="box320bottom"></div>
															<div class="box320cien"></div>

														</div>

											<div class="box-main box320 srodkowy">
													<div class="box320top"></div>
													<div class="box320middle"> 

											<h4>Medic Harmonie</h4>			<div class="textwidget"><img src="http://localhost/proenergy/wp-content/uploads/2012/07/produkt2.jpg" height="140" width="280" alt="alt" />
<a href="#">zobacz</a></div>

																		</div>
															<div class="box320bottom"></div>
															<div class="box320cien"></div>

														</div>

											<div class="box-main box320">
													<div class="box320top"></div>
													<div class="box320middle"> 

											<h4>Thermograf Scan 2001</h4>			<div class="textwidget"><img src="http://localhost/proenergy/wp-content/uploads/2012/07/produkt3.jpg" height="140" width="280" alt="alt" />
<a href="#">zobacz</a></div>

																		</div>
															<div class="box320bottom"></div>
															<div class="box320cien"></div>

														</div>

									</div>		

</div>
							</div>
								<div class="clear"></div></div><!-- CONTENT MAIN END -->
         	  	</div> <!-- CONTAINER MAIN WRAPPER END -->
	<div class="clear"></div>
	</div> <!-- CONTAINER- MAIN END -->

	<div class="wrapper">
<hr/>
			</div>

	<div class="clear"></div>
		<div id="footer">
		<div class="wrapper">
			<span class="f-left"> ©  2012 Pro Energy. Wszelkie prawa zastrzeżone.</span>
			<span class="f-left footer-menu">   <a href="#">Mapa witryny</a> | <a href="#">Praca</a> | <a href="#">Kontakt</a></span>

			<span class="f-right a-right"><a href="http://www.studiokreacja.pl" title="Studio graficzne poznań">studio graficzne <img src="http://localhost/proenergy/wp-content/themes/proenergy/images/kreacja.png" width="70" height="21" alt="kreacja" /></a></span>

		<div class="clear"></div>
		</div>

	</div>
	</body>
</html>

Dlaczego najpierw działa, a jak tylko jest wdrożone do wordpressa od razu się sypie?!

Zobacz 4 odpowiedzi - od 1 do 4 (z 4 łącznie)

Moderator Paweł Knapek
(@adpawl)

13 lat, 6 miesięcy temu

Robisz szablon od zera, czy bazujesz na innym?

Zgaduję, że twoje problemy wynikają z dziedziczenia.
Czasem przydaje się reset

Twórca wątku Bazan
(@bazan)

13 lat, 6 miesięcy temu

Uzywam resetu, ten szablon robiłem od 0. HTML I CSS przed wdrożeniem w wordpress waliduje się poprawnie.

Nie rozumiem po prostu tego, że klasy mi się prawie nie zmieniają (tylko w menu, ale struktura strony jest nienaruszona), css jest ten sam, a jednak bez wordpressa działa dobrze a na wordpressie już źle.

@edit
Znalazłem jakiś bug, mianowicie coś na samym początku dokumentu dodaje mi bardzo dużo spacji. Jeszcze przed doctype.
Wie ktoś co to jest i jak to usunąć? Validator wyświetlił mi błąd, że nie może być nic przed informacją o doctype.

Dobra te spacje były od adminbara 😮 Miałem jakiś dziwny skrypt na usunięcie go. Po wyłączeniu go w panelu admina nie ma już tego.

Moderator Paweł Knapek
(@adpawl)

13 lat, 6 miesięcy temu

Może zapisujesz pliki z niewłaściwym kodowaniem?

Co do wspomnianych różnic, to trudno się wypowiadać nie mając realnego porównania. Dopiero jak byś zapodał linka do strony z wdrożonym pod wp szablonem, to można by szukać przyczyny.

Twórca wątku Bazan
(@bazan)

13 lat, 6 miesięcy temu

Robie reinstalacje i mam nadzieje ze teraz bedzie dobrze, kodowanie UTF-8.

@edit
Faktycznie problem był z kodowaniem.

Używałem UTF-8, a należy użyć UTF-8 BEZ BOM. Dzięki 🙂

Zobacz 4 odpowiedzi - od 1 do 4 (z 4 łącznie)

Temat ‘WordPress psuje wyglad na IE’ jest zamknięty na nowe odpowiedzi.

Tematy

Najbardziej popularne tematy

Tematy bez odpowiedzi

Wątki niezwiązane ze wsparciem

Rozwiązane wątki

Nierozwiązane tematy

Wszystkie tematy