ďťż

[XHTML/CSS] padding, margin Inaczej pod IE, a inaczej pod FF

Podstrony

telcocafe

Witam! :D
Mam taki problem: zrobiłem stronkę (niżej załącze kod)
--> pod Firefoxem wygląda nieco inaczej niż pod IE. Może popełniłem jakiś mały błąd, albo cały kod jest do bani?
// górny margines w polu na tekst w Fiferoxie jest 2 razy mniejszy niż pod IE, a także cała "kartka papieru" nie jest na środku (pod FF)

index.html
<?xml version="1.0" encoding="ISO-8859-2"?> <!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" xml:lang="pl"> <head> <meta http-equiv="Content-type" content="text/html; charset=iso-8859-2" /> <title> tytuł strony </title> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <div id="glowny"> <div id="gora_1"> </div> <div id="gora_2"> </div> <div id="gora_3"> <p> In Curabitur at vel tincidunt nibh. </p> </div> <br class="clearboth" /> <div id="tresc"> <p> Lorem ipsum dolor sit amet consectetuer laoreet metus orci Maecenas augue. Massa dolor ut ante dolor tincidunt Sed sed ante Aenean pede. Sit odio gravida sapien sem Nunc malesuada Aenean tincidunt consectetuer Vestibulum. Elit ac nunc odio dui libero ac consequat Sed sagittis orci. A consectetuer at neque gravida arcu porttitor Lorem In malesuada tortor. Pretium consequat Aenean ligula amet nibh Morbi vestibulum Donec Aenean convallis. Cras Suspendisse. <br /> <br /> Dui atibus quam ac dolor In Curabitur at vel tincidunt nibh. Hac nec Donec Curabitur fringilla metus laoreet a et rutrum parturient. Justo id euismod velit ut Donec libero sed orci Vivamus ac. Id eget rhoncus iaculis vitae cursus in et nisl eget Morbi. Congue semper malesuada nunc leo mauris tempus consectetuer pellentesque metus Vivamus. Ac dolor elit justo pede elit congue volutpat tellus porttitor pulvinar. Velit nonummy mauris. <br /> <br /> Lobortis tincidunt justo Quisque lorem sem convallis dui sem sit id. Sit hac ipsum molestie Quisque Aliquam elit Mauris Vivamus ut est. Neque arcu a adipiscing Vestibulum accumsan pretium eget laoreet quis lacus. Porttitor consectetuer magna eleifend justo tempor Nunc sed ligula leo vitae. Rhoncus dictumst et Aliquam et hendrerit gravida leo Mauris. </p> <p class="right"> Lorem ipsum dolor sit... </p> <p> <br /> br <br /> br <br /> br <br /> br <br /> br <br /> br <br /> br <br /> br <br /> br <br /> br <br /> br <br /> </p> </div> <div id="menu"> <p> << previous | 13 | next >> </p> </div> <div id="dol"> </div> </div> </body> </html>

style.css
body { margin: 30px; text-align: center; background-color: #FFFFFF; } br#clearboth { clear: both; } div#glowny { text-align: left; width: 473px; background-image: url('img/img__08.jpg'); background-repeat: repeat-y; } div#gora_1 { height: 87px; width: 217px; float: left; background-image: url('img/img__03.jpg'); } div#gora_2 { height: 87px; width: 109px; float: left; background-image: url('img/img__04.jpg'); } div#gora_3 { height: 87px; width: 147px; float: left; background-image: url('img/img__05.jpg'); } div#gora_3 p { text-align: right; padding-top: 60px; padding-right: 40px; font-size: 9px; font-family: Verdana, Tahoma, sans-serif; } div#tresc { padding-top: 20px; margin-top: 20px; width: 473px; background-image: url('img/img__07.jpg'); background-repeat: no-repeat; } div#tresc p { padding-top: 20px;

stronka jest także TUTAJ
Te 2 grafiki może obrazowo wyjaśnią mó problem POD IE oraz POD FF

// grafika bez_tekstu,
z_tekstem,

Przeglądrki różnią się domyślnymi paddingami i marginami, więc najlepiej jest ustawić sobie wszystko na zero jeśli tego ma nie być. Tzw. wszystko określić samemu, a nie zdawać się na przeglądarki :P Aha, ten sam problem pojawia się w nagłówkach h1, h2, h3...
div#gora_3 p { text-align: right; padding: 60px 40px 0 0; margin:0; font-size: 9px; font-family: Verdana, Tahoma, sans-serif; } div#tresc p { padding: 20px 0 0 0; margin: 0; }

Zrozumiałem o co Ci chodzi :) , ale to chyba jeszcze nie to ( zmieniłem kodi błąd nie znika :excl: )

polecam body { padding: 0; margin:0; }

Poprawiłem pare rzeczy i wyszło dosyć dobrze :) , ale jeszcze taki mały szczegół: tło w bloku z tym tłem-ptakeim ustawiłem na center
background-repeat: no-repeat; background-position: center;
i przeglądarki chyba różnie interpertują ten środek :unsure: bo w IE jest niżej niż w FF. Może jakimś innym sposobem to zrobić? Dałem to tak bo chciałem aby tło-ptak sie nie powtarzał, ale tło niżej (jeśli tekst bedzie dłuugi) sie powtarzało i zrobiłem to tak ze tło bloku z patakiem --> no-repeat, a blok niżej (pod nim) tło repeat-y ( z odpowiednimi grafikami :) )

//poprawiony kod CSS (może komuś się przyda)
body { text-align: center; padding: 0; margin: 0; } br#clearboth { clear: both; } div#glowny { text-align: left; width: 473px; background-image: url('img/img__08.jpg'); background-repeat: repeat-y; margin: auto; padding; 0; } div#gora_1 { height: 87px; width: 217px; float: left; background-image: url('img/img__03.jpg'); } div#gora_2 { height: 87px; width: 109px; float: left; background-image: url('img/img__04.jpg'); } div#gora_3 { height: 87px; width: 147px; float: left; background-image: url('img/img__05.jpg'); } div#gora_3 p { text-align: right; padding: 60px 40px 0 0; margin: 0; font-size: 9px; font-family: Verdana, Tahoma, sans-serif; } div#tresc { width: 473px; background-image: url('img/img__07.jpg'); background-repeat: no-repeat; background-position: center; } div#tresc p { padding-top: 0; padding-bottom: 0; padding-left: 35px; padding-right: 12px; margin: 0; font-size: 9px; font-family: Verdana, Tahoma, sans-serif; text-indent: 36px; } div#menu { background-image: url('img/img__08.jpg'); } div#menu p { font-family: Verdana, Tahoma, sans-serif; font-size: 9px; padding-left: 35px; margin: 0; } div#dol { width: 473px; height: 22px; margin: 0; background-image: url('img/img__11.jpg'); } .right { margin-right: 20px; text-align: right; }
Użytkownik norek997 edytował ten post 15 marzec 2006, 13:17

Sitedesign by AltusUmbrae.

Darmowy hosting zapewnia PRV.PL