مشكل Ie با لود منوي Css

P

poolha

Member
سلام
من يك منوي بازشو ساختم كه يك تصوير پس زمينه براي هر خط منو قرار دادم و يك تصوير هم گذاشتم كه وقتي روش ميري عوض بشه و خاكستري رنگ بشه
وقتي تو firefox ميري روشون همه چي درست نشون داده ميشه ولي وقتي تو IE ميري عكسا غيب ميشن و يكي دو ثانيه بعد لود ميشن و ميان سر جاشون
حالت درستش اينه
http://upload.parsiking.com/uploads/1207029507.png

حالت نادرستش
http://upload.parsiking.com/uploads/1207019320.png
کد: 
/* ThemePanelMenu Style Sheet */

.ThemePanelMenuH,
.ThemePanelMenuV,
.ThemePanelSubMenuTable {
    font-family:    Tahoma, arial, sans-serif;
    font-size:    13px;
    background-color:#333333;
    cursor:        default;
    white-space:    nowrap;
}

.ThemePanelMenuV {
    width: 100%;
}

.ThemePanelMenuH span {
   vertical-align:bottom;
}

.ThemePanelSubMenu {
    position:    absolute;
    visibility:    hidden;

    /*
       Netscape/Mozilla renders borders by increasing
       their z-index.  The following line is necessary
       to cover any borders underneath
    */
    z-index:    100;
    border:        0;
    padding:    0;

    /* the following property is only useful in IE */
    filter:progid:DXImageTransform.Microsoft.Shadow(color=#DEDEDE,Direction=135,Strength=4);
}

.ThemePanelSubMenuTable {
    border:        1px solid #9C9A9C;
}

.ThemePanelMenuItem,
.ThemePanelMenuItemHover,
.ThemePanelMenuItemActive {
    cursor:        hand;
    white-space:    nowrap;
}

.ThemePanelMainItem,
.ThemePanelMenuItem {
 background       : url(../images/top_bgmenu2.gif) repeat-x;
}

.ThemePanelMainItemHover,
.ThemePanelMainItemActive,
.ThemePanelMenuItemHover,
.ThemePanelMenuItemActive {
 background       : url(../images/top_bgmenu.gif) repeat-x;
}


/* horizontal main menu sub components */
/* panel doesn't really support horizontal menus */
.ThemePanelMenuH .ThemePanelMainItem {
    padding: 0px 0px;
}

.ThemePanelMainFolderLeft,
.ThemePanelMainItemLeft,
.ThemePanelMainFolderText,
.ThemePanelMainItemText,
.ThemePanelMainFolderRight,
.ThemePanelMainItemRight {
    border:        0;
    background-color:    inherit;
    white-space:    nowrap;
    color:#EEFF7E;    
}

/* vertical main menu sub components */
.ThemePanelMenuV td.ThemePanelMainFolderLeft,
.ThemePanelMenuV td.ThemePanelMainItemLeft {
    padding-left:    0px;
    padding-right:    0px;

    border-left:    1px solid #9C9A9C;

    white-space:    nowrap;
    background-color:    inherit;
}

.ThemePanelMenuV td.ThemePanelMainFolderLeft,
.ThemePanelMenuV td.ThemePanelMainItemLeft,
.ThemePanelMenuV td.ThemePanelMainFolderText,
.ThemePanelMenuV td.ThemePanelMainItemText,
.ThemePanelMenuV td.ThemePanelMainFolderRight,
.ThemePanelMenuV td.ThemePanelMainItemRight {
    padding-top:    2px;
    padding-bottom:    2px;
    border-top:    1px solid #9C9A9C;
    border-bottom:    1px solid #9C9A9C;
    color:#EEFF7E;
    background-color:    inherit;
}

.ThemePanelMenuV td.ThemePanelMainFolderLeft,
.ThemePanelMenuV td.ThemePanelMainItemLeft {
    padding-right:    0px;
    padding-left:    0px;
    border-left:    1px solid #9C9A9C;

    background-color:    inherit;
    white-space:    nowrap;
}

.ThemePanelMenuV td.ThemePanelMainFolderText,
.ThemePanelMenuV td.ThemePanelMainItemText {
    padding-right:    10px;
    padding-left:    10px;
    color:#EEFF7E;
    background-color:    inherit;
    white-space:    nowrap;
}

.ThemePanelMenuV td.ThemePanelMainFolderRight,
.ThemePanelMenuV td.ThemePanelMainItemRight {
    padding-right:    0px;
    padding-left:    0px;
    border-right:    1px solid #9C9A9C;

    background-color:    inherit;
    white-space:    nowrap;
}

.ThemePanelMenuV tr.ThemePanelMainItem td.ThemePanelMainFolderLeft {
    padding-top:    3px;
    padding-bottom:    3px;
    padding-left:    1px;
    padding-right:    0px;

    border:    0;
    white-space:    nowrap;
    background-color:    inherit;
}

.ThemePanelMenuV tr.ThemePanelMainItem td.ThemePanelMainItemLeft {
    padding-top:    3px;
    padding-bottom:    3px;
    padding-left:    1px;
    padding-right:    0px;

    border:    0;
    white-space:    nowrap;
    background-color:    inherit;
}

.ThemePanelMenuV tr.ThemePanelMainItem td.ThemePanelMainFolderText {
    padding-top:    3px;
    padding-bottom:    3px;
    padding-left:    10px;
    padding-right:    10px;
    color:#EEFF7E;
    border:    0;
    white-space:    nowrap;
    background-color:    inherit;
}

.ThemePanelMenuV tr.ThemePanelMainItem td.ThemePanelMainItemText {
    padding-top:    3px;
    padding-bottom:    3px;
    padding-left:    10px;
    padding-right:    10px;
    color:#EEFF7E;
    border:    0;
    white-space:    nowrap;
    background-color:    inherit;
}

.ThemePanelMenuV tr.ThemePanelMainItem td.ThemePanelMainItemRight {
    padding-top:    3px;
    padding-bottom:    3px;
    padding-left:    0px;
    padding-right:    1px;

    border:    0;
    white-space:    nowrap;
    background-color:    inherit;
}

.ThemePanelMenuV tr.ThemePanelMainItem td.ThemePanelMainFolderRight {
    padding-top:    3px;
    padding-bottom:    3px;
    padding-left:    0px;
    padding-right:    1px;

    border:    0;
    white-space:    nowrap;
    background-color:    inherit;
}

/* sub menus sub components */

.ThemePanelSubMenu .ThemePanelMenuFolderLeft,
.ThemePanelSubMenu .ThemePanelMenuItemLeft {
    padding-left:    0px;
    padding-right:    0px;

    border-left:    1px solid #9C9A9C;

    white-space:    nowrap;
    background-color:    inherit;
}

.ThemePanelSubMenu .ThemePanelMenuFolderLeft,
.ThemePanelSubMenu .ThemePanelMenuItemLeft,
.ThemePanelSubMenu .ThemePanelMenuFolderText,
.ThemePanelSubMenu .ThemePanelMenuItemText,
.ThemePanelSubMenu .ThemePanelMenuFolderRight,
.ThemePanelSubMenu .ThemePanelMenuItemRight {
    padding-top:    2px;
    padding-bottom:    2px;
    border-top:    1px solid #9C9A9C;
    border-bottom:    1px solid #9C9A9C;
    color:#EEFF7E;
    background-color:    inherit;
    white-space:    nowrap;
}

.ThemePanelSubMenu .ThemePanelMenuFolderLeft,
.ThemePanelSubMenu .ThemePanelMenuItemLeft {
    padding-right:    0px;
    padding-left:    2px;
    border-left:    1px solid #9C9A9C;

    background-color:    inherit;
    white-space:    nowrap;
}

.ThemePanelSubMenu .ThemePanelMenuFolderText,
.ThemePanelSubMenu .ThemePanelMenuItemText {
    padding-right:    3px;
    padding-left:    5px;
    color:#EEFF7E;
    background-color:    inherit;
    white-space:    nowrap;
}

.ThemePanelSubMenu .ThemePanelMenuFolderRight,
.ThemePanelSubMenu .ThemePanelMenuItemRight {
    padding-right:    0px;
    padding-left:    0px;
    border-right:    1px solid #9C9A9C;

    background-color:    inherit;
    white-space:    nowrap;
}

.ThemePanelSubMenu tr.ThemePanelMenuItem td.ThemePanelMenuFolderLeft {
    padding-top:    3px;
    padding-bottom:    3px;
    padding-left:    3px;
    padding-right:    0px;

    border:    0;
    white-space:    nowrap;
    background-color:    inherit;
}

.ThemePanelSubMenu tr.ThemePanelMenuItem td.ThemePanelMenuItemLeft {
    padding-top:    3px;
    padding-bottom:    3px;
    padding-left:    3px;
    padding-right:    0px;

    border:    0;
    white-space:    nowrap;
    background-color:    inherit;
}

.ThemePanelSubMenu tr.ThemePanelMenuItem td.ThemePanelMenuFolderText {
    padding-top:    3px;
    padding-bottom:    3px;
    padding-right:    3px;
    padding-left:    5px;

    border:    0;
    white-space:    nowrap;
    background-color:    inherit;
}

.ThemePanelSubMenu tr.ThemePanelMenuItem td.ThemePanelMenuItemText {
    padding-top:    3px;
    padding-bottom:    3px;
    padding-right:    3px;
    padding-left:    5px;
    color:#EEFF7E;
    border:    0;
    white-space:    nowrap;
    background-color:    inherit;
}

.ThemePanelSubMenu tr.ThemePanelMenuItem td.ThemePanelMenuItemRight {
    padding-top:    3px;
    padding-bottom:    3px;
    padding-left:    0px;
    padding-right:    1px;
    color:#EEFF7E;
    border:        0;
    white-space:    nowrap;
    background-color:    inherit;
}

.ThemePanelSubMenu tr.ThemePanelMenuItem td.ThemePanelMenuFolderRight {
    padding-top:    3px;
    padding-bottom:    3px;
    padding-left:    0px;
    padding-right:    1px;

    border:        0;
    white-space:    nowrap;
    background-color:    inherit;
}

.ThemePanelMenuSplit {
    margin:        2px;
    height:        1px;
    overflow:    hidden;
    background-color:    inherit;
    border-top:    1px solid #9C9A9C;
}

/* image shadow animation */

/*
    seq1:    image for normal
    seq2:    image for hover and active

    To use, in the icon field, input the following:
    <img class="seq1" src="normal.gif" /><img class="seq2" src="hover.gif" />
*/

.ThemePanelMainItem img.seq1,
.ThemePanelMenuItem img.seq1 {
    display:    inline;
}

.ThemePanelMainItemHover img.seq2,
.ThemePanelMainItemActive img.seq2,
.ThemePanelMenuItemHover img.seq2,
.ThemePanelMenuItemActive img.seq2 {
    display:    inline;
}

.ThemePanelMainItem img.seq2,
.ThemePanelMainItemHover img.seq1,
.ThemePanelMainItemActive img.seq1,
.ThemePanelMenuItem img.seq2,
.ThemePanelMenuItemHover img.seq1,
.ThemePanelMenuItemActive img.seq1 {
    display:    none;
}
 
peyman1987

peyman1987

Member
دوست عزیز از روی css خالی که نمیشه مشکل رو تشخیص داد.
ولی اینجور که بنظر میاد مشکل شما اینه که لود شدن بکگراند دوم توی ie طول میکشه و باعث میشه برای مدتی کوتاه منوهاتون بدون بکگراند بمونن.

شاید بشه مشکل رو با یه کلک حل کرد. شما یه div اضافی یه جای صفحه تعریف کن و همون بکگراند دوم رو بهش بده. فقط visibility رو hidden بزار تا دیده نشه. اینجوری همیشه اول کار بکگراند دوم هم لود میشه و منوها بکگراندشون رو از cache مرورگ میگیرن.

اگه مشکلت همین باشه با این روش حل میشه.
 
echessdesign

echessdesign

مدیر انجمن طراحی وب
درود بر شما
درادامه توضیحات کامل پیمان جان ارز کنم که شما می تونید از طریق JS نیز فایل عکس را در cach مرورگر load کنید...
 
P

poolha

Member
من گشتم پيدا نشد چيزي
همش برعكس اين چيزي بود كه من مي خواستم
 
برای ارسال پاسخ شما باید وارد سیستم شوید.

آخرین مطالب مجیدآنلاین

جدیدترین ارسال ها

بالا