Generowane menu inne pod IE

**e_kangu** · 11-06-2010, 10:32

Witam, jestem w trakcie przygotowywania szablonu strony, możliwe że mój problem jest już gdzieś opisany ale za mało z joomla mam doczynienia i nie wiem jak szukać rozwiązania.
Mój problem polega na tym, że wygenerowane menu pod IE (wystarczy wersja7) rozjeżdża się po pozycji która posiada podpozycje, wklejając ten sam kod na sztywno wszystko jest ok.
Poniżej wygenerowany kod i style

Kod HTML:

<div id="menu">
     <ul id="mg" class="menu_mg">
        <li class="item2 p1">
            <a href="/solidarnosc/index.php/aktualnoci">
                <span>Aktualności</span>
            </a>
        </li>
        <li class="item3 p1">
            <a href="/solidarnosc/index.php/o-nas">
                <span>O nas</span>
            </a>
        </li>
        <li class="parent active item4 p1" id="current">
            <a href="/solidarnosc/index.php/oferty">
                <span>Oferty</span>
            </a>
            <ul>
                <li class="item14 p2">
                    <a href="/solidarnosc/index.php/oferty/praca">
                        <span>Praca</span>
                    </a>
                </li>
                <li class="item15 p2">
                    <a href="/solidarnosc/index.php/oferty/szkolenia">
                        <span>Szkolenia</span>
                    </a>
                </li>
                <li class="item16 p2">
                    <a href="/solidarnosc/index.php/oferty/studia-podyplomowe">
                        <span>Studia podyplomowe</span>
                    </a>
                </li>
                <li class="item17 p2">
                    <span class="separator"><span></span></span>
                </li>
            </ul>
        </li>
        <li class="parent item5 p1">
            <a href="/solidarnosc/index.php/kontakt">
                <span>Kontakt</span>
            </a>
            <ul>
                <li class="item18 p2">
                    <a href="/solidarnosc/index.php/kontakt/adres">
                        <span>Adres</span>
                    </a>
                </li>
                <li class="item19 p2">
                    <a href="/solidarnosc/index.php/kontakt/dyury-sekretariatu">
                        <span>Dyżury sekretariatu</span>
                    </a>
                </li>
                <li class="item21 p2">
                    <a href="/solidarnosc/index.php/kontakt/formularz-kontaktowy">
                        <span>Formularz kontaktowy</span>
                    </a>
                </li>
                <li class="item20 p2">
                    <span class="separator"><span></span></span>
                </li>
            </ul>
        </li>
        <li class="parent item6 p1">
            <a href="/solidarnosc/index.php/linki">
                <span>Linki</span>
            </a>
            <ul>
                <li class="item22 p2">
                    <a href="/solidarnosc/index.php/linki/strony-okrgow">
                        <span>Strony okręgów</span>
                    </a>
                </li>
                <li class="item23 p2">
                    <a href="/solidarnosc/index.php/linki/strony-odziaow">
                        <span>Strony odziałów</span>
                    </a>
                </li>
                <li class="item24 p2">
                    <a href="/solidarnosc/index.php/linki/dla-nauczycieli">
                        <span>Dla nauczycieli</span>
                    </a>
                </li>
                <li class="item25 p2">
                    <a href="/solidarnosc/index.php/linki/inne">
                        <span>Inne</span>
                    </a>
                </li>
                <li class="item27 p2">
                <span class="separator"><span></span></span>
                </li>
            </ul>
        </li>
        <li class="item7 p1">
            <a href="/solidarnosc/index.php/materiay">
                <span>Materiały</span>
            </a>
        </li>
        <li class="parent item8 p1">
            <a href="/solidarnosc/index.php/galeria">
                <span>Galeria</span>
            </a>
            <ul>
                <li class="item28 p2">
                    <a href="/solidarnosc/index.php/galeria/album-2009">
                        <span>Album 2009</span>
                    </a>
                </li>
                <li class="item29 p2">
                    <span class="separator"><span></span></span>
                </li>
            </ul>
        </li>
    </ul>
    
    

</div>

css:

Kod:

@charset "utf-8";
/* CSS Document */
/*#######menu###########*/
#menu {
    height: 32px;
    width: 900px;
    margin-right: auto;
    margin-left: auto;
    position: relative;
    padding-top: 8px;
}
#menu #mg .p1 a {
    color:#FFF;
    text-decoration: none;
    display: block;
    height: 100%;
    width: 100%;
    background-image: url(../img/menu_rozdzielacz.png);
    background-repeat: no-repeat;
    background-position: right center;
}
#menu #mg {
    display: block;
    font-size: 12px;
    letter-spacing: 1px;
}
#menu #mg .p1 {
    display: block;
    float: left;
    width: 14%;
    height: 30px;
    line-height: 30px;
    font-weight: bold;
    text-align: center;
    padding-top: 1px;
    padding-left: 1px;
    position: relative;    
}
#menu #mg .p1:hover, #menu #mg .active {
    background-image: url(../img/menu_poz_l.png);
    background-repeat: no-repeat;
    background-position: left center;
    padding-top: 0px;
    padding-left: 0px;
    border-top-width: 1px;
    border-right-width: 1px;
    border-bottom-width: 1px;
    border-left-width: 1px;
    border-top-style: solid;
    border-right-style: none;
    border-bottom-style: solid;
    border-left-style: solid;
    border-top-color: #000;
    border-right-color: #000;
    border-bottom-color: #000;
    border-left-color: #000;    
}
#menu ul .p1:hover span, #menu #mg .active span{
    background-image: url(../img/menu_poz_p.png);
    background-repeat: no-repeat;
    background-position: right center;

}
#menu #mg .p1:hover a {
    color:#FFFFC7;
}
#menu #mg .p1 span{
    display: block;
    position: relative;
    right: 1px;
    height: 100%;
    cursor: pointer;
}

#menu #mg .p1 ul {
    display:none;
    line-height: normal;    
}
#menu #mg .p1:hover ul {
    background-color:#860000;
    color:#FFFFFF;
    display:block;
    font-size:11px;
    left:-1px;
    list-style-type:none;
    position:absolute;
    right:1px;
    text-align:left;
    top:28px;
    border-top-width: 1px;
    border-right-width: 1px;
    border-bottom-width: 1px;
    border-left-width: 1px;
    border-top-style: none;
    border-right-style: none;
    border-bottom-style: none;
    border-left-style: solid;
    border-top-color: #000000;
    border-right-color: #000000;
    border-bottom-color: #000000;
    border-left-color: #000000;
    margin: 0px;
    padding: 0px;
}

#menu #mg .p1:hover ul .p2 a {
    background-image: none;        
}
#menu #mg .p1:hover ul .p2 span {
    background-image: none;        
}
#menu #mg .p1:hover ul .p2 {
    border-top-width: 1px;
    border-right-width: 1px;
    border-bottom-width: 1px;
    border-left-width: 1px;
    border-right-style: solid;
    border-left-style: solid;
    border-right-color: #460000;
    border-left-color: #C70000;
    position: relative;
    padding-left: 5px;
    line-height: normal;
    padding-top: 5px;
    padding-bottom: 5px;
    margin: 0px;
    display: block;
    z-index:1;
}
#menu #mg .p1:hover ul .p2:hover {
    background-color:#AF0000;
}
#menu #mg .p1:hover ul .p2 .separator {
    background-image: url(../img/podmenu_l_stopka.png);
    background-repeat: no-repeat;
    background-position: left bottom;
    height: 6px;
    position: absolute;
    left: -2px;
    top: auto;
    right: 1px;
    bottom: -6px;
    border-top-style: none;
    border-right-style: none;
    border-bottom-style: none;
    border-left-style: none;
    line-height: 6px;
    margin-top: 10px;
    z-index:0;
}
#menu #mg .p1:hover ul .p2.item13:hover, #menu #mg .p1:hover ul li.item17, #menu #mg .p1:hover ul li.item20, #menu #mg .p1:hover ul li.item27, #menu #mg .p1:hover ul li.item29 {
    background-color:transparent;
    cursor: default;
}
#menu #mg .p1:hover ul .p2 .separator span {
    background-image: url(../img/podmenu_p_stopka.png);
    background-repeat: no-repeat;
    background-position: right bottom;
    display: block;
    position: absolute;
    left: auto;
    top: auto;
    right: -2px;
    bottom: 0px;
    height: 6px;
    width: 100%;
}
/*koniec menu*/

dopisałem też w kodzie generującym menu dodawanie dodatkowych nazw klas

Kod PHP:


    if (($node->name() == 'li') && ($id = $node->attributes('id'))) {
        if ($node->attributes('class')) {
            $node->addAttribute('class', $node->attributes('class').' item'.$id .' p'.$node->attributes('level'));
        } else {
            $node->addAttribute('class', 'item'.$id.' p'.$node->attributes('level'));
        }
    }

dlatego że wcześniej używałem w css selektorów dziecka i pierwsze co mi przyszło do głowy to to że problem tkwi w ich obsłudze przez IE.

Pod http://www.solidarnosckw.pl można zobaczyć jak to wygląda w praktyce
Z góry dziękuję za odpowiedz

**PeFik** · 11-06-2010, 11:48

a nie mozna było po prostu zrobić osobnego stylu dla IE ?
za pomocą "<!--[if lte IE 7]>" w index.php ?

**e_kangu** · 11-06-2010, 12:08

No tak można by, ale problem polega na tym, że styl który przygotowałem działa pod IE, nie działa tylko w przypadku kiedy menu generuje joomla, może to jakiś głupi błąd bo jeżeli kod html wygenerowany i wklejony na sztywno jest identczny to powinien teoretycznie działać identycznie może poprostu <jdoc:include działa w jakiś sposób którego nie rozumiem

Temat: Generowane menu inne pod IE

Przybornik

Widok

Generowane menu inne pod IE

Podobne tematy

przeciazenie generowane przez skrypt

menu - inne tło pod 1 pozycją

automatycznie generowane wykresy

Inne theme pod komponent / moduł

inne menu zależne od głównego menu

Reguły pisania