Skocz do zawartości

Problem z padding pod IE

Burn

Przez Burn
w HTML i CSS

Rekomendowane odpowiedzi

Burn Newbie

Burn

Opublikowano
Opublikowano

Witam.

Zauważyłem na forum tematy o problemach z padding i margin. Przeczytałem je i przetestowałem.

Pod IE kolumna z ustawionym paddingiem jest o 10 pikseli szersza przez co rozjeżdża sie strona. Zastosowanie display:inline; dla klasy .szerokoscmenu rzeczywiście sprawia że pod IE kolumna ma odpowiednią szerokość, ale wtedy elementy w menu są wypisywane w jednej linii. Mógłbym dodawać znaki końca linii lub inaczej wymuszać odstępy, jednak mam nadzieje ze ktoś zaproponuje lepsze rozwiązanie.

Dzięki.

Kod:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html> 
<head>
<style type="text/css">
body{margin:0;padding:0;}

#srodek{width:960px;height:327px;background:blue;margin-top:16px;}
#srodek1{background:yellow;width:188px;height:327px;float:left;text-align:left;}
#srodek2{width:523px;float:left;margin-left:16px;height:327px;}
#srodek3{background:brown;width:218px;float:left;margin-left:15px;height:327px;}
.szerokoscmenu {width:188px;position:relative;padding-left:10px}
</style>
</head>

<body>
<div id="cala_strona" align="center">
<div id="srodek">
	<div id="srodek1">MENU<br>
		<div>
			  <div class='szerokoscmenu'>pierwszy link</div>
			  <div class='szerokoscmenu'>drugi link</div>
			  <div class='szerokoscmenu'>trzeci link</div>
		</div>
	</div>
	<div id="srodek2"></div>
	<div id="srodek3"></div>
</div>
</div>
</body>
</html>

Odnośnik do komentarza
Udostępnij na innych stronach
yavaho Newbie

yavaho

Opublikowano
Opublikowano

Przy tym doctype

.szerokoscmenu {width:188px;position:relative;padding-left:10px}

serokość tego bloku wynosi 188+10

a więc nie ma prawa się zmieścić w całości

w ten sposob zobaczysz co się dzieje

.szerokoscmenu {width:188px;position:relative;padding-left:10px;background:gray;}

.

Odnośnik do komentarza
Udostępnij na innych stronach
Burn Newbie

Burn

Opublikowano
  • Autor
Opublikowano

zero3 - dzięki za poradę. W normalnej sytuacji oczywiście była by ona idealnym rozwiązaniem.

Pozostawiłem w tym przykładzie divy, gdyż muszę mieć tam obiekty o wymiarach 188px na 20px (czyli na całą szerokość kolumny).

W tych obiektach będą mniejsze elementy, gdzie w zależności od najechania myszką lub kliknięcia będą sie wywoływać rożne java scripty.

Czy jest jakiś prosty sposób, aby w lewej kolumnie zamieścić divy (lub inne bloki o szerokości na całą kolumne), które będą miały lewy margines np. 10px.

Można zastosować siłowe rozwiązania (np. wstawienie z lewej strony pustego diva o szerokości 10px lub zrobić to na tabelkach) jednak zależy mi na dobrym podejściu do problemu.

EDIT:

Twoja propozycja też znajduje zastosowanie w moim przykładzie. Dzięki zero3.

<ul style="margin:0;padding:0;list-style: none;">
		  <li style="background:gray;">pierwszy element</li>
		  <li style="background:gray;">drugi element</li>
		  <li style="background:gray;">trzeci element</li>
		</ul>

Czy zna ktoś jeszcze inne rozwiązania takiej sytuacji?

Odnośnik do komentarza
Udostępnij na innych stronach
yavaho Newbie

yavaho

Opublikowano
Opublikowano
Czy jest jakiś prosty sposób, aby w lewej kolumnie zamieścić divy (lub inne bloki o szerokości na całą kolumne), które będą miały lewy margines np. 10px.
W tym momencie Cię nie rozumiem. Albo na całą szerokość albo z marginesem i wtedy nie będą na całą szerokość?

A z powyższej mojej wypowiedzi nic nie wywnioskowałeś?

W ten sposób też nie może być?

.szerokoscmenu {width:178px;position:relative;padding-left:10px}

Przy tym doctype, ktore wybrałeś jeżeli dajesz jakiemuś elementowi wartość padding to ten element zwieksza swoj rozmiar o tą właśnie wartość padding tak samo jak przy margin. Różnią się tylko powierzchią wewnątrz gdzie bedzie tło.

.

Odnośnik do komentarza
Udostępnij na innych stronach
Burn Newbie

Burn

Opublikowano
  • Autor
Opublikowano

Nieprecyzyjnie się wypowiedziałem.

Chciałem aby miały z lewej strony margines (np. 10px) i od tego miejsca rozciągały się w prawo aż do prawego końca kolumny.

Przy tym doctype, ktore wybrałeś jeżeli dajesz jakiemuś elementowi wartość padding to ten element zwieksza swoj rozmiar o tą właśnie wartość padding tak samo jak przy margin. Różnią się tylko powierzchią wewnątrz gdzie bedzie tło.

Dzięki - tej informacji mi brakowało. Wszystko już się zgadza.

Odnośnik do komentarza
Udostępnij na innych stronach
yoanca Newbie

yoanca

Opublikowano
Opublikowano

Zamiast ustawic marginesy i paddingi div-ow, lepiej zastosowac "wewnetrzne" formatowanie juz umieszczonego w divie tekstu. Umieszczasz divy na stronie tak jak chciales z juz pomierzonymi szerokosciami, ale bez marginesow i paddingow, bo w szerokosci zawsze wyjdzie Ci roznica miedzy IE i Firefox. W zamian za to np do stylu listy [ktora jest w divie] dodajesz: ul {padding: 0 10px 0 10px}, tak samo do wszystkich elementow tekstowych p, h1 itd. Moze to jest troche upierdliwe, bo do kazdego elementu musisz to dodawac, ale przynajmniej likwiduje to Twoj poprzedni probem.

Innym rozwiazaniem jest tzw. "star html hack", o ktorym mozesz duzo znalezc w google.

Odnośnik do komentarza
Udostępnij na innych stronach
yavaho Newbie

yavaho

Opublikowano
Opublikowano
Umieszczasz divy na stronie tak jak chciales z juz pomierzonymi szerokosciami, ale bez marginesow i paddingow, bo w szerokosci zawsze wyjdzie Ci roznica miedzy IE i Firefox.
W ktorym doctype? Jeżeli wiesz jaki standard wybrać to wszystkie przeglądarki jednakowo policzą pixele. Z tą różnicą że niektóre nie przerzucą elementu w dół jak się coś w nim nie mieści (dziecko szersze od rodzica) tylko potraktują to podobnie jak overflow:hidden;

.

Odnośnik do komentarza
Udostępnij na innych stronach

Zarchiwizowany

Ten temat przebywa obecnie w archiwum. Dodawanie nowych odpowiedzi zostało zablokowane.

Tematy

  • Ostatnio przeglądający   0 użytkowników

    • Brak zarejestrowanych użytkowników przeglądających tę stronę.
×
×
  • Dodaj nową pozycję...

Powiadomienie o plikach cookie

Umieściliśmy na Twoim urządzeniu pliki cookie, aby pomóc Ci usprawnić przeglądanie strony. Możesz dostosować ustawienia plików cookie, w przeciwnym wypadku zakładamy, że wyrażasz na to zgodę. Warunki użytkowania Polityka prywatności