VPF::форма под png в ие - Форум программистов

liliana2

Дата 4.8.2008, 09:42 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 178
Регистрация: 19.11.2007

Репутация: нет
Всего: нет

Здравствуйте, в очередной раз прошу помощи у гуру веб-разработки, уже не первый день бьюсь над проблемой не могу решить и ответа найти нигде не могу,
http://flygroup.rosbd.com/
в общем есть шапка которая состоит из подложки жпега и два пнг по карям слева и справа, но в ие как всегда все не так, не смотря на то что я указывала и номер слоев и так далее и позицию относительную все без толку, форма, оказывается под пнг и все тут, хотя вот в чем еще дело, менюшка, та что пониже нажимается нормально!....

Код


#head {
    background: transparent url('/i/head/main_bg.jpg') repeat-x 376px 0;
    height: 359px;
    font-size: 10px;
    color: #fff; 
    z-index: 1;
}
/*    index_page styles    */
/*    head    */
#head a {
    color: #fff; 
}
#right_bg {
    float: right;
    background: transparent url('/i/head/right_bg.png') no-repeat  100% 100%;
    //background: none; 
    //filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='i/head/right_bg.png', sizingMethod='crop');
    width: 376px;
    height: 359px;
    position: absolute;
    right: 0;
    z-index: 2;
} 
#right_bg form.blog {
    background: transparent url('/i/head/blog.gif') no-repeat 0 0;
    position: relative;
    left: 71px; 
    top: 34px; 
    //top: 31px; 
    margin: 0; 
    width: 214px;
    height: 68px; 
    text-align: right;
    z-index: 24;
} 
#right_bg form.blog input {
    background: transparent url('/i/icons/btn_newblog1.gif') no-repeat 0 0;
    width: 116px;
    height: 36px; 
    margin: 30px 0 0 0; 
}
form.login {
    padding: 0;
    margin: 18px 0 0 0;
    z-index: 39;
    //position: realtive;
}
form.login div.field {
    background: transparent url('/i/input.gif') no-repeat 0 0;
    height: 22px;
    float: left;
    width: 152px;
    margin: 1px 0 0 0;
/*
    position: relative;
    z-index: 30;
*/
}
form.login div.field input {
    border: none;
    background: none;    
    height: 20px;
    color: #fff;
    padding: 0;
    width: 131px;
    margin: 2px 0 0 8px;
}
form.login div.field_grey {
    background: transparent url('/i/input.gif') no-repeat 0 0;
    height: 22px;
    float: left;
    width: 152px;
    margin: 1px 0 0 0;
}
form.login div.field_grey input {
    border: none;
    background: none;;    
    height: 20px;
    color: #fff;
    padding: 0;
    width: 131px;
    margin: 2px 0 0 8px;
}

#smile {
    width: 19%;
    float: right;
    padding: 0;
    margin: 0;
    bordeR: 1px solid #ccc;
}
form.login input.btn {
    background: transparent url('/i/icons/btn_enter.gif') no-repeat 0 2px;
    width: 54px;
    height: 23px;
    float: left;
}
form.login div.check {
    margin-top: 6px; 
    padding: 2px 0;
}
form.login div.check span.check {
    float: right;
    margin: 0 11px 0 0; 
}
form.login div.check input {
    background: #fff;
    margin: 0 9px 0 100px;
    height: 13px;
    width: 13px;
}
#left_bg {
    background: transparent url('/i/head/left_bg.png') no-repeat 0 0;
    //background: none; 
    //filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='i/head/left_bg.png', sizingMethod='crop');
    width: 736px;
    height: 359px;
    position: static;
    left: 0;
    top: 0;
    z-index: 2;
}
#logo {
    background: transparent url('/i/head/logo.png') no-repeat 0 0;
    //background: none; 
    //filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='i/head/logo.png', sizingMethod='crop');
    width: 386px;
    height: 196px;
    z-index: 24;
    padding: 0;
    margin: 0 ;
    position: relative;
    left: 20px;
    top: 22px;
}
#left_bg img {
    margin: 22px 0 0 20px;
}
/*    menu    */
#head #menu {
    position: relative;
    margin-top: -144px; 
    z-index: 37; 
    padding: 0 0 0 8px;
    font: bold 13px 'Franklin Gothic Medium cond' !important; 
}
#head #menu table {
    width: 100%;
    color: #fff; 
}
#head #menu table td p {
    color: #95d930; 
    text-transform: uppercase; 
    text-align: left; 
    padding: 0 0 0 34px;
    margin: 0;    
}
#menu table td p a {
    color: #95d930; 
    text-decoration: none;
}    
#menu table td {
    vertical-align: top; 
    text-align: left; 
    padding: 0;
}
#menu table td ul {
    list-style: none; 
    font: normal 11px Arial !important; 
    padding: 0 0 0 34px; 
    margin: 0; 
    line-height: 12px; 
}
#menu table td ul li {
    padding: 0; 
    margin: 0 0 3px 0;
}
#menu table td ul li a {
    text-decoration: none; 
}
#menu table td ul li a.active {
    font-weight: bold; 
    color: #95d930;
    cursor: text; 
}
#menu table td ul li a:hover {
    color: #95d930;
}

Код


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
   <title><!var name="dirSubject"></title>
   <link rel="stylesheet" href="/css/styles.css" type="text/css">
   <!if name="accEdit"><link rel="stylesheet" href="/css/cms_style.css" type="text/css"><!/if>
   <meta http-equiv="Content-Type" content="text/html; CHARSET=Windows-1251">
</head>
<body>
<div class="wrapper" id="blog_page" class="usual">
<!-- head -->
<div id="head">
<div id="right_bg">
    <!-- auth form  -->
    <!if name="userOn" invert="invert">    
        <!form method="post" action="/people/loginext.html" id="form_login" autocomplete="off" class="login" style="z-index: 37;">
        <!input name="url" type="hidden" value="$goto" />
        <!input type="hidden" name="ext" value="on" />
        <!tframe url="/people/login.html" tmpl="userlogin" tgrp="Main">
        </form>    
    <!else>
                <!form action="$homeUrl|global.people/logout.html" method="POST" class="login">
                <!input type="Submit" style="float: right; margin: 8px 0 0 0;" value="Âûéòè">
                <!input type="hidden" name="url" value="$dirUrl|global">
                <div class="check" style="float: right; text-align: right; padding: 0 15px 0 0;">
        Äîáðî ïîæàëîâàòü, ïîëüçîâàòåëü <!var name="nickName">!
        <div class="clear"></div>
            <span>
            <!if name="dirWork" equal="blog">
            <!a href="$topicAddUrl">Ñîçäàòü òîïèê â áëîãå</a>
            <!else>
            <a href="/blog/topic/topicadd.html">Ñîçäàòü òîïèê â áëîãå</a>
            <!/if>
            &nbsp;|&nbsp;<a href="/mypage/">Ëè÷íàÿ ñòðàíèöà</a></span>
            <div class="clear"></div>
        </div>
            <div class="clear"></div>
                
                </form>
            <!/if>
    <!-- /auth form -->
    <!-- blog annonce -->
    <form action="#" class="blog">
        <!if name="userId" odds="Guest">
            <a href="/blog/">
        <!else>
            <a href="/people/registrationext.html">
        <!/if>
        <input type="button" class="btn"></a>
    </form>
    <!-- /blog annonce -->
</div>
<div id="left_bg">

<!if name="dirRootOn" invert="invert"><a href="/"><!/if>

<div id="logo"></div>
<!if name="dirRootOn" invert="invert"></a><!/if>
</div>

<!include tmpl="menu" tgrp="Main" />
</div>
<!-- /head -->

Это сообщение отредактировал(а) liliana2 - 8.8.2008, 06:58

webster

Дата 4.8.2008, 11:10 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 361
Регистрация: 1.1.2007

Репутация: 34
Всего: 34

Поставьте для .field:

Код


.field {
position: relative;
}

liliana2

Дата 8.8.2008, 06:56 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 178
Регистрация: 19.11.2007

Репутация: нет
Всего: нет

Второй вопрос по подобной ситуации, короче прописываю position: relative; и z-index у обоих элементов в шапке (как в верхнем примере) на главной отображается все здорово и качественно, но при переходе не другие страницы, вместо пнг пустота, подскажите что делать
!!! Проблема решена (был неверно указан путь) всем спасибо все равно smile

Это сообщение отредактировал(а) liliana2 - 8.8.2008, 07:19

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| Вёрстка веб-сайтов \| Следующая тема »