Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: overflow:auto; i poziomy scrollbar w IE
Forum PHP.pl > Forum > Po stronie przeglądarki > CSS
starach
Witam.
Kończę przerabiać mały czat i mam problem z wyświetlaniem wiadomości ( oczywiście tylko w IE )
Problem polega na tym iż w IE szerokość kontenera #chat jest większa o szerokość paska przewijania przez co pokazuje się dolny pasek przewijania.
Tak powinno to wyglądać a tak wygląda to w IE
Poniższy kod generowany jest przez skrypt. ( trochę go pozmieniałem żeby lepiej się czytało, chyba nie popełniłem przy tym błędów )
  1. <div id="chat_container">
  2. <div id="messages">
  3. <div id="chat">
  4. <div id="p92">
  5. <div class="message2">
  6. <a href="javascript:void(92)" title="Usuń post" onclick="delete_post('92')">[x]</a>
  7. (wczoraj, o 19:47) <b><a href="./memberlist.php?mode=viewprofile&u=2" style="color: #AA0000;" class="username-coloured">root</a></b>: <span class="message_text">dagadgadg</span>
  8. </div>
  9. </div>
  10. <div id="p91">
  11. <div class="message1">
  12. <a href="javascript:void(91)" title="Usuń post" onclick="delete_post('91')">[x]</a>
  13. (wczoraj, o 19:47) <b><a href="./memberlist.php?mode=viewprofile&u=2" style="color: #AA0000;" class="username-coloured">root</a></b>: <span class="message_text">dagdagad</span>
  14. </div>
  15. </div>
  16. </div>
  17. </div>
  18. </div>
CSS:
CODE
#chat_container {
background-color: #C0C8D0;
border: 1px solid #000;
padding: 0;
margin: 0;
}
#messages {
float: left;
width: 70%;
height: 160px;
margin: 0;
padding: 0;
overflow: auto;
}
#chat {
width: 100%;
text-align:left;
}
.message1, .message2 {
width: 100%;
height: 25px;
padding: 2px 0 2px 0;
line-height: 25px;
}
.message1 {
background-color: #ECECEC;
}
.message2 {
background-color: #DCE1E5;
}
devnul
usuń z klas message1 i message2 parametr width:100% - ie rozumie go dosłownie i wlicza w to także szerokość scroola pionowego należącego do rodzica - z tąd te problemy. div jako że jest typu blokowego sam się dopasuje
starach
Nic to nie daje :/, ale znalazłem inny sposób na ominięcie tego błędu.
IE wspiera parametry overflow-x i y ustawiłem
Kod
#messages {
    float: left;
    width: 70%;
    height: 160px;
    margin: 0;
    padding: 0;
    overflow: auto;
    overflow-x: hidden;
    overflow-y: scroll;
}

Pierwszy overflow jest dlatego że nie wiem czy inne przeglądarki wspierają tą właściwość.
W każdym razie działa. Schowałem poziomy scrollbar, a pionowy jest widoczny.
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.