[CSS] IE6 wciąga border w rozmiary bloku, a inne przeglądarki dodają

	B O A R D
	» Board » Zadaj pytanie » Archiwum » Szukaj » Stylizacja

M E N U

» Nowości

» Archiwum

» Recenzje / Testy

» Board

» Rejestracja

Szukaj @ TwojePC

	OBECNI NA TPC
	» SebaSTS 16:39 » Venom79 16:35 » DJopek 16:35 » Tomasz 16:35 » MARtiuS 16:33 » Artaa 16:33 » tuptun 16:29 » dugi 16:28 » RoBakk 16:22 » soyo 16:22 » bajbusek 16:13 » Dexter 16:11 » Chavez 16:10 » rzymo 16:04 » metacom 16:04 » Sebek 16:01 » BONUS 15:57 » faf 15:54 » Visar 15:53 » rooter666 15:52 Dzisiaj przeczytano 41116 postów, wczoraj 25974 Szybkie ładowanie jest: włączone.

ccc

A R C H I W A L N A W I A D O M O Ś Ć

[CSS] IE6 wciąga border w rozmiary bloku, a inne przeglądarki dodają , kubazzz 3/01/09 20:56
width: 700px;
border: 1px solid black;

w Operze całkowita szerokość to 702px
w IE6 700px.

Jak to obejść?

SM-S908

pokaż przykładowy kod , rkowalcz 3/01/09 22:28
który sprawia problem, bo chyba to nie border jest problemem

albo ostatecznie hack dla ie6

#div { width: 702px; border: 1px solid black; }

#body > div { width: 700px; border: 1px solid black; } /*tego IE6 nie zobaczy, ale ie7 zobaczy*/
1. jest coś takiego , kubazzz 3/01/09 23:03
  <form action="" method="post" id="formularz">
  <div id="etap">
  <h3>Dane osobowe <a id="pomoc1" title="Objaśnienia">[?]</a></h3>
  
  <p class="pomoc" id="p_pomoc1">
  <strong>Objaśnienia:</strong><br/>
  
  <strong>Imię</strong> - Proszę wpisać swoje imię, jeśli obowiązują dwa to wpisać wg schematu: Anna Maria<br/>
  <strong>Nazwisko</strong> - Proszę wpisać swoje nazwisko<br/>
  <strong>Płeć</strong> - Proszę o zaznaczenie odpowiedniej<br/>
  <strong>Data urodzenia</strong> - Proszę wybrać odpowiedni dzień, miesiąc i rok<br/>
  </p>
  
  i CSS
  
  p.pomoc
  {
  width: 700px;
  border: 1px solid black;
  margin-bottom: 2px;
  display: none;
  }
  
  h3
  {
  display: block;
  width: 700px;
  height: 20px;
  line-height: 20px;
  color: #ffffff;
  font-size: 15px;
  border: none;
  margin-bottom: 1px;
  }
  
  potem jest javascript, ktory pokazuje ten paragraf po kliknieciu w znak zapytania.
  SM-S908
  1. dokładniej jest jquery , kubazzz 3/01/09 23:07
    $$("pomoc1").click(function(){
    $('#p_pomoc1").slideToggle(slow);
    });
    SM-S908
    1. a ten js , rkowalcz 3/01/09 23:29
      zmienia display: none; w p.pomoc na display: block;. Bo zmieniłem na display: block; ręcznie 9bo nie mam tego js) i w ie6, ff, o9 i safari mam tą samą szerokość tego akapitu. Zrób zrzut ekranu w ie6 i np. ff.
      1. zmiana na block nie pomaga, skriny , kubazzz 4/01/09 00:16
        zmieniłem domyślnie w css, display: block;
        http://fubaz.blink.pl/testy.jpg
        
        IE6
        Firefox
        Opera
        Safari
        
        W zasadzie można olać te 2 piksele, ale chciałbym wiedzieć co jest nie tak.
        SM-S908
        może mój IE6 źle działa , kubazzz 4/01/09 00:17
        nie wiem
        SM-S908
        no ale , rkowalcz 4/01/09 00:40
        działają jeszcze inne style, bo niby skąd to formatowanie tekstu i tła. Może coś jest dziedziczone.
        wpisz , rkowalcz 4/01/09 00:53
        w h3
        
        width: 700px !important;
        width: 698px;
        
        zamiast width: 700px;
        źle ma być , rkowalcz 4/01/09 01:03
        width: 700px !important;
        width: 702px;
        nie jest dziedziczone, sprawdzałem to, poza tym to dosyć proste formatowanie , kubazzz 4/01/09 01:21
        jak widać problem leżał gdzie indziej;)
        ale z tym important też dobry hint.
        SM-S908
Bez hacków - po prostu , Conroy 4/01/09 00:33
To znany błąd w IE6, błąd w interpretacji modelu pudełkowego (box model). Jeśli dla jednego elementu zadeklarujesz width i height oraz dodasz padding lub margin lub border to się tak spieprzy. Prostym rozwiązaniem, bez hacków jest zrobienie dwóch elementów.

Zatem należy robić:
div z height i width
div z padding/margin/border
tresc
/div
/div

I będzie po problemie.
Ew. można zamienić divy i wysokość i szerokośc deklarować w środku. Nigdy na raz.
To rozwiązuje Twój problem.
http://flickr.com/photos/myhacien
da
1. no właśnie bo jak zrobiłem width 690, padding-left 10px , kubazzz 4/01/09 00:41
  to w IE6 miałem ten padding, ale całkowita długość była 690...
  Pytanie czy w IE7 to rozwiązano?
  SM-S908
  1. Ale co rozwiązano? , Conroy 4/01/09 00:51
    Chcesz aby w IE6 było ok? To tak to możesz osiągnąć.
    Co z tego, że gdzie indziej jest ok, jak w IE6 nadal było by źle.
    Rozdzielisz na dwa divy (elementy) to będzie wszędzie dobrze.
    
    Nic nie odejmuj i nie dodawaj do siebie.
    Ustaw zewnętrzny na width 700px, wewnętrzny padding-left na te 10px i już. Całość będzie miała 700px i padding 10px - w każdej przeglądarce.
    
    P.S. Z innych metod - ustawienie któregoś DOCTYPE z XHTML też z tego co pamiętam pomagało na ten problem. Niestety nie pamiętam który to był DOCTYPE.
    http://flickr.com/photos/myhacien
    da
    1. szczerze mówiąc, w dupie mam IE6, jeśli w IE7 jest dobrze , kubazzz 4/01/09 00:53
      to po prostu to będzie not bug but a feature;)
      
      poszukam tego doctype jeszcze
      SM-S908
    2. dokladnie , rkowalcz 4/01/09 00:58
      ja ma
      
      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/...l1-transitional.dtd">
      
      i tego problemu dlatego nie widziałe. Dopisz na początku przed <html i nie trzeba hacka stosować
      1. ja miałem to , kubazzz 4/01/09 01:09
        <?xml version="1.0" encoding="utf-8"?>
        <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/...D/xhtml1-strict.dtd">
        <html xmlns="http://www.w3.org/1999/xhtml" lang="pl" xml:lang="pl">
        SM-S908
doctype , kubazzz 4/01/09 01:09
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/...l1-transitional.dtd">

http://css.maxdesign.com.au/.../about-boxmodel.htm

http://pl.wikipedia.org/wiki/Quirks_mode

http://pl.wikipedia.org/..._Explorer_box_model_bug

wywaliłem deklarację XML i działa dobrze..
Przy okazji animacje JS działają poprawnie bo wcześniej w IE6 jakoś tak skakały głupio...

Panie Boże, o nic nie proszę, ale niech IE6 wygynie, błagam..
SM-S908
ok dziękuję za pomoc, dla potomności niech pozostaną linki , kubazzz 4/01/09 01:20
coraz bardziej mam ochotę zrobić stronę, która po wykryciu IE6 wyśle użytkownika na grzyby...
SM-S908
Jeszcze pomęczę speców od CSS'a - inna zupełnie rzecz , kubazzz 4/01/09 02:09
robiąc długie formularze, żeby był ładny układ OPIS_POLA - INPUT, to robię listy

wygląda to tak:

<ul>
<li><label></label><input />
<li><label></label><input />
<li><label></label><input />
<li><label></label><input />
<li><label></label><input />
</ul>

Problem jest taki zawsze, że nierówno się pozycjonują opisy z polami typu input

http://fubaz.blink.pl/testy.html [css w HEAD]

Problem jest taki:
chcę, żeby checkboxy [i inne inputy] były wyśrodkowane, a nie na samej górze.
Poza tym, co widać w kroku czwartym, wszelkie manipulacje dotyczące wysokości, wysokości linii, itd, powodują rozjechanie się tego całego dziadostwa.

Nie umiem do tego podejść systemowo, trochę mi się te relacje niejasne wydają.
Mogę wszystko na sztywno "oblockować", ale na pewno da się to jakoś prościej zrobić.
SM-S908
1. zobacz tutaj , Holyboy 4/01/09 14:06
  http://www.uboard.pl/user/register
  Strength is irrelevant.
  Resistance is futile.
  We wish to improve ourselves.
  1. no ale to jest inaczej zrobione u Ciebie , kubazzz 4/01/09 14:37
    ja chcę ten wariant co ja mam, bo wiem że się da, nawet kiedyś mi wyszło, tylko coś pomieszałem.
    I właśnie nie wiem co jest kluczowe.
    SM-S908
    1. zrob screen , Holyboy 4/01/09 18:09
      co chcesz uzyskac
      Strength is irrelevant.
      Resistance is futile.
      We wish to improve ourselves.
      1. SKRINY: , kubazzz 4/01/09 20:59
        http://fubaz.blink.pl/testy.jpg
        http://fubaz.blink.pl/testy.html [bazowy plik, troche pozmieniany]
        SM-S908
      2. o dziwo w wariancie , kubazzz 4/01/09 20:59
        zwyczajnie jest tak jak chciałem, ino że tam nie ma wyrównania...
        SM-S908
2. hmm , DrLamok 4/01/09 20:31
  o css nie mam bladego pojęcia ale.... spróbuj dopisać...
  wlasnie sprawdzalem pod firefoxem i dziala... top/middle/bottom
  
  input[type="checkbox"]
  {
  vertical-align:middle;
  }
  1. hmm ale ten selektor [po atrybutach] z tego co wiem słabo działa , kubazzz 4/01/09 20:41
    w niektorych przegladarkach.
    SM-S908