Zaloguj się

toma5z · (Ten post był ostatnio modyfikowany: 14-06-2011, 04:04 przez toma5z.)

Witajcie
w jaki sposob moge wyrównać moje menu dla IE ?

nie chce tworzyć nowego stylu z ifem dla IE.

CSS:

Kod:
@charset "utf-8";

/* CSS Document */

/* v1.0 | 20080212 */

/*reset css*/

html, body, div, span, applet, object, iframe,

h1, h2, h3, h4, h5, h6, p, blockquote, pre,

a, abbr, acronym, address, big, cite, code,

del, dfn, em, font, img, ins, kbd, q, s, samp,

small, strike, strong, sub, sup, tt, var,

b, u, i, center,

dl, dt, dd, ol, ul, li,

fieldset, form, label, legend,

table, caption, tbody, tfoot, thead, tr, th, td {

margin: 0;

padding: 0;

border: 0;

outline: 0;

font-size: 100%;

vertical-align: baseline;

background: transparent;

}

body {

height:100%;

line-height: 1;

}

ol, ul {

list-style: none;

}

blockquote, q {

quotes: none;

}

blockquote:before, blockquote:after,

q:before, q:after {

content: '';

content: none;

}

/* remember to define focus styles! */

:focus {

outline: 0;

}

/* remember to highlight inserts somehow! */

ins {

text-decoration: none;

}

del {

text-decoration: line-through;

}

/* tables still need 'cellspacing="0"' in the markup */

table {

border-collapse: collapse;

border-spacing: 0;

}

/*************************************************************************************/

#container{margin:0 auto;width:850px;height:500px;background:#FFF;}

#top{width:100%;height:100px;background:#565656;}

#menu {padding-left:8px;position:relative; top:76px;}

#menu li{float:left;padding-right:10px;}

#menu li a{

    padding: 9px 20px 6px 15px;

    background:#F3F3F3;

    text-decoration:none;

    font-size:15px;

    color:#000;

}

#menu li a:hover{background:#F5F5F5;color:#000;}

HTML:

Kod:
<body>

<div id="container">

     <div id="top">

            <ol id="menu">

                <li><a href="#">a</a></li>

                <li><a href="#">b</a></li>

                <li><a href="#">c</a></li>

                <li><a href="#">d</a></li>

            </ol>

    </div>

</div>

</body>

Pod IE menu lekko idzie do góry, a na `normalnych` przeglądarkach jest ok.

**Kartofelek** · 14-06-2011, 03:11

A tak swoją drogą po co tam tyle divów i po co to menu jest float:left? Nie lepiej dać dla listy ol id="menu" i beż żadnych floatów?

toma5z · 14-06-2011, 04:03

Kartofelek
Masz całkowicie rację !
Trzeba optymalizować CSS.

poprawiłem!

nadal nie wiem dlaczego w IE nie chce mi dociągnąć tego menu.

**Kartofelek** · (Ten post był ostatnio modyfikowany: 14-06-2011, 14:30 przez Kartofelek.)

Dobra. Kilka testów przeprowadziłem i nieco zgłupiałem :}
Testowałem w IETester i wyniki miałem takie:
IE6 - działa źle
IE7 - w ogóle nie działa Smile

(ale to wina IETestera)
IE8/9 - jest ok

Po kilku zmianach zaczęło działać ok w IE6:

Kod:
#container{margin:0 auto; width:850px; height:500px; background:red; position:relative;}

#menu {position:relative; top:76px; left:0px; padding:0; margin:0; zoom:1}

#menu li{float:left;padding-right:10px;}

#menu li a{

    padding: 9px 20px 6px 15px;

    background:#F3F3F3;

    text-decoration:none;

    font-size:15px;

    color:#000;

}

#menu li a:hover{background:#F5F5F5;color:#000;}

Kod:
<div id="container">

    <ol id="menu">

        <li><a href="#">a</a></li>

        <li><a href="#">b</a></li>

        <li><a href="#">c</a></li>

        <li><a href="#">d</a></li>

    </ol>

</div>

Oczywiście to nie dotyczy twojego problemu, bo w sumie ciężko zobaczyć ten problem. U mnie jest na tej samej wysokości, różnica jest w tym, że LINKI w menu są nie równej wysokości bo IE6 źle obsługuje padding dla elementów nie blokowych. Rozwiązaniem może być danie linkom display:block albo pokombinowanie z inline-block (patrz google).
Dodatkowo aby menu było dobrze odsunięte za pomocą relatywnego pozycjonowania musiałem mu dać zoom:1 (żeby miał "haslayout").

Wnioski:
IE jak zwykle ssie pałkę Smile

toma5z · 14-06-2011, 15:50

Dziękuję Ci za pomoc, display:block; na linkach załatwił całą sprawę. <- Faktycznie o tym zapomniałem.
Fakt faktem IE Tester bardzo dziwnie interpretuje strony jako IE (interpretuje je nadzwyczaj poprawnie).
Ja się przełanczam na standart programu internet explorel 7 w narzedziach developerskich <- widać wszystkie bugi ;P

Dzięki za pomoc !

PS. Generalnie jest taka zasada: Są przeglądarki i jest Internet Explorer... Najpierw się robi strone pod IE, a potem dokłada fiuczurki dla przeglądarek Smile

**Kartofelek** · 14-06-2011, 17:20

PS. Generalnie jest taka zasada: Są przeglądarki i jest Internet Explorer... Najpierw się robi strone pod IE, a potem dokłada fiuczurki dla przeglądarek
Zła zasada.
Najpierw robi się strony pod nowe przeglądarki. Potem co się da (zależnie od funduszy i samozaparcia) poprawia się pod IE. Reszta zostaje jak zostaje. Dajmy ludziom wybór. Może niektórzy lubią być sadomasochistami Smile

Zaloguj się
Login:
Hasło:	Nie pamiętam hasła
	Zapamiętaj mnie