nicht angemeldet
hallo allerseits,
ich bastle an einer site und gebe im <body> an:
font-size: small;
nun sieht alles schön so aus, wie es soll.
getestet unter
IE6
Netscape7.1
FF2
und problem macht leider:
opera9
der stellt die schrift leider sehr viel kleiner dar, als alle anderen.
wie kann ich dem abhelfen?
zur anschauung:
http://www.babydienst.de/test/html/rohbau.php
die css dazu sieht so aus:
/* rohbau.css - die gestaltungsvorlagen für den Rohbau */
body {
font-family: 'Trebuchet MS', Arial, Helvetica, sans-serif;
font-size: small;
color: #3C3C3C;
background: #F0FFE6;
padding: 1% 5%;
}
h1 {
font-size: 160%;
margin-bottom: 0ex;
color: #5A5A5A;
/*background-color: #F0FFE6;*/
}
h2 {
font-size: 140%;
margin-bottom: 0ex;
}
h3 {
font-size: 130%;
margin-bottom: 0ex;
}
h4 {
font-size: 120%;
margin-bottom: 0ex;
}
h5 {
font-size: 100%;
font-weight: bold;
margin-Bottom: 0ex;
}
ul li {
font-size: 90%;
}
.note {
font-family: courier;
color: #780000;
margin-left: 1em;
margin-right: 1em;
background-color: #F0DEE6;
}
div#box_seitentitel {
width: 100%;
float: left;
padding: 0;
display: inline; /* fixt den Bug der Randverdoppelung im IE/Win */
margin-left: auto;
margin-right: auto;
margin-bottom: 5px;
background: #F9E9A9;
border: 1px solid #646464;
border-bottom: none;
}
h1#seitentitel {
float: left;
font-size: 170%;
display: inline; /* fixt den Bug der Randverdoppelung im IE/Win */
margin-left: 3%;
margin-top: 1ex;
margin-bottom: 0;
color: #5A5A5A;
}
#untertitel {
float: left;
font-size: small;
}
#titellogo {
float: right;
display: inline; /* fixt den Bug der Randverdoppelung im IE/Win */
margin: 1ex;
}
#nav_oben_quer {
width: 95%;
float: left;
display: inline; /* fixt den Bug der Randverdoppelung im IE/Win */
margin: 0px;
padding-left: 5%;
padding-top: 0;
padding-right: none;
padding-bottom: 0;
list-style: none;
background: #F9E9A9 url(../grafiken/nav_rand_unten646464.gif) repeat-x bottom left;
border: none;
}
#nav_oben_quer li {
float: left;
display: inline; /* fixt den Bug der Randverdoppelung im IE/Win */
margin: 0;
padding: 0;
}
#nav_oben_quer a {
float: left;
display: block;
display: inline; /* fixt den Bug der Randverdoppelung im IE/Win */
margin: 0 3px 0 0;
padding: 4px 10px;
color: red;
text-decoration: none;
border: 1px solid #9B8748;
border-bottom: none;
background: #FFFFFF url(../grafiken/nav_oben_schalter_gelb_back.gif) repeat-x top left;
}
#nav_oben_quer a:hover, body#rohbau #rohbau a {
padding-bottom: 5px;
border-color: #9B8748;
background: #FFFFFF url(../grafiken/nav_oben_schalter_blau_back.gif) repeat-x top left;
}
#nav_oben_quer a:hover, body#rohbau2 #rohbau2 a {
padding-bottom: 5px;
border-color: #9B8748;
background: #FFFFFF url(../grafiken/nav_oben_schalter_blau_back.gif) repeat-x top left;
}
#nav_oben_quer a:hover, body#rohbau3 #rohbau3 a {
padding-bottom: 5px;
border-color: #9B8748;
background: #FFFFFF url(../grafiken/nav_oben_schalter_blau_back.gif) repeat-x top left;
}
#nav_oben_quer a:hover, body#rohbau4 #rohbau4 a {
padding-bottom: 5px;
border-color: #9B8748;
background: #FFFFFF url(../grafiken/nav_oben_schalter_blau_back.gif) repeat-x top left;
}
a:link { /* für Verweise zu noch nicht besuchten Seiten */
padding: 0 1ex;
border: none;
background-color: #EFEFEF;
}
a:link img { /* für Bilder mit Verweisen zu noch nicht besuchten Seiten */
border: none;
text-decoration: none;
}
a:visited { /* für Verweise zu bereits besuchten Seiten */
padding: 0 1ex;
border: none;
}
a:visited img { /* für Bilder mit Verweisen zu bereits besuchten Seiten */
border: none;
text-decoration: none;
}
a:focus { /* für Elemente, die den Fokus erhalten, z.B. durch "Durchsteppen" mit der Tabulator-Taste (CSS 2.0) */
padding: 0 1ex;
background-color: #FEEE81;
border: none;
}
a:hover { /* für Elemente, während der Anwender mit der Maus darüber fährt (CSS 2.0) */
padding: 0 1ex;
background-color: #E1E1E1;
}
a:hover img { /* für Bilder, während der Anwender mit der Maus darüber fährt (CSS 2.0) */
border: none;
text-decoration: none;
background-color: #E1E1E1;
}
a:active { /* für gerade angeklickte Elemente */
padding: 0 1ex;
text-decoration: none;
border: none;
}
a:visited:active {
padding: 0 1ex;
text-decoration: none;
border: none;
}
/* Box unten (Footer - Fußzeile) */
div#unten {
width: 100%;
float: left;
clear: left;
text-align: center;
line-height: 1.8em;
padding: 1%;
display: inline; /* fixt den Bug der Randverdoppelung im IE/Win */
margin-left: auto;
margin-right: auto;
margin-bottom: 5px;
background: #F9E9A9;
border: 1px solid #646464;
}
div#counter {
display: inline; /* fixt den Bug der Randverdoppelung im IE/Win */
margin: 0;
}
#seitenanfang {
padding: 0.2ex 2ex;
}
----
anmerkung:
ich möchte nicht darüber diskutieren, ob eine angabe in em oder in px für die schriftgröße besser sei oder ob man gar keine vorgaben machen soll.
der opera9 stellt die schrift immer einen vollen grad kleiner dar, als in den anderen browsern.
ich möchte "nur" wissen, was ich tun kann, damit der opera mir die schriften gleich groß zeigt, wie alle drei anderen.
und ja, ich habe die anzeigeeinstellung bei allen vieren auf den standard- bzw. mittelwert, bzw. auf 100% geschaltet. ;-)
vielen dank für die hilfe!
detlef
"zivilisation halte ich für eine gute idee.
nur sollte sie auch mal jemand ausprobieren."
arthur c. clarke