problem z ulozeniem strony w firefoxie, a w ie wszystko jest ok Opcje

[biehu]

Witam (IMG:http://forum.php.pl/style_emoticons/default/exclamation.gif) !

Zabralem sie za stworzenie, mojej pierwszej, stronki opartej w 100% na css i xhtml. Siedze juz nad tym kilka dni i nie moge rozwiazac jednego problemu (IMG:http://forum.php.pl/style_emoticons/default/sad.gif)

Adres to: http://bieszk.com/test

Po IE 6.0 wszystko wyglada ok, ale pod FireFoxem sie rozjezdza (IMG:http://forum.php.pl/style_emoticons/default/sad.gif)

Bylbym wdzieczny za wszelkie uwagi co jest tego przyczyna.


Z gory dzieki za pomoc
Biehu

[biehu]

:-( niestety, ale dalej nie pomaga

wkleilem dokladnie Twoj kod i efekt ten sam

oprocz tego, ze teraz sie rozjechaly te kreski, ale to nie istotne, bo trzebaby tylko pozmieniac wysokosci, to efekt jest wciaz ten sam tzn. pod FireFox'em wewnetrze div'y nie dostaja tla kontenera

przy testach wyszlo mi, ze powoduje to zastosowanie float: left, bo bez tego choc wewnetrzene div'y sa jeden pod drugim, zamiast obok siebie, to dostaja tlo


------------------------------------------------
po kilku ladnych godzinach
------------------------------------------------


wspomagany generatorem layout'ow oraz sztuka dedukcji :-) doszedlem do nastepujacego wniosku

aby wewnetrzne div'y, ktore sa ustawiane obok siebie dzieki float: left, dostaly tlo kontenera musi byc pod nimi umieszczony kolejny div o pelnej szerokosci z parametrem clear: both

dla przykladu umieszczam poprawny kod

css

body {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
background: #7b7b7b;
}


div#container {
background: #ffffff;
width: 753px;
border-bottom: 1px solid #636363;
border-right: 1px solid #636363;
margin: 0px auto 0px auto;
padding: 5px;
voice-family: "\"}\"";
voice-family: inherit;
width: 742px;
}
html>div#container {
width: 742px;
}

div#head-left {
float: left;
width: 250px;
height: 41px;
border-bottom: 3px solid #eaeaea;
margin: 0px;
padding: 0px;
voice-family: "\"}\"";
voice-family: inherit;
height: 38px;
}
html>div#head-left {
height: 38px;
}

div#head-right {
float: left;
width: 492px;
height: 41px;
border-bottom: 11px solid #eaeaea;
margin: 0px;
padding: 0px;
voice-family: "\"}\"";
voice-family: inherit;
height: 30px;
}
html>div#head-right {
height: 30px;
}

div#head-bottom {
clear: both;
width: 742px;
margin: 0px;
padding: 0px;
}

xhtml

<div id="container">

   <div id="head-left"><img src="img/_.gif" border="0" alt="" width="250" height="1" /></div>

   <div id="head-right"><img src="img/_.gif" border="0" alt="" width="492" height="1" /></div>

   <div id="head-bottom"><img src="img/_.gif" border="0" alt="" width="742" height="1" /></div>

</div>

chyba, ze ktos zna jakies lepsze rozwiazanie ?

Ten post edytował biehu 22.08.2005, 07:00:37