Witam, mam pewien problem, nie umiem sobie już z tym poradzić. Chodzi o to, że miałem 2 Divy, początkowo w lewym miały być jakieś zwykłe informacje, natomiast w drugim ładowana zawartość. Jako, że pole zrobiłem z zaokrąglonymi rogami oraz gradientem, udało mi się zrobić mniej więcej tak jak być powinno, przy czym na każdej przeglądarce jest to wyświetlane inaczej. Nie wiem czy to poprzez ilość div-ów czy przez co. Poniżej zamieszczam kody:
index.php:
<body>
<center>
<div id="strona">
<br />
<div id="header">lalalalalalallala head</div>
<div id="srodek">
<div id="lewa">
<?php include('incl/box.inc'); ?>
</div>
<div id="prawa">
<div id="top"></div>
<div id="mid">
<div id="tresc">
<?php include('incl/glowna.inc'); ?>
</div>
</div>
<div id="bot"></div>
</div>
</div>
<div id="stopka" style="color:#FFF">
<a href="javascript:ajaxpage('incl/glowna.inc','tresc')" title="index" class="menu">Start</a> :
<a href="javascript:ajaxpage('incl/ja.inc','tresc')" title="index" class="menu">O mnie</a> :
<a href="javascript:ajaxpage('incl/kontakt.inc','tresc')" title="index" class="menu">kontakt</a> :
</div>
</div>
</center>
</body>
style.css:
#strona {
width:800px;
min-height:900px;
background-color:#8692a8;
margin:0 auto;
}
#header {
width:727px;
height:370px;
background-color:#fff;
}
#srodek {
width:740px;
vertical-align:top;
}
#lewa {
background-image:url(obrazki/lewa.png);
background-repeat:no-repeat;
width:230px;
height:473px;
text-align:left;
margin:auto;
padding:5px;
display:inline-table;
font-size-adjust:inherit;
}
#prawa {
width:483px;
min-height:473px;
text-align:left;
margin:auto;
display:inline-table;
}
#top {
background-image:url(obrazki/top-zaw.png);
background-repeat:no-repeat;
height:21px;
width:483px;
display:inline-table;
}
#mid {
background-image:url(obrazki/mid-zaw.png);
width:483px;
display:inline-table;
}
#bot {
background-image:url(obrazki/bot-zaw.png);
background-repeat:no-repeat;
height:26px;
width:483px;
display:inline-table;
}
#tresc {
background-image:url(obrazki/zawartosc.png);
background-repeat:no-repeat;
width:473px;
height:417px;
padding:5px;
text-align:left;
display:inline-table;
}
#stopka {
background-image:url(obrazki/stopka.png);
background-repeat:no-repeat;
width:573px;
height:57px;
clear:both;
margin-top:20px;
padding-top:6px;
word-spacing: 5px;
}
Na Firefoxie jest wyświetlana strona dobrze, na operze "prawa" jest niżej, natomiast w IE "lewa" jest niżej niż drugi div obok.
Prosiłbym o jakiekolwiek sugestie, jeśli jest też inny sposób na rozwiązanie zamiast tylu divów, też bym prosił o radę.
Pozdrawiam, Patryk.