Forum PHP.pl > [HTML][CSS]Problem w IE z odstępem między divami

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [HTML][CSS]Problem w IE z odstępem między divami

dawidoff86

16.04.2010, 10:03:00

witam!
mam wydaje mi się bardzo prosty problem. otóż mam 3 divy, które ułożone są obok siebie. dwa boczne przechowują obrazek, środkowy jakiś dowolny tekst. problem z tym jest taki że w przeglądarce IE występuje małą przerwa pomiędzy divami bocznymi, a środkowym.
kod strony wygląda tak:

[HTML] pobierz, plaintext 
    <body>
        <div id="pasek_naglowek_lewy"><img src="grafika/lewy.gif" alt="" style="width: 50px; height: 50px;"/></div>
        <div id="pasek_naglowek_prawy"><img src="grafika/prawy.gif" alt="" style="width: 50px; height: 50px;"/></div>
         <div id="pasek_naglowek">Przykładowy tekst!</div>
    </body>
[HTML] pobierz, plaintext

a css

[CSS] pobierz, plaintext 
html, body
{
    background-color: green;
    text-align: center;
    color: #000;
    margin: 0;
    padding: 0;
}
 
#pasek_naglowek
{
    margin-left: 50px;
    margin-right: 50px;
    background: url("grafika/srodkowy.gif");
    background-repeat: repeat;
    height: 50px;
    padding-left: 0px;
    padding-right: 0px;
    text-align: left;
    color: white;
    overflow: visible;
}
 
 
#pasek_naglowek_lewy
{
    margin: 0px;
    padding: 0px;
    width: 50px;
    height: 50px;
    float: left;
    overflow: visible;
    position: relative;
    background-color: transparent;
}
 
#pasek_naglowek_prawy
{
    margin: 0px;
    padding: 0px;
    width: 50px;
    height: 50px;
    float: right;
    overflow: visible;
    position: relative;
    background-color: transparent;
}
[CSS] pobierz, plaintext

w IE wygląda to następująco:

a efekt jaki chce uzyskać to:

pedro84

16.04.2010, 10:15:31

Musisz ustawić zerowy margin oraz padding ale dla <img>. Powinno pomóc.

dawidoff86

16.04.2010, 10:18:33

powinno ale nie pomogło

[HTML] pobierz, plaintext 
<div id="pasek_naglowek_lewy"><img src="grafika/lewy.gif" alt="" style="width: 50px; height: 50px; padding: 0px; margin: 0px;"/></div>
<div id="pasek_naglowek_prawy"><img src="grafika/prawy.gif" alt="" style="width: 50px; height: 50px; padding: 0px; margin: 0px;"/></div>
[HTML] pobierz, plaintext

wszystko pozostało bez zmian.

pedro84

16.04.2010, 10:30:17

W jakiej wersji IE?

dawidoff86

16.04.2010, 10:34:38

IE7

a może jest jakiś inny sposób na uzyskanie takiego efektu?

mortus

16.04.2010, 11:11:17

A te marginesy co robią:

[CSS] styl.css - pobierz, plaintext 
#pasek_naglowek {
margin-left: 50px;
margin-right: 50px;
background: url("grafika/srodkowy.gif");
background-repeat: repeat;
height: 50px;
padding-left: 0px;
padding-right: 0px;
text-align: left;
color: white;
overflow: visible;
}
[CSS] styl.css - pobierz, plaintext

Poza tym źle to robisz. Umieszczaj obrazki jako background dla elementów div, a nie w znacznikach <img />. Poczytaj na Google o "rounded corners" lub po polsku "zaokrąglone rogi". Może naprowadzi Cię to na właściwe rozwiązanie.

dawidoff86

16.04.2010, 11:38:59

Cytat(mortus @ 16.04.2010, 12:11:17 )

A te marginesy co robią:

skoro div lewy i prawy mają po 50pixeli,to te marginesy powodują że div środkowy rozpocznie się w miejscu, gdzie kończy się lewy i zakończy gdzie rozpoczyna się prawy.

krzysztof_kf

16.04.2010, 16:57:40

[CSS] pobierz, plaintext 
<style>
 
#lewa {
width: 100px;
height: 30px;
background: #3399ff;
float: left;
}
 
#srodek {
width: 500px;
height: 30px;
background: #00ff00;
float: left;
}
 
#prawa {
width: 100px;
height: 30px;
background: #ff0000;
float: left;
}
</style>
 
<div id="lewa"></div>
<div id="srodek"></div>
<div id="prawa"></div>
 
[CSS] pobierz, plaintext

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.