• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Chrome & Safari zeigen falsch an

Status
Für weitere Antworten geschlossen.
P

PeterAssmann

Gesperrt
Hallo,

ich habe eine Frage zu einer meiner Seiten. Ich versuche grade Tabellenlayout in CSS Design umzuändern. Dabei funktioniert es in FF und IE, aber Chrome und Safari zeigen einiges komisch an.
Ihr könnt das hier sehen: prepaid - pakete . org
(möchte hier nicht direkt linken, weil die seite noch nicht von google indiziert werden soll)

Insbesondere problematisch ist die Box unten ("wir suchen ständig nach den besten tarifen")

dies ist der php code (der relevante teil ist FETT markiert)
Code: 
<?php
include("include/dbconnect.php");
include("include/vars.php");
include("include/header.php");
include("include/left.php");
print ("
<tr><td><img src='img/head-welcome.png' width='603' height='53' border='0'></td></tr>
<tr><td height=173 background='img/startseite1.png'>
<table width=340 border=0 cellpadding=0 cellspacing=0>
<tr><td width=22>&nbsp;</td>
<td width=318><p>$admin_startseite</p>
</td></tr>
</table>
</td></tr>
<tr><td><img src='img/startseite2.png' width='603' height='29' border='0'></td></tr>
<tr><td bgcolor='#D9EE98' height=128 valign=top>
<table width=560 align=center border=0 cellpadding=0 cellspacing=0>
<tr><td colspan=2 id='space' height=10>&nbsp;</td></tr>
<tr><td width=280><img src='img/startpkt1.png' alt='vertragsbindung' width='280' height='35' border='0'></td>
<td width=280><img src='img/startpkt4.png' width='280' height='35' border='0'></td></tr>
<tr><td width=280><img src='img/startpkt2.png' width='280' height='35' border='0'></td>
<td width=280><img src='img/startpkt5.png' width='280' height='35' border='0'></td></tr>
<tr><td width=280><img src='img/startpkt3.png' width='280' height='35' border='0'></td>
<td width=280><img src='img/startpkt6.png' width='280' height='35' border='0'></td></tr>
</table>
</td></tr>
<tr><td><img src='img/startseite3.png' width='603' height='29' border='0'></td></tr>
<tr><td>
[B]<div id='prepaidempfehlung'>

<b><a href='http://partners.webmasterplan.com/click.asp?ref=454380&site=3749&type=text&tnb=17' target='_blank' class='a1' onFocus='if (this.blur) this.blur()' rel='nofollow'>
Mit BASE 2 für nur 22,50 € pro Monat unbegrenzt und kostenlos ins Festnetz, zu BASE und E-Plus telefonieren</a><br /><img src='http://banners.webmasterplan.com/view.asp?ref=454380&site=3749&type=text&tnb=17&js=1' BORDER='0' WIDTH='1' HEIGHT='1' /><br>
<a href='http://aktion.congstar.de/prepaid.html?afid=454380&affmt=text&affmn=25' target='_blank' class='a1' onFocus='if (this.blur) this.blur()' rel='nofollow'><b>Congstar Prepaid - 10 Cent pro Minute und pro SMS</a><img src='http://banners.webmasterplan.com/view.asp?ref=$affili_nr&site=4655&type=text&tnb=26&js=1' BORDER='0' WIDTH='1' HEIGHT='1'><br>

<a href='http://partners.webmasterplan.com/click.asp?ref=454380&site=2975&type=text&tnb=26' class='a1' onFocus='if (this.blur) this.blur()' rel='nofollow' target='_blank'>
<b>Die Zehnsation: Für 10 Cent/Min in alle Netze telefonieren (Vorsicht: Vertrag!)</a><br /><img src='http://banners.webmasterplan.com/view.asp?ref=454380&site=2975&type=text&tnb=26&js=1' rel='nofollow' BORDER='0' WIDTH='1' HEIGHT='1' /></b>


</div>[/B]
</td></tr>
<tr><td>&nbsp;</td></tr>
");
include("include/footer.php");
mysql_close($verbindung);
?>
und hier der css code (der relevante teil ist FETT markiert)
Code: 
#space {font-size:1px;}
#navi1 {background-image: url(img/navhg.png); height:24px; padding-left:26px;}
#navi1a {background-image: url(img/navhg1.png); height:24px; padding-left:26px;}
#conthead { background: #D9EE98; height:30px; padding-left:22px; font-family:Arial; font-size:10pt; color:#547012; font-weight:bold;}
#indtop { background: #D9EE98;}

td { font-family:Arial; font-size:10pt; color:#666666; }
.td1 { font-family:Arial; font-size:9pt; color:#668C13; background:#E5F3BF; text-align:center;}
.td2 { font-family:Arial; font-size:10pt; color:#668C13; }
.tdf { font-family:Arial; font-size:10pt; color:#BC8000; }
.tdb { font-family:Arial; font-size:8pt; color:#FFFFFF; }

p { font-family:Arial; font-size:10pt; color:#5E7322; text-align:justify;}
a { font-family:Arial; font-size:10pt; color:#668C13; }
.anavi { font-family:Arial; font-size:10pt; color:#668C13; text-decoration:none; font-weight:bold;}
.a1 { font-family:Arial; font-size:8pt; color:#5E7322; }

.tf { font-family:Arial; font-size:10pt; color:#666666;
background-color:#FFFFFF; border:1px solid #666666; height:18px;}

.bt { font-family:Arial; font-size:10pt; color:#FFFFFF; font-weight:bold;
background-color:#99CF30; border:1px solid #3E4F1A; height:18px; cursor:pointer;}


h1 { font-family:Arial; font-size:16pt; color:#5E7322; text-align:justify;}
[B]
#prepaidempfehlung
{position: relative; left: 20px; top: 15px; bottom: 15px; border:0; line-height:1.5;}[/B]
zusätzlich zu dem problem mit dieser link-box, wird die gesamte schrift in Safari und Chrome viel kleiner angezeigt als in FF und IE. Warum?

- also, was muss ich machen um die linkbox "prepaidempfehlung" barrierefrei zu machen? (bzw. halt in Chrome/safari richtig anzuzeigen)

- wie kriege ich den text in safari und chrome auch größer, bzw. warum ist er dort überhaupt anders?

Bin sehr dankbar für jede hilfe! :)
 
PeterAssmann schrieb:
(möchte hier nicht direkt linken
Zum Vergrößern anklicken....
Linken sollst Du auch niemanden, das würden wir Dir übel nehmen :-)

dies ist der php code (der relevante teil ist FETT markiert)
Zum Vergrößern anklicken....
Für ein Darstellungsproblem ist PHP-Code irrelevant.

zusätzlich zu dem problem mit dieser link-box, wird die gesamte schrift in Safari und Chrome viel kleiner angezeigt als in FF und IE. Warum?
Zum Vergrößern anklicken....
Vielleicht, weil man die Schriftgröße im Browser individuell festlegen kann.

also, was muss ich machen um die linkbox "prepaidempfehlung" barrierefrei zu machen? (bzw. halt in Chrome/safari richtig anzuzeigen)
Zum Vergrößern anklicken....
Barrierefreiheit hat nichts mit der Darstellung zu tun. Da geht es primär um die Nutzbarkeit, insbesondere in dem Fall, wo es keine Darstellung gibt.

-Efchen

P.S.:
Ich versuche grade Tabellenlayout in CSS Design umzuändern.
Zum Vergrößern anklicken....
Davon sieht man nichts.

P.P.S.: Wozu position:relative?
 
Du definierst Schriftgröße in pt. Das sollte man für die Ausgabe an einem digitalen Display aus verschiedenen Gründen nicht machen. Die Existenz von pt ist nur in Drucklayouts gerechtfertigt.
Die Einheit für Schriftgrößen ist entweder % oder em. Die Schriftgröße des ersten Elements sollte dabei auf 100.01% festgelegt werden, um einige Browsermacken zu verhindern. Diese Angabe bezieht sich auf die im Browser eingestellte Schriftgröße. Danach gilt: Jedes Kindelement hat automatisch die Schriftgröße 100% bzw 1em bezogen auf die Schriftgröße des Elternelements. Wenn Du in einer Verschachtelung beispielsweise dreimal 2em angibst, ist die Schrift am Ende achtmal so groß.
Du kannst übrigens auch andere Maße außer Schriftgrößen in em angeben. Dann ist 1em so groß wie das große M im jeweiligen Elternelement.
Die Aussprache der Einheit em lautet übrigens auch "M".

Hast ja noch viel vor Dir bei der Umstellung auf CSS, viel Erfolg dabei!
Junny
 
Junny schrieb:
Du definierst Schriftgröße in pt. Das sollte man für die Ausgabe an einem digitalen Display aus verschiedenen Gründen nicht machen. Die Existenz von pt ist nur in Drucklayouts gerechtfertigt.
Die Einheit für Schriftgrößen ist entweder % oder em. Die Schriftgröße des ersten Elements sollte dabei auf 100.01% festgelegt werden, um einige Browsermacken zu verhindern. Diese Angabe bezieht sich auf die im Browser eingestellte Schriftgröße. Danach gilt: Jedes Kindelement hat automatisch die Schriftgröße 100% bzw 1em bezogen auf die Schriftgröße des Elternelements. Wenn Du in einer Verschachtelung beispielsweise dreimal 2em angibst, ist die Schrift am Ende achtmal so groß.
Du kannst übrigens auch andere Maße außer Schriftgrößen in em angeben. Dann ist 1em so groß wie das große M im jeweiligen Elternelement.
Die Aussprache der Einheit em lautet übrigens auch "M".

Hast ja noch viel vor Dir bei der Umstellung auf CSS, viel Erfolg dabei!
Junny
Zum Vergrößern anklicken....

hi, dankeschön. wäre also das schriftgrößen problem geklärt.
kann mir auch noch jmd. sagen, warum Chrome und Safari die position top und left im CSS komplett ignorieren? (in chrome ist es ganz krass, dagibt es noch nicht einmal einen zeilenumbruch)
 
Du hast wie immer Recht, aber dennoch sollte ex aus mangelnder Unterstützung durch die meisten Browser nicht verwendet werden.
 
Junny schrieb:
  1. Bei bestimmten Positionierungsmethoden kann man mit den CSS-Eigenschaften top, right, left und bottom Positionen angeben.
Zum Vergrößern anklicken....
Jo, mit position: absolute; kann man top und bottom angeben. Allerdings funktioniert das nicht in allen Browsern. Z.B. für die meisten IE gilt:
Entweder top oder bottom.

Bei position: relative; wird das Element relativ zu seiner Ursprungsposition verschoben. Das geht natürlich nur top oder bottom und left oder right.

Wenn position: absolute; für jeden Browser top und bottom annehmen würde,
währe eine vertikale Zentrierung in etwa so möglich:
Code: 
body {
margin: 0;
}

  #box {
position: absolute;
top: 10%;
bottom: 10%;
background-color: blue;
width: 100%;
}
Die Box währe mit 80% Höhe vertikal zentriert.
Die Realität sieht aber nun mal anders aus.
 
Zuletzt bearbeitet:
Wenn man für die entsprechenden IEs einen Workaround anbietet, der auf CSS-expressions basiert und bei eingeschaltetem Javascript funktioniert, sowie der Inhalt gleich bleibt, selbst wenn weder CSS noch Javascript greifen, ist doch alles super.

PS: Kennt jemand ein deutsches Wort für Workaround?
 
hi

habe einiges von euren sachen ausprobiert (übrigens um auf die frage "warum position relative" zu antworten: weils sonst gar nicht positioniert wird und einfach links im eck hängt und die anderen positions es alles ganz woanders hinschieben)... leider hat nix geklappt... text-align: center funktioniert gut, nur will ichs zwar mittig positionieren, aber ich will dass der text dabei linkbündig bleibt was nicht funktioniert... (auf margin: auto; gibts keine reaktion)

naja, ich schau halt mal... chrome/safari werden ja eh nicht dermaßen häufig eingesetzt...
 
Hmmm...man kann vieles leichter positionieren, wenn man nur mit float und margin arbeitet, als mit position.
Dein Satz mit dem text-align:center verstehe ich nicht. Du machst "center", schreibst aber dass Du gleichzeitig den Text linksbündig haben willst - center oder left, beides geht nicht. Denn text-align zentriert nur Inline-Elemente, aber keine Block-Elemente. Dafür nimmst Du "margin:0 auto". Keine Reaktion kann nicht sein, dann machst Du was falsch :-) Zum Beispiel, dass Du nicht berücksichtigst, dass Block-Elemente immer 100% breit sind, wenn man ihnen nichts anderes sagt und bei einer Breite von 100% sieht man natürlich von einer Zentrierung nichts! Also feste Breite angeben.
 
Chrome ist übrigens bisher nur in der Beta-Version erschienen. Dass sich alle darauf stürzen, heißt noch lange nicht, dass man sein Design dafür optimieren sollte -- oder guckst du deins auch immer mal wieder im Internet Explorer 8 an? ;ugl
 
Status
Für weitere Antworten geschlossen.

Neueste Beiträge

Zurück
Oben