Forum PHP.pl

Witam,

Piszę ponieważ nie potrafię sobie poradzić z problemem, otóż mam kod HTML:

[HTML] pobierz, plaintext 
...
<div id="black-content">
	<h2>Tytuł</h2>
        <div class="black-box"><img src="adres.jpg">opis</div>
        <div class="black-box"><img src="adres.jpg">opis</div>
        <div class="black-box"><img src="adres.jpg">opis</div>
</div>
...
[HTML] pobierz, plaintext 

oraz kod CSS:

[CSS] pobierz, plaintext 
...
#black-content {
	border:1px solid #000;
	background:#000;
	width:600px;
 
}
 
 
.black-box {
	float: left;
	width: 33%;
}
...
[CSS] pobierz, plaintext 

W Firefoxie wyświetla prawidłowo, czyli każdy obrazek jest w swojej kolumnie.
W IE elementy .black-box są ustawione każdy pod sobą.

Jak prawidłowo napisać kod pod IE?

U mnie w IE, ten trzeci div jest linijke niżej, z prostego powodu IE to IE i najlepiej je olać, ale niestety ktoś tego jeszcze używa.
Dodaj znak nowej linii pomiędzy znacznikiem img a opisem:
<img ...><br> opis ,
W firefoxie to nic nie zmieni, a w IE opis będzie pod spodem.
no i zwróć uwage na obramowanie tego diva "black-content", szerokosc obramowania w tym wypadku 1px, zabiera wsumie 2px (z lewa 1px i prawej 1px), z tych 600 na całość, więc albo zrezygnuj z obramowania albo to cechy width dodaj te 2px.
Zawsze możesz javascriptem ustawić różny arkusz stylów, dla różnej przeglądarki (w IE bez obramowania, w reszcie z obramowaniem).

Może istnieje lepsze rozwiązanie, ale jakoś nic mi nie przychodzi do głowy.

jeżeli black-content jest ustawione na sztywno 600px to nie lepiej Ci boxy podrzedne ustawić też na sztywno w px?
moze dodanie float dla black-content coś pomoże