Blocksatz im Firefox (Win) und Firefox (Mac)

oklahoma-od

Hallo,

habe mit meinem Blog folgendes kleines Problem:

Auch wenn viele prinzipiell davon abraten, nutze ich seit Anbeginn meines Blogs den Blocksatz. Klar, er bietet viele Nachteile, aber wenn man seinen Text an den Blocksatz etwas anpasst, finde ich es wesentlich schicker und Leseschwierigkeiten ergeben sich dann m.E. auch nicht. Jedem das Seine... ;)

Der Blocksatz macht mir - bis auf eine Ausnahme - also keine Schwierigkeiten. Ob im Internet Explorer, Firefox (Win) oder Safari bin ich mit der Darstellung völlig zufrieden. Allerdings musste ich kürzlich feststellen, dass der Firefox (Mac) den Blocksatz als einzig mir bekannter Browser anders darstellt. So verrutscht z.B. ein Wort in eine andere Zeile, so dass das Gesamtbild verzerrt wird. Auch wenn die Unterschiede möglicherweise für Dritte nur marginal sind, würde ich meinen Blog gerne auch für den Firefox (Mac) anpassen.

Ist das überhaupt möglich? Oder liegt das einfach am Firefox (Mac)? Bin hinsichtlich WP und Webdesign im Allgemeinen ein Laie und würde mich über Antworten freuen. Man sagte mir, man müsse evtl. an der style.css herumbasteln. Hat da jemand Vorschläge?

Werbepost

Hallo!

Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
✔️ Deutsche Server & DSGVO-konform
✔️ Persönlicher Support (kein 0815-Ticket-System)

Mehr erfahren

kaiser

Meine Vermutung: Prinzipiell verwenden auch Browser die dieselbe (zB Gecko) Engine laufen haben, unterschiedliche Berechnungssysteme zB für %-Werte, etc. D.h., wenn Du zB 33,3 % als Breite für jede von 3 nebeneinander liegenden Spalten verwendest, dann bekommst Du trotzdem unterschiedliche Ergebnisse in verschiedenen Browsern. Es liegt also vermutlich an der Basisgröße für Deine Fonts und gerade FF-Mac dürfte hier etwas anders berechnen.

oklahoma-od

Sprich ich kann nichts machen. Ausser andere Fonts ausprobieren? Das wäre schon sehr ärgerlich, da ich auf sie eigentlich nicht verzichten möchte. Hier meine style.css, falls das hilft.

Zitat

*/
a{
color: #383838;
text-decoration: none;
}
a:visited {
color: #383838;
text-decoration: none;
}
a:hover {
color: #3D3D3D;
text-decoration: underline;
}
blockquote {
background: #F8F8F8;
border-left: 2px solid #F4F4F4;
margin: 5px 0px 5px 0px;
padding: 5px;
}
body {
background: url(images/bg2.gif) #EEEEEE repeat fixed;
color: #3D3D3D;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 11px;
margin: 0px auto 0px auto;
padding: 0px;
text-align: center;
}
form{
margin: 0px;
padding: 0px;
}
form#commentform{
background-color: #F4F4F4;
border: 1px solid #F4F4F4;
color: #666666;
list-style: none;
margin: 0px 0px 10px 0px;
padding: 10px 10px 0px 10px;
}
form#commentform input#submit {
background-color: #383838;
border: 1px solid #3D3D3D;
color: #FFFFFF;
font-size: 10px;
padding: 3px 0px 3px 0px;
width: 60px;
}
form#commentform input, form#commentform textarea {
background-color: #E0E0E0;
border: 1px solid #F0F1F2;
color: #666666;
font-size: 11px;
padding: 2px 0px 2px 0px;
width: 200px;
}
h2{
color: #3D3D3D;
font: 78%/1.4em "Trebuchet MS",Trebuchet,Arial,Verdana,Sans-serif;
font-size: 18px;
font-weight: normal;
line-height: 130%;
margin: 25px 0px 20px 0px;
padding: 0px;
text-align: left;
}
#comments {
color: #383838;
}
h3 {
font-size: 21px;
margin: 0px;
padding: 0px 0px 3px 0px;
}
img {
border: 0px;
}
input, select, textarea {
border: 1px solid #DDDDDD;
color: #3D3D3D;
margin: 0px;
padding: 0px;
}
p.comentariu-rss {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 0.9em;
font-variant: normal;
margin: 0px 0px 10px 0px;
}
p.data-comment {
background: url(images/icon_clock.gif) no-repeat center right;
color: #383838;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 10px;
font-variant: normal;
margin: 0px 0px 10px 0px;
padding: 0px 12px 0px 0px;
text-align: right;
}
.alignleft {
color: #ACACAC;
display: block;
float: left;
font-size: 10px;
}
.alignleft a, .alignleft a:visited {
background: url(images/alignleft01.gif) no-repeat left center;
color: #ACACAC;
margin: 0px;
padding: 0px 0px 0px 16px;
text-decoration: none;
}
.alignleft a:hover {
background: url(images/alignleft02.gif) no-repeat left center;
color: #383838;
margin: 0px;
padding: 0px 0px 0px 16px;
text-decoration: underline;
}
.alignright {
color: #ACACAC;
display: block;
float: right;
font-size: 10px;
}
.alignright a, .alignright a:visited {
background: url(images/alignright01.gif) no-repeat right center;
color: #ACACAC;
margin: 0px;
padding: 0px 16px 0px 0px;
text-decoration: none;
}
.alignright a:hover {
background: url(images/alignright02.gif) no-repeat right center;
color: #383838;
margin: 0px;
padding: 0px 16px 0px 0px;
text-decoration: underline;
}
.author {
border-top: 1px dotted #3D3D3D;
color: #737373;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 10px;
padding: 5px 0px 0px 0px;
}
.author-comment {
color: #383838;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: normal;
margin: 0px;
padding: 0px;
}
.author-comment a, .author-comment a:hover, .author-comment a:visited{
color: #383838;
font-weight: bold;
text-decoration: none;
}
.commentlist {
color: #666666;
margin: 0px;
padding: 0px;
text-align: left;
}
.commentlist li {
background-color: #F8F8F8;
border: 1px solid #F4F4F4;
color: #666666;
list-style: none;
margin: 0px 0px 10px 0px;
padding: 10px 10px 0px 10px;
text-align: justify;
}
.commentlist li:hover{
background-color: #F6F6F6;
border: 1px solid #F1F1F1;
color: #666666;
list-style: none;
margin: 0px 0px 10px 0px;
padding: 10px 10px 0px 10px;
}
.data {
color: #3D3D3D;
font: 78%/1.4em "Trebuchet MS",Trebuchet,Arial,Verdana,Sans-serif;
font-size: 13px;
margin: 25px 0px 20px 0px;
padding: 0px;
text-align: right;
}
.feedback {
background: url(images/icon_comment.gif) #EEEEEE no-repeat center left;
color: #666666;
font-size: 11px;
line-height: 20px;
margin: 2px 0px 15px 0px;
padding: 2px 3px 2px 23px;
}
.feedback a, .feedback a:visited{
color: #666666;
text-decoration: underline;
}
.feedback a:hover{
color: #666666;
text-decoration: none;
}
.highlight {
background-color: #FAF8B4;
color: #6B6850;
font-size: 9px;
padding: 3px;
}
.image {
border: #DDDDDD 1px solid;
margin: 5px auto 5px -6px;
padding: 5px;
text-align: center;
}
.link-category {
background: url(images/icon_category.gif) no-repeat center left;
margin: 0px 0px 0px 20px;
padding: 0px 0px 0px 18px;
}
.nicetitle {
background: url(images/background.png);
color: #FFFFFF;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 13px;
font-weight: bold;
left: 0px;
padding: 4px;
position: absolute;
text-align: left;
top: 0px;
width: 25em;
}
.nicetitle p {
margin: 0px;
padding: 0px 3px 0px 0px;
}
.nicetitle p.destination {
font-size: 9px;
padding: 3px 0px 0px 0px;
}
.page-navigation {
margin: 15px 0px 15px 0px;
padding: 0px 0px 15px 0px;
}
.post{
margin: 20px 0 0 0;
padding: 0px;
}
.post ul {
border: 0px;
list-style: none;
margin: 10px 0px 10px 5px;
padding: 0px;
text-align: justify;
}
.post ul li {
background: url(images/bullet.gif) no-repeat 2px 6px;
margin: 0px 0px 5px 0px;
padding: 0px 0px 4px 12px;
}
.required{
color: #383838;
font-size: 9px;
}
.title, .headline {
background: url(images/title.gif) left top no-repeat;
color: #383838;
font: 78%/1.4em "Trebuchet MS",Trebuchet,Arial,Verdana,Sans-serif;
font-size: 18px;
line-height: 130%;
margin: 0px 0px 5px 0px;
padding: 0px 0px 0px 17px;
text-align: left;
}
.title a, .title a:visited {
color: #383838;
text-decoration: none;
}
.title a:hover {
background-color: #383838;
color: #FFFFFF;
text-decoration: none;
}
#button {
background: #383838;
border: 1px solid #3D3D3D;
color: #FFFFFF;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 10px;
margin: 10px 0px 0px 0px;
padding: 2px 5px 2px 5px;
}
#button:hover {
background: #666666;
border: 1px solid #3D3D3D;
color: #FFFFFF;
margin: 10px 0px 0px 0px;
}
#content{
color: #3D3D3D;
float: left;
line-height: 130%;
margin: 0px;
padding: 10px;
text-align: justify;
width: 350px;
}
#footer {
background-color: #333333;
border-bottom: 0px solid #FFFFFF;
border-top: 0px solid #FFFFFF;
clear: both;
color: #999999;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 9px;
font-variant: normal;
font-weight: normal;
height: 20px;
line-height: 130%;
margin: 0px;
padding: 10px 3px 3px 8px;
}
#footer a, #footer a:visited {
background-color: #4A4A4A;
color: #999999;
padding: 2px 3px 2px 3px;
text-decoration: none;
}
#footer a:hover {
background-color: #666666;
color: #FFFFFF;
padding: 2px 3px 2px 3px;
text-decoration: none;
}
#header {
background-repeat: no-repeat;
color: #FFFFFF;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
height: 264px;
margin: 0px;
padding: 1px 0px 0px 15px;
text-align: left;
vertical-align: bottom;
}
#header a, #header a:visited, #header a:hover {
color: #FFFFFF;
font-size: 18px;
font-weight: bold;
text-decoration: none;
}
#menu {
color: #FFFFFF;
display: block;
font: bold 11px/9px Verdana, Geneva, Arial, Helvetica, sans-serif;
left: 50%;
margin: 0px 0px 0px -260px;
padding: 5px 0px 5px 0px;
position: absolute;
text-align: left;
top: 268px;
width: 526px;
}
#menu a {
background: #333333;
color: #FFFFFF;
font-weight: bold;
height: 19px;
margin: 0px;
padding: 5px 15px 5px 15px;
}
#menu a:hover {
background: #666666;
color: #FFFFFF;
text-decoration: none;
}
#menu li {
display: inline;
margin: 0px;
padding: 0px;
text-transform: lowercase;
}
#menu ul {
list-style-type: none;
}
#menu ul li {
padding: 0px;
}
#menu-background {
background: url(images/background_menu.jpg) no-repeat;
height: 20px;
margin: 0px;
padding: 2px 3px 3px 25px;
}
#metadata {
background-color: #EEEEEE;
color: #666666;
font-size: 11px;
line-height: 15px;
margin: 2px 0px 2px 0px;
padding: 3px 8px 3px 8px;
}
#metadata a, #metadata a:visited {
color: #666666;
text-decoration: underline;
}
#metadata a:hover {
color: #666666;
text-decoration: none;
}
#searchform{
background-color: #E0E0E0;
margin: 5px 0px 5px 0px;
padding: 10px;
}
#searchform input#s{
background-color: #FFFFFF;
border: 1px solid #F0F1F2;
color: #333333;
padding: 2px 0px 2px 0px;
}
#searchform input#searchsubmit{
background: #383838;
border: 1px solid #3D3D3D;
color: #FFFFFF;
font-size: 10px;
margin: 0px;
padding: 2px;
}
#sidebar{
float: right;
left: -20px;
margin: 0px -10px 0px 0px;
padding: 0px;
position: relative;
text-align: right;
width: 150px;
}
#sidebar ul {
list-style-type: none;
margin: 0px;
padding: 0px;
}
#sidebar ul li {
margin: 0px;
padding: 2px 0px 2px 0px;
text-align: right;
}
#sidebar ul li a{
margin: 0px;
padding: 0px;
}
#sidebar ul li h2 {
color: #3D3D3D;
font: 78%/1.4em "Trebuchet MS",Trebuchet,Arial,Verdana,Sans-serif;
font-size: 18px;
margin: 25px 0px 5px 0px;
padding: 0px;
text-align: right;
}

Alles anzeigen

oklahoma-od

Sonst hat niemand eine Idee?

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Blocksatz im Firefox (Win) und Firefox (Mac)

Jetzt mitmachen!