Forum PHP.pl

Może pytanie wydaje się banalne, ale męczę się nad tym już jakiś czas. Jak zrobić w IE (ja mam akurat IE6, ale myślę, że w późniejszych wersjach jest podobny problem) poziomą linię (niech będzie, że na całą szerokość) o wysokości dokładnie 1px. Próbowałem hr i div, ale zawsze wychodzi wysokość 2px mimo, że daję height:1. Zorientowałem się, że w IE blok nie może mieć mniejszej wysokości niż jedna linia czcionki dlatego daję font-size:0.

Naprawdę nie rozumiem czemu jest z tym aż taki kłopot. Nie chcę przecież nic innego jak dać na stronie element blokowy (obojętnie już jaki), który będzie miał jakiś tam mój kolor i wysokość 1. Tylko tyle.

HTML

[HTML] pobierz, plaintext 
costam
<div class="line"></div>
costam
[HTML] pobierz, plaintext 

CSS

[HTML] pobierz, plaintext 
*{margin:0;padding:0}
.line{height:1;font-size:0;background-color:#FF0000}
[HTML] pobierz, plaintext 

Dzięki. Chyba zrobię po prostu tak, że dam div (nad tym miejscem, w którym planowałem linię) z border-bottom: 1px solid #FF0000. Lepsze by było rozwiązanie z hr, bo blok powyżej mógłbym modelować z większą swobodą (np. margin w takim wypadku odpada - muszę zagnieździć kolejnego div), ale mimo zerowania marginesów i obramowania hr w IE wciąż ma jakieś pozostałości po kilka px u góry i dołu (gdy zaznaczam kursorem w przeglądarce).

Może ktoś inny ma jeszcze jakąś propozycję?

"Dlaczego ustawiasz height na 1?"
Chcę mieć po prostu linie oddzielające tekst. Jakiś margines sobie dołożę potem, ale linia ma mieć właśnie 1px i tu jest problem, bo gdy już będę chciał wszystko dokładnie ułożyć, to w Firefoxie i IE będzie to inaczej wyglądało ze względu właśnie na ten dziwny dodatek do hr w IE.

Ten post edytował aeaeae 16.05.2011, 17:28:24

Bardziej ciekawił mnie 1 zamiast 1px.

Aaa, o to Ci chodziło. Z głupoty.
Mimo wszystko skopiowałem Twoje rozwiązanie (z "px") i hr w ie(6) wciąż ma po 7px dodatkowych u góry i dołu ...

Teraz moja linia wygląda tak:

[HTML] pobierz, plaintext 
<div style="height:1px;border-top:1px solid #000000;font-size:0px"></div>
[HTML] pobierz, plaintext 

Zostaje tylko sprawa tego, że jedna przeglądarka zalicza border do height a druga nie (chyba ), więc różnica wyniesie pomiędzy nimi 1px (tyle to przeżyję). No i dochodzi sprawa poprawności - wolałbym mieć hr tam gdzie myślę o linii i tam gdzie jej używam, a nie div.

Ten post edytował aeaeae 16.05.2011, 18:08:14

Nawet display: block, dla hr nie pomaga na ie6? Ona chyba wyświetla hr jako element inline, a reszta przeglądarek jako block, ale głowy nie dam.

Tak też nie pomaga na tę 10letnią przeglądarkę?

[CSS] pobierz, plaintext 
hr {
line-height:0px; 
font-size:0; 
border:0px; 
height: 0px;
border-top:1px solid #FF0000; 
}
[CSS] pobierz, plaintext 

Jest niewzruszona. (na display:block też)
Właśnie sprawdziłem na IE7 pod Vistą. Tam też identyczny problem.

Czy mógłby ktoś sprawdzić dla nowszych IE?

Z tego, co czytam teraz na necie, to tragedia jest z kompatybilnością hr. Każda przeglądarka zupełnie inaczej to wyświetla: niektóre np. budują hr z border, podczas gdy inne inaczej. OMG, ja chcę prostą stronę napisać (przynajmniej pod względem html/css), a tu takie zabawy, no nie ...