[ Conica @ 30.03.2005. 00:25 ] @
Postovanje

Radim sajt sa css pozicioniranjem ali mi se javlja problem u ff i operi. Naime, nakon klika na link, strana se otvori ali se neki div-ovi lose pozicioniraju. Tek nakon refresh-a strane se layout pojavi tako kako treba.

Da li neko zna nacin da se ovo izbegne?

Ukoliko je pitanje ponovljeno, unapred se izvinjavam, ali je vecina tema nazvana "css problem" ... a ja nisam imala vremena da svaku pregledam

cheers
Cony
[ Br@nkoR @ 30.03.2005. 07:34 ] @
Najbolje bi bilo da nam daš kod ili deo koda u koji sumnjaš ili da nam daš link do sajta, jer ovako možemo samo da nagađamo.
[ noviKorisnik @ 30.03.2005. 07:41 ] @
Može biti da je problem do browsera jer primetio sam da postoji pojava brljanja (u FF) pri rekalkulaciji pozicija elemenata nakon dinamičkih akcija na strani (primer: izmena display propertija nekog elementa utiče i na ostale elemente). Neke od ovih stvari su verovatno otklonive, a za ostale ostaje da čekamo pametnije browsere.

(... okači svoj primer, please ;-))
[ Conica @ 30.03.2005. 09:47 ] @
Jope ja..

na zalost trenutno nisam u mogucnosti da postavim kod posto mi je kuci na mashini...greska je bila sto ga odmah nisam postavila. Ono sto odmah mogu da kazem jeste da se sadrzaji tih div-va dinamicki generisu. ponekad je to obican tekst iz baze, ponekad include fajl. Ima i situacije kada se generisu dodani div-ovi.

Dok ne postavim kod, pitanjce... da li je neko imao slicnih iskustva i koji su bili uzroci?

hvala
cheers
cony
[ Conica @ 30.03.2005. 17:20 ] @
Evo me kuci pa da postavim kod. Osim koda, uploadovala sam i screenshotove u ff i operi pre i posle refresh-a. UNAPRED SE IZVINJAVAM ZBOG DUZINE POSTA

Elem...kod stranice (poizbacivala sam neke php delove da ne zauzimaju previse mesta)
Code:

<div id="header">
    <div id="headerNavigation">
        FLASH OBJEKAT
    </div>
</div>
<div id="pane">
    <div id="paneLeft">
        DIV-OVI SA IZBOROM JEZIKA, SEARCH ITD.
    </div>
    <div id="paneContent">
        <div id="paneContentEmpty"><img src="images/space.gif" width="1" height="8" alt="" border="0"></div>
        <div id="paneContentTitle"><?=$page_title?></div>
        <div id="paneContentBorderTop"><img src="images/content_top_bkg.jpg" width="218" height="10" alt="" border="0"></div>
        <div id="container">
            <div id="containerLeft"><img src="images/content_left_bkg.jpg" width="10" height="208" alt="" border="0"></div>
            <div id="containerContent">
                <div id="containerContentBox"><?=$content?><? if ($page_include <> '') include 'include/'.$page_include.'.inc'; ?></div>
            </div>
            <div id="containerRight"><img src="images/content_right_bkg.jpg" width="10" height="208" alt="" border="0"></div>
        </div>
        <div id="paneContentBorderBottom"><img src="images/content_bottom_bkg.jpg" width="218" height="10" alt="" border="0"></div>
    </div>
</div>
<div id="footer">
    <div id="footerLogo"></div>
    <div id="footerNavigation">
        <div id="footerNavigationBorder"><img src="images/space.gif" width="1" height="5" alt="" border="0"></div>
        <div id="footerNavigationMenu">
            <div id="lowMenuCornerLeft"><img src="images/space.gif" width="1" height="1" alt="" border="0"></div>
            <div id="lowMenuCell"><a href="?lang=<?=$get_language?>&page=home" class="lowMenuLink"><?=$home?></a></div>
            <div id="lowMenuEmpty"><img src="images/space.gif" width="1" height="1" alt="" border="0"></div>
            <div id="lowMenuCell"><a href="?lang=<?=$get_language?>&page=women" class="lowMenuLink"><?=$women?></a></div>
            <div id="lowMenuEmpty"><img src="images/space.gif" width="1" height="1" alt="" border="0"></div>
            <div id="lowMenuCell"><a href="?lang=<?=$get_language?>&page=man" class="lowMenuLink"><?=$man?></a></div>
            <div id="lowMenuEmpty"><img src="images/space.gif" width="1" height="1" alt="" border="0"></div>
            <div id="lowMenuCell"><a href="?lang=<?=$get_language?>&page=about_us" class="lowMenuLink"><?=$about_us?></a></div>
            <div id="lowMenuEmpty"><img src="images/space.gif" width="1" height="1" alt="" border="0"></div>
            <div id="lowMenuCell"><a href="?lang=<?=$get_language?>&page=contact" class="lowMenuLink"><?=$contact?></a></div>
            <div id="lowMenuCornerRight"><img src="images/space.gif" width="1" height="1" alt="" border="0"></div>
        </div>
        <div id="footerNavigationCredits">
            <div id="credits"><a href="#" class="credits"><?=$credits?></a></div>
            <div id="credits"><a href="#" class="credits"><?=$copyright?></a></div>
        </div>
    </div>
</div>


U ff-u je problematicno pozicioniranje div-a PANECONTENT, dok je u Operi problematican isti i sve posle njega

css specifikacije (navodim samo deo posto ih ima dosta)

Code:

#paneContent
{
    width: 554px;
    float: left;
}
#paneContentEmpty
{
    height: 8px;
}
#paneContentTitle
{
    height: 18px;
    margin: 0 0 0 35px;
    padding: 0 0 0 15px;
    background-image: url(../images/title_bkg.jpg);
    background-repeat: no-repeat;
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
    font-size: 10px;
    font-weight: bold;
    color: #fff;
    line-height: 18px;
}
#paneContentBorderTop
{
    height: 10px;
    background-repeat: no-repeat;
}
#paneContentBorderBottom
{
    height: 10px;
    text-align: right;
    background-repeat: no-repeat;
    background-position: right;
    clear: both;
}
#container
{
    display: table;
    width: 554px;
    height: 100%;
}
#containerLeft
{
    float: left;
    height: 100%;
    background-image: url(../images/content_left_bkg.jpg);
    background-repeat: no-repeat;
    background-position: top;
    min-height: 208px;
}
#containerContent
{
    float: left;
    width: 534px;
    line-height: 208px;
    min-height: 208px;
    height: 100%;
    background-color: #F5F4F2;
}
#containerContentBox
{
    width: 484px;
    line-height: normal;
    background-color: #F5F4F2;
    padding: 30px 0 30px 25px;
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
    font-size: 10px;
    color: #857E65;
}
.....
#containerRight
{
    float: right;
    height: 100%;
    width: 10px;
    background-position: bottom;
    background-repeat: no-repeat;
    background-image: url(../images/content_right_bkg.jpg);
}
#clear
{
    clear: both;
}
#footer
{
    width: 765px;
    height: 129px;
    background-image: url(../images/zip_small_left.jpg);
    background-repeat: no-repeat;
    padding: 0 0 0 15px;
    display: table;
    clear: both;
}
#footerLogo
{
    width: 195px;
    height: 129px;
    background-image: url(../images/zip_small_logo_right.jpg);
    float: left;
}
#footerNavigation
{
    float: left;
    width: 555px;
    height: 129px;
    background-color: #69655A;
}
#footerNavigationBorder
{
    background-image: url(../images/border_bkg.gif);
    height: 5px;
    width: 555px;
}
#footerNavigationMenu
{
    display: table;
    height: 18px;
    padding: 0 0 0 35px;
}
#lowMenuCornerLeft
{
    width: 2px;
    height: 18px;
    background-image: url(../images/low_menu_left.gif);
    float: left;
}
#lowMenuEmpty
{
    float: left;
    width: 1px;
    height: 18px;
}
#footerNavigationCredits
{
    margin: 25px 0 0 52px;
}
#credits
{
    
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
    font-size: 9px;
}


opet se izvinjavam zbog duzine....
sigurna sam da kod nije savrsen..daleko od toga, ali ako mora da se menja, biTce promenjeno

cheers
[ Br@nkoR @ 30.03.2005. 19:06 ] @
Možemo li dobiti i css kod za #pane i #paneLeft.

Kada otvorim u FF ili Operi dobijam isto posle refresha.

Predlažem vam da u CSS specifikaciji pogladate opis ID i CLASS selektora.
[ Conica @ 30.03.2005. 19:10 ] @
sure...sledi:

Code:

#pane
{
    width: 765px;
    background-color: #fff;
    background-image: url(../images/zip_shadow1.jpg);
    display: table;
}
#paneLeft
{
    width: 210px;
    background-image: url(../images/curve_bkg.gif);
    background-repeat: no-repeat;
    float: left;
    padding: 30px 0 0 0;
}
[ Br@nkoR @ 30.03.2005. 19:43 ] @
Ne znam uvek dobijam isto.

Ono u šta najviše sumnjam rekao sam da pročitate. A ti je da se ID selektori koriste za elemente koji se samo jednom pojavljuju na html stranici dok se za elemente koji se više puta ponavljaju na jednoj html stranici koriste CLASS.

Možda se kod nekog drugog dešava ovaj problem.
[ Conica @ 30.03.2005. 20:36 ] @
Puno se zahvaljujem na odgovoru i na uputima. Preci cu kod jos jednom i ispraviti ga u skladu sa tekstom koji sam procitala. Palo mi je na pamet da bi ff i opera mogli imati problem pri nasledjivanju, ali to cu da razmatram ukoliko mi se problem bude i dalje javljao. Najvise me buni sto se pri prvom prolazu pozicioniranje odigrava lose, dok se pri drugom sve vraca na svoje mesto.

hvala jos jednom
cheers
Cony