Różnice w wyświetlaniu na różnych przeglądarkach

[Robster]

Zrobiłem menu przy pomocy Extended_menu i wszystko wygląda w miarę ładnie, ale występują różnice w odległościach w zależności od przeglądarki.
Na CHROME wszystko wygląda idealnie, na FF submenu jest przesunięte nieco w dół, a na IE menu wyświetla się dobrze, ale znowu grafika spod menu jest nieco przesunięta w górę.
Problem do podejrzenia na:
http://www.codebox.yoyo.pl/

Sprawdzałem już wszystkie odległości i wszystko przesuwa się zawsze o tyle samo, więc jak dopasuję menu do FF, to na CHROME submenu nachodzi na menu, a grafika jest jeszcze wyżej.
Nie mam pojęcia co z tym zrobić :/

[nikszal]

Dopasuj do najbardziej badziewiarskiej przeglądarki jaką IE6. Problemy czasami bywają również z Operą. Resztą się nie martw, bo będzie dobrze.

[Robster]

Czyli jak mam wszystko robić pod IE6? Mnie nawet nie zależy żeby to na IE chodziło, tylko ten FF mnie męczy :/
CHROME i IE łapie te same wymiary, niestety FF coś źle przelicza. Jeśli dopasuję do FF, to na innych przeglądarkach jest ****.

[nikszal]

Z reguły osobne arkusze css są dla IE6 i IE7. Reszta chodzi bez zarzutu. Drobne różnice będą w FF i Chrome, ale nie tak poważne jak w IE6.

[Robster]

A są jakieś specjalne reguły dla FF? Sporo w sieci jest o instrukcjach warunkowych dla IE, ale słowa nie ma o FF, a przecież masa stron ma dużo skomplikowanych i rozbudowanych elementów, ale chodzą idealnie na wszystkich przeglądarkach.

A już tak bardziej na marginesie, to skąd się biorą te różnice?

[nikszal]

... A już tak bardziej na marginesie, to skąd się biorą te różnice?Zapytaj Billa Gatesa, dlaczego będąc monopolistą na rynku wypuścił taki chłam (IE6 i IE7). Kasa to nie wszystko.

[Robster]

To że Microsoft ma ciągoty do własnych standardów, nie ważne czy są lepsze czy gorsze, to ja wiem. Niestety nie rozumiem, dlaczego FF nie chce się podporządkować moim ustaleniom :D
Nienawidzę, jak mi się strony rozjeżdżają w ten sposób :/

[nikszal]

Podpatrywałem Twoją stronę. Skoro nie formatujesz w sposób prawidłowy bloków lub w ogóle ich nie formatujesz, to przeglądarek masz pretensje. Popatrz na fotkę z żarówką. W jakim jest bloku?

[Robster]

No tak, tyle że sam szablon nie jest mój :D Napisałem o tej grafice bo myślałem, że będzie to miało jakieś znaczenie (w kwestii rozjeżdżania się menu), ale rzeczywiście masz rację nie pomyślałem o sformatowaniu grafiki.
Ale co z menu? Ono jest formatowane, wszystkie bloki w których skład wchodzi też.

EDIT:

Gdybyś miał ochotę i czas looknąć w mój CSS i powiedzieć co mam ewentualnie źle, że to menu się tak rozjeżdża, to byłbym wdzięczny.


*{
margin:0px;
padding:0px;
border:none;
}
img{border:0px;}
html{
width:100%;
height:100%;
}
body{
width:100%
}
#header{
width:100%;
background-color:#20221B;
text-align:center;
}
.inside{
width:980px;
margin:0 auto;
overflow:hidden
}
.logo{
float:left;
margin:0 38px 0 41px;
}
.slogan{
font-family:Arial, Helvetica, sans-serif;
font-size:10px;
text-transform:uppercase;
color:#82837F;
line-height:30px;
border-left:1px solid #82837F;
padding:0 0 0 21px;
margin:40px 0 0 0;
float:left
}
.rss{
float:right;
margin:29px 52px 0 0
}
#menu{
background:url(../images/menu_bg.gif);
background-position:top left;
background-repeat:repeat-x;
width:100%;
float:left;
height:40px;
}
#menu ul{
width:980px;
margin:0 auto;
padding:0 0 0 25px;
}
#menu li{
list-style-type:none;
display:inline;
}

/*Menu rozwijane*/


#twocols{ /*kolumna, w której zostanie umieszczone rozwijane menu*/
z-index:20;
}

#leftcol{ /*kolumna, w której zostanie umieszczone rozwijane menu*/
z-index:10;
}

.moduletablemainnav {
position:absolute;
top:105px;
left:140px;
z-index:100;
font:0.9em Verdana, Arial, Helvetica, sans-serif;
margin:0;
padding:0;
}

#mainlevelmainnav ul {

list-style:none;
line-height:1em;
background:transparent;
font-weight:700;
margin:0;
padding:0;
}

#mainlevelmainnav{
width:550px;
clear:both;
float:left;
padding:69px 0 0 30px;
margin:0px;
list-style:none;
}

#mainlevelmainnav a {
display:block;
color:#CCCCCC;
text-decoration:none;
margin-right:35px;
padding:0.3em;
font-weight:bold;
}

#mainlevelmainnav li {
float:left;
padding:0;
margin:0;
border:none;
}

#mainlevelmainnav li ul {

border:none;
height:auto;
width:11.3em;
font-weight:400;
background:url(../images/bg_menu.gif);
margin:9px 0 0 0;
padding:0 0 0 0;
}

#mainlevelmainnav li li {
width:11.3em;
margin:0;
padding:0.5em;
background:#4A2500 url(../images/menu.png);
}

#mainlevelmainnav li ul a {
width:11.3em;
color:#CCCCCC;
font-size:1em;
line-height:0.9em;
font-weight:400;
}


#mainlevelmainnav li:hover ul ul,#mainlevelmainnav li:hover ul ul ul,#mainlevelmainnav li.sfhover ul ul,#mainlevelmainnav li.sfhover ul ul ul{
left:-999em;
}

#mainlevelmainnav li:hover ul,#mainlevelmainnav li li:hover ul,#mainlevelmainnav li li li:hover ul,#mainlevelmainnav li.sfhover
l,#mainlevelmainnav li li.sfhover ul,#mainlevelmainnav li li li.sfhover ul {
left:auto;
z-index:6000;
}

#mainlevelmainnav li li:hover,#mainlevelmainnav li li.sfhover {
background:#000000;
}
/*Koniec menu rozwijanego*/
.pic{
margin:0 auto;
/ margin:-4px auto;
}
#blocks{
background:url(../images/bg.gif);
background-position:top left;
background-repeat:repeat-x;
height:176px;
padding:27px 0 0 77px
}
.block1{
background:url(../images/block1.jpg);
background-position:top left;
background-repeat:no-repeat;
width:165px;
height:118px;
float:left;
padding:30px 0 0 130px;
}
.block2{
background:url(../images/block2.jpg);
background-position:top left;
background-repeat:no-repeat;
width:165px;
height:118px;
float:left;
padding:30px 0 0 130px;
}
.block3{
background:url(../images/block3.jpg);
background-position:top left;
background-repeat:no-repeat;
width:165px;
height:118px;
float:left;
padding:30px 0 0 130px;
}
#blocks h3{
font-family:Tahoma;
font-size:14px;
color:#505542;
display:block;
width:160px;
}
#blocks span{
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
color:#698224;
display:block;
padding:11px 0 12px 0
}
#main{
background-color:#F6F1F0;
padding:47px 0 50px 0;
border-bottom:1px solid #fff;
}
.column{
padding:0 60px 0 37px;
width:535px;
font-family:Tahoma;
font-size:11px;
color:#64584C;
line-height:17px;
float:left;
}
.column h3{
background:url(../images/bullet.gif);
background-position:left 2px;
background-repeat:no-repeat;
padding:3px 0 37px 28px;
font-family:Arial;
font-size:18px;
color:#64584C;
font-weight:normal;
}
/*Moduly*/
h3, .componentheading, table.moduletable th, legend {
margin: 0;
font-weight: bold;
font-family: Helvetica,Arial,sans-serif;
font-size: 1.5em;
padding-left: 0px;
margin-bottom: 10px;
text-align: left;
}

/*Koniec moduly*/

/* System Standard Messages */
#system-message { margin: -47px 0 30px 0; }

#system-message dd.message ul { background: #C3D2E5 url(../../system/images/notice-info.png) 38% center no-repeat;border-top: 3px solid #3399FF; border-bottom: 3px solid #3399FF; margin:0px; padding-left: 40px; text-indent:0px; text-align:center;}

/* System Error Messages */
#system-message dd.error ul { color: #c00; background: #E6C0C0 url(../../system/images/notice-alert.png) 38% center no-repeat; border-top: 3px solid #3399FF; border-bottom: 3px solid #3399FF; margin:0px; padding-left: 40px; text-indent:0px;text-align:center;}

/* System Notice Messages */
#system-message dd.notice ul { color: #c00; background: #EFE7B8 url(../../system/images/notice-note.png) 38% center no-repeat; border-top: 3px solid #3399FF; border-bottom: 3px solid #3399FF; margin:0px; padding-left: 40px; text-indent:0px;text-align:center;}

/*Klasy odpowiedzialne za wyswietlanie szczególów artykulu*/
.article-tools {
border-top: 1px solid #DDDDDD;
width: 100%;
float: left;
clear: both;
margin-bottom: 15px;
display: block;
background: #ECECEC;
}

.article-meta {
padding: 5px;
width: 80%;
float: left;
}

.contentheading{
color:#677D2A;
font-size:18px;
font-weight:normal;
padding:5px 0 5px 0;
margin:0px;
clear:both;

/*font-size:14px;
color:#677D2A;
line-height:20px;
padding:22px 0 8px 0*/
}

.createby {
padding: 3px 3px 3px 20px;
background: url(../images/icon-user.gif) no-repeat 0 2px;
}
.buttonheading img{
padding-top:5px;
}
.createdate {
padding: 3px 3px 3px 20px;
background: url(../images/icon-date.gif) no-repeat 0 0px;
height: 20px;
vertical-align: top;
font-size: .90em;
color: #999;
font-weight: normal;
vertical-align: top;
}
/*Koniec szczególów artykulu*/
.news_block h3{
background:url(../images/bullet.gif);
background-position:left 2px;
background-repeat:no-repeat;
padding:0 0 37px 28px;
font-family:Arial;
font-size:18px;
color:#64584C;
font-weight:normal;
}

.news_block{
width:300px;
float:left;
font-family:Tahoma;
font-size:11px;
color:#64584C;
}
.news_block span{
display:block;
float:left;
color:#FF8400;
font-weight:bold;
text-align:right;
width:77px;
}
.news_block li{
list-style-type:none;
}
.news_block p{
display:block;
float:left;
width:310px;
padding:0 0 23px 8px;
}
#footer{
background-color:#E4DEDA;
width:100%;
height:105px;
font-family:Tahoma;
font-size:11px;
color:#64584C;
text-transform:uppercase;
text-align:right
}
#footer a{
color:#64584C;
text-decoration:none
}
#footer a:visited{text-decoration:none}
#footer a:hover{text-decoration:underline}

[nikszal]

Na razie masz w tym szablonie groch z kapustą. Rozumiem, że linki z tekstem HOME to ma być lewe menu. Nie wiem jednak dlaczego to menu jest w górnej nawigacji. Żarówka nie jest sformatowana w bloku, więc przeglądarka traktuje je jak tło strony. Trzy dolne bloki są sformatowane, ale z kolei nie rozumiem dlaczego dopiero po nich jest 'main'? Ogólnie jest w tym szablonie totalny bałagan. Masz problem z umiejscowieniem kolejności poszczególnych bloków. Budowa i formatowanie szablonu to nie jest bułka z masłem.

[Robster]

Jeszcze raz powtórzę, że szablon nie jest mój, ja go tylko pod joomle podpinam, a teraz szybkie tłumaczenie.


Te linki home to rozwijane menu, ale ustawiłem je na rozwinięte, ponieważ lepiej mi się wtedy podgląda wyniki pracy. I właśnie o to rozwijane menu cały czas pytam. Gdy wszystko jest ustawione normalnie (czyt. sub menu rozwija się po najechaniu na jakąś pozycję w menu głównym) na FF też jest taki malutki odstęp od głównego menu po rozwinięciu submenu jak w chwili obecnej.




O żarówce już pisałem wcześniej, więc pomińmy ten aspekt. Moje przeoczenie, ale naprawię :)




Te trzy bloki pełnią funkcję TOP'u. Nie będzie tam żadnych dynamicznych treści, tylko coś na kształt obecny ze stałą treścią.




Treści dynamiczne będą tylko w bloku main i w stopce (nie licząc tego problematycznego menu).




Doskonale sobie sprawę zdaję, że to nic prostego. Mało tego z każdym dniem, gdy uczę się więcej zdaję sobie sprawę, jak niewiele wiem. Niemniej młody jeszcze jestem (tak mówią), więc mam sporo czasu by się douczyć.

Nie wiem czy już wspominałem, ale szablon nie jest moim dziełem ( :D ), za jakiś czas pojawi się w stopce licencja i link do strony autora, ale jak na moje oko wcale nie jest on tak chaotyczny jak piszesz. Bloki ładnie poukładane i tylko ta żaróweczka troszkę psuje całość.

[nikszal]

Ok, trochę mnie oświeciłeś. Jak on ma wyglądać w ostatecznym kształcie wiesz na razie tylko TY.

W sprawie odstępu w menu:
#mainlevelmainnav li ul {
background:url("../images/bg_menu.gif") repeat scroll 0 0 transparent;
border:medium none;
font-weight:400;
height:auto;
margin:9px 0 0;
padding:0;
width:11.3em;


}

Spróbuj zmniejszyć zaznaczony margines, bo i tak nie spełnia on żadnej roli.

[Robster]

nikszal szkopuł tkwi w tym, że on właśnie ważną rolę spełnia. Nim reguluję odległość rozwiniętego submenu od menu głównego. Przy 9px ładnie schodzi się w IE i CHROME, ale w FF jest niewielki odstęp. Gdy zadam wartość 8px w FF jest ok, a 2 pozostałych submenu nachodzi na belkę menu głównego.

[nikszal]

Być może nie jasno się wyraziłem, więc powtórzę - oddzielnie formatuje się szablon dla pewnych bloków tylko dla IE, a nie dla FF. Firefox w odróżnieniu od IE trzyma standard W3C, choć też z małymi wyjątkami. IE 6 i 7 niestety w niektórych momentach znacznie odbiega od ustalonych standardów, więc dla nich stwórz oddzielne arkusze css.

[Robster]

Czyli jeśli zrobię osobny arkusz dla IE, to CHROME z niego skorzysta? Bo nie wiem czy my się dobrze rozumiemy. Mnie chodzi o to by strona dobrze działała na CHROME, OPERZE i FF, a IE to mnie w sumie mało obchodzi.



EDIT:
Gdyby to kogoś obchodziło, to dodam tylko, że usunięcie z CSS'a blokowego wyświetlania menu i uzyskanie tego efektu dzięki innym właściwościom rozwiązało problem z różnicą w odległościach (na wszystkich przeglądarkach menu wyświetla się identycznie - poprawnie).