Inny wygląd czcionek pod różnymi przeglądarkami

Dla specjalistów Webmastering
#1

Witam was. Mam pytanie odnośnie strony internetowej która prowadzę - www.gokksiazki.neostrada.pl . Chodzi o to, że pod różnymi przeglądarkami wyświetlane są czcinki o różnej wysokości co trochę rozwala menu boczne - pod Operą czcionki są najwęższe, pod IE szersze, pod Firefoxem najszersze więc generalnie cięzko jest zdefiniować stałą szerokość dla ramki iframe która zawiera się tym menu… Poniżej zamieszczam kod stylu CSS mojej strony. Z góry wielkie dzięki za pomoc.

body {background:url(images/tlo.jpg) repeat-y center #fbfaf8; margin-left:auto; margin-right:auto; margin:0;}


div {font-family:Verdana, Arial, Helvetica, sans-serif; font-size:12px; position:relative; margin:0 auto;}

a {text-decoration: none;}

img {border:0; border-color:#ffffff}


#logo {background:url(images/logo.jpg) no-repeat; width:836px; height:213px;}


ul#menu_poziome {background:url(images/menu_poziome_bg.jpg) repeat-x; width:820px; height:33px; border-left:solid 1px #42c409; border-right:solid 1px #42c409; margin:0 auto; padding:0 0 0 14px; list-style:none; overflow:hidden;}

ul#menu_poziome li {margin:8px 0 0 0; padding:0 10px; float:left; font-family:Tahoma; font-size:12px; font-weight:bold; border-right:solid 1px #42c409; border-left:solid 1px #42c409;}

ul#menu_poziome li a { color:#ffffff;}

ul#menu_poziome li a:hover { color:#2d740d;}


#kontener {width:836px; height:auto; overflow: hidden; margin:0 auto; padding:0;}


.menu {background:url(images/motyl.jpg) no-repeat #ffffff; margin:8px 0 8px 8px; padding:0; float:left; height:auto; width:200px; border:solid 1px #eeeeee;}

.menu h3 {color:#555555; font-size:12px; font-weight:bold; text-align:center; margin:0; padding:9px 0;}

.menu ul {margin:4px 14px; padding:0; list-style:none;}

.menu li {background:url(images/menu.gif) no-repeat 0 9px; padding:6px 0 6px 14px; margin:0;}

.menu li a{font-size:11px; color:#50c81b; font-weight:bold;}

.menu li a:hover{color:#2d740d; font-weight:bold;}


.menu_plywajace {background:url(images/motyl.jpg) no-repeat #ffffff; margin:0; padding:0; float:left; width:200px; border: 0}

.menu_plywajace h2 {color:#555555; font-size:14px; font-weight:bold; text-align:center; margin:0; padding:9px 0; border-bottom:solid 1px #f6f6f6;}

.menu_plywajace h3 {color:#555555; font-size:12px; font-weight:bold; text-align:center; margin:0; padding:9px 0; }

.menu_plywajace ul {margin:4px 14px; padding:0; list-style:none;}

.menu_plywajace li {background:url(images/menu.gif) no-repeat 0px 9px; padding:6px 0px 6px 14px; margin:0;}

.menu_plywajace li a{font-size:11px; color:#50c81b; font-weight:bold;}

.menu_plywajace li a:hover{color:#2d740d; font-weight:bold;}

.menu_plywajace hr {border: 0; width: 180px; height: 2px; background-color: #C0C0C0;}



.tresc {margin:8px 8px 8px 0; padding-bottom:6px; background:#ffffff;	float:right; height:auto; width:610px; border:solid 1px #eeeeee;}

.tresc h1 {margin:8px 16px 0 37px; padding-bottom:4px; color:#555555; font-size:19px; font-family:Arial, Helvetica, sans-serif; border-bottom:solid 1px #f6f6f6; font-weight:bold;}

.tresc h2 {margin:8px 16px 0 16px; padding-bottom:4px; color:#555555; font-size:16px; font-family:Arial, Helvetica, sans-serif; font-weight:bold;}

.tresc p {padding:7px 12px; text-indent:25px; font-size:13px; color:#555555; margin:0; line-height:16px; text-align:justify;}

.tresc a {color:#50c81b;}

.tresc a:hover {color:#2d740d;}


.tresc2 {margin:8px 8px 8px 0; padding-bottom:6px; background:#ffffff;	float:left; height:auto; width:836px; border:solid 1px #eeeeee;}

.tresc2 h1 {margin:8px 16px 0 37px; padding-bottom:4px; color:#555555; font-size:19px; font-family:Arial, Helvetica, sans-serif; border-bottom:solid 1px #f6f6f6; font-weight:bold;}

.tresc2 h2 {margin:8px 16px 0 16px; padding-bottom:4px; color:#555555; font-size:16px; font-family:Arial, Helvetica, sans-serif; font-weight:bold;}

.tresc2 p {padding:7px 12px; text-indent:25px; font-size:13px; color:#555555; margin:0; line-height:16px;}

.tresc2 a {color:#50c81b;}

.tresc2 a:hover {color:#2d740d;}


.tresc3 {margin:8px 8px 8px 0; padding-bottom:6px; background:#ffffff;	float:right; height:auto; width:610px; border:solid 1px #eeeeee;}

.tresc3 h1 {margin:8px 16px 0 37px; padding-bottom:4px; color:#555555; font-size:19px; font-family:Arial, Helvetica, sans-serif; font-weight:bold; text-decoration: underline;}	

.tresc3 h2 {margin:8px 16px 0 16px; padding-bottom:4px; color:#555555; font-size:16px; font-family:Arial, Helvetica, sans-serif; font-weight:bold;}

.tresc3 p {padding:7px 12px; text-indent:25px; font-size:13px; color:#555555; margin:0; line-height:16px; text-align:justify;}

.tresc3 a {color:#50c81b; font-weight:bold;}

.tresc3 a:hover {color:#2d740d; font-weight:bold;}


.pics { 

   /* warto¶ci te powinny być conajmniej takie jak rozmiary zdjęć */

   height: 600px; /* szeroko¶ć elementu HTML gdzie osadzone s± zdjęcia */

   width: 800px; /* wysyko¶ć elementu HTML gdzie osadzone s± zdjęcia */

   padding: 0; 

   margin: 0; 

} 


.pics img { 

   padding: 0px; 

   border: 0px solid #ccc; 

   background-color: #eee; 

   /* rozmiary zdjęć */

   width: 120px; /* szeroko¶ć wy¶wietlanych zdjęć */

   height: 160px; /* wysoko¶ć wy¶wietlanych zdjęć */

   top: 0; 

   left: 0 

}


#stopka {background:url(images/stopka.jpg) no-repeat #ffffff; width:836px; height:34px; clear:both;}

#copyright {color:#50c81b; font-size:9px; padding-top:6px; text-align:center;}

#design {float:right; color:#95a9ff; font-size:9px; margin-right:8px;}

#design a {color:#a0a0a0;}

#design a:hover {text-decoration:underline;}
#2

Skoro czcionki są o różnej wysokości, to co to ma wspólnego z szerokością ramki? Czy nie możesz po prostu nie definiować jej wysokości?

#3

Niestety nie. Gdzieś w jakimś wcześniejszym temacie pytałem o automatyczną wysokość przy zastosowaniu parametru iframe, niestety nie dało się tego zrobić w zagnieżdzonym divie i trzeba wpisywać wysokość z ręki… dlatego jest to dość kłopotliwe gdy czcionka wygląda inaczej pod różnymi przeglądarkami.

#4

  1. Do takich zastosowań stosuje się php… Ty niestety wybrałeś serwer neostrady który php nie oferuje.

  2. Nigdzie nie wyzerowałeś domyślnych marginesów które każda przeglądarka ma inne, na początku kodu się piszę

    • { margin:0; padding:0; }
#5

No co do serwera niestety nie miałem wyboru ze względu na to że stronę tworzę w ramach doszkalania samego siebie więc nie dostaje na jej utrzymanie żadnych pieniędzy.

Na początku kodu tzn w kodzie css w body?

#6

w css, na samym początku… ja bez tego nie zaczynam robić strony :wink:

Ps. Są darmowe serwery z php :slight_smile:

#7

Czyli dosłownie tak jak napisałeś? z tą gwiazdką? :slight_smile: a jeśli chodzi o serwery… to szukałem, znalazłem na forum peb jakieś porównanie i w sumie to nie zachwycały te serwery bo zarzucały masą reklam mimo tego że były darmowe… chyba że znasz jakieś takie bez reklam to pomyślę nad przerzuceniem strony. W sumie to zastanawiałem się czy nie przenieść jej na jakiegoś cms-a np. na joomle ale… doszedłem do wniosku, że nie jest to tak rozbudowana strona żeby trzeba było ją przenosić na cms.

#8

Pisałem już kiedyś o tym - być może okaże się pomocne.

body { font-size: 62,5%; } /* czcionka bazowa o wielkości 10px. Domyślnym rozmiarem tekstu w przeglądarkach jest medium, my ustawiamy ją na 10px gwoli wygody */

/* i dalej jak już chcesz np. */

p { font-size: 1.2em; } /* czcionka akapitu o rozmiarze 12px */

h1 { font-size: 2em; } /* 20px */

PS pamiętaj, że piksele potomka /piksele rodzica = em potomka (zastosuj analogię do Twojego przykładu) drugi trick:

body { font-size: small; }

* html body {

     font-size: x-small;

     f\ont-size: small;

 }

Osobiście rozmiar czcionek zawsze definiuję tym pierwszym sposobem.

Pozdrawiam.

#9

Puma - Twój sposób nie zadziałał niestety… Xyzpoland - a czym się różni ten sposób ustawiania wielkości czcionki od zwykłego wpisywania wartości w pikselach?

#10

Definicja wielkości czcionki w em jest jednym z najgorszych sposobów i nie powinno się go stosować.

http://www.kurshtml.edu.pl/css/wielkosc,czcionki.html

Drugi sposób jest jeszcze gorszy, tam jest hack na IE a każda wersje może inaczej go interpretować.

Można spróbować dać na LI display:block + width.

Jednak ja wpierw bym przeniósł stronę na serwer z php i to menu wczytał za pomocą <?php include(‘menu.php’); ?>, takim sposobem uzyskasz pełną integrację ze stroną a będzie to tak samo wygodne jak ramka.

#11

mógłbyś mi konkretnie rozpisać to co rozumiesz przez display:block + width? Z góry dzięki

#12

Np. tak

ul li { display:block; width:100px; }

być może to spowoduje że odstępy między li w każdej przeglądarce będą takie same.

Spróbuj też zdefiniować czcionkę na body a nie na div.

#13

Twój sposób zadziałał tyle że tylko po części. Nie wiem czy wszystko zrobiłem dobrze ale póki co wygląda to tak że odstępy są te same ale za to jeśli jest więcej linijek tekstu to on to traktuje jako jeden obiekt na który może przeznaczyć max 15 pixeli

.menu_plywajace {background:url(images/motyl.jpg) no-repeat #ffffff; margin:0; padding:0; float:left; width:200px; border: 0}

.menu_plywajace h2 {color:#555555; font-size:14px; font-weight:bold; text-align:center; margin:0; padding:9px 0; border-bottom:solid 1px #f6f6f6;}

.menu_plywajace h3 {color:#555555; font-size:12px; font-weight:bold; text-align:center; margin:0; padding:9px 0; }

.menu_plywajace ul {margin:4px 14px; padding:0; list-style:none;}

.menu_plywajace li {background:url(images/menu.gif) no-repeat 0px 9px; padding:6px 0px 6px 14px; margin:0;}

.menu_plywajace li a{font-size:11px; color:#50c81b; font-weight:bold; display:block; height:15px;}

.menu_plywajace li a:hover{color:#2d740d; font-weight:bold;}

.menu_plywajace hr {border: 0; width: 180px; height: 2px; background-color: #C0C0C0;}
#14

Spróbuj wykasować

height:15px;

lub napisać coś takiego

min-height:15px;
#15

Nie działa ale mam pewien pomysł. Da się jakoś zdefiniować w css znacznik br na sztywno? W sensie żeby miał konkretny odstęp po br

#16

Tak, br można nadać takie same style jak innym znacznikom.

br { margin:10px 0; }

dla pewności można dać na br display:block; choć i tak jest elementem blokowym.

#17

Niestety nie chce interpretować br… to tak jakby nigdzie nie interpretował marginesów…

#18

U mnie margin na br działa

test



test
#19

Przepraszam za późną odpowiedź, ale lepiej późno niż wcale.

Szanowny -Puma- - czytaj proszę tekst ze zrozumieniem i nie wprowadzaj innych w błąd.

W pierwszym przykładzie (podanym w moim wcześniejszym poście) jest określona wartość bazowa - autor cytowanego artykułu bądź nie wiedział o istnieniu takiego rozwiązania, bądź nie jest on aktualny (broń Boże, nie deprecjonuję treści propagowanych w tym artykule).

W Twoim drugim zdaniu jest kolejny błąd - poprawnie wydedukowałeś, że chodzi tu o hacka, ale nie wiesz, że działa on tylko dla IE 5 (inne wersje IE interpretują tylko drugą deklarację) w celu ominięcia błędu.

Pozdrawiam.