| Vorheriges Thema anzeigen :: Nächstes Thema anzeigen |
| Autor |
Nachricht |
AgentProvocateur
registrierter User
Anmeldungsdatum: 09.01.2005
Beiträge: 7851
Wohnort: Berlin
|
 (#1728179) Verfasst am: 15.02.2012, 01:17 Titel: HTML, CSS und Safari |
 |
|
Hallo,
ich muss eine (lokale) Webseite erstellen. Die User haben Apple-Computer (Macs), ich nehme an, die verwenden den Browser Safari.
Nun habe ich folgendes Problem: mein Layout ist ziemlich kompliziert und ich verwende daher Tabellen. Aber: diese werden in Mozilla und in Safari unterschiedlich dargestellt und zwar ist der vertikale Abstand zwischen den Zeilen unterschiedlich: 4 Pixel in Mozilla und 8 Pixel in Safari.
Beispiel (stark vergößert):
(links der roten Linie: Mozilla, rechts: Safari)
Ich verwende Windows, d.h. das ist ein Screenshot aus Safari für Windows. Vielleicht wird das bei einem Mac in Safari anders angezeigt?
Quelltext der HTML-Datei:
| Code: | <html>
<head>
<meta>
<title>Test</title>
</head>
<body>
<table>
<tbody>
<tr>
<td>1</td>
<td><input></td>
</tr>
<tr>
<td>2</td>
<td><input></td>
</tr>
</tbody>
</table>
<br>
</body>
</html> |
Meine Frage ist nun: wie kann ich Safari dazu bringen, mir einen 4-Pixel-Abstand anzuzeigen? Habe gegoogelt, aber nichts gefunden. Wie ich umgekehrt Mozilla dazu bringen kann, einen 8-Pixel-Abstand anzuzeigen, weiß ich: ich kann "border-spacing: 4px;"definieren. Aber das will ich eigentlich nicht, ich will, dass Safari einen 4-Pixel-Abstand anzeigt, weil ein 8-Pixel-Abstand <s>scheiße</s> ziemlich bescheiden aussieht.
Aber wie kann ich das erreichen?
|
|
| Nach oben |
|
 |
gollrich
superheftig general
Anmeldungsdatum: 06.12.2007
Beiträge: 1098
Wohnort: Mannheim
|
| (#1728549) Verfasst am: 16.02.2012, 11:29 Titel: |
|
|
Ich selbst bin kein CSS Design Experte... aber ich würde für soetwas ein Browserweiche nutzen....
Also den Feldern eine Klasse geben,
diese Klassen entsprechend für Mozilla und Safari in einer eigenen CSS-Datei stylen.
dann per JavaScript im Header entscheiden lassen welche der CSS Dateien geladen werden soll.
Aber sicher gibt es auch noch andere CSS Profitips wie man das anders bewerkstelligen kann....
grüße gollrich
|
|
| Nach oben |
|
|
AgentProvocateur
registrierter User
Anmeldungsdatum: 09.01.2005
Beiträge: 7851
Wohnort: Berlin
|
| (#1728737) Verfasst am: 16.02.2012, 20:20 Titel: |
|
|
Danke für die Antwort, habe es jetzt durch Probieren selber herausgefunden. (Falls es jemanden interessiert: das Problem ist nicht die Tabelle, sondern die Eingabefelder ("input"). Bei solchen verwenden die unterschiedlichen Browser anscheinend unterschiedliche Vorgabe-Werte für 'margin'. Habe jetzt in meiner CSS-Datei folgendes hinzugefügt: "input {margin-top: 0px; margin-bottom: 0px;}" - damit geht's.)
Mal noch 'ne allgemeine Frage zu CSS: kann man einen Stil wiederverwenden? Nehmen wir mal an, ich hätte eine Menge von Elementen, die sehr viele Eigenschaften gemeinsam hätten, sich in lediglich einer Eigenschaft unterschieden. Nun wäre es praktisch, wenn man in der CSS-Datei einmal einen Stil (nennen wir ihn mal "mainbutton") für die gemeinsamen Eigenschaften definieren könnte und sich bei den einzelnen Elementen ("button1", "button2", etc.) auf die Eigenschaften von "mainbutton" beziehen könnte. Ist halbwegs verständlich, was ich meine? Und wenn ja: geht das?
|
|
| Nach oben |
|
|
alae
auf eigenen Wunsch deaktiviert
Anmeldungsdatum: 23.03.2006
Beiträge: 7039
|
| (#1728741) Verfasst am: 16.02.2012, 20:39 Titel: |
|
|
| AgentProvocateur hat folgendes geschrieben: | | Mal noch 'ne allgemeine Frage zu CSS: kann man einen Stil wiederverwenden? Nehmen wir mal an, ich hätte eine Menge von Elementen, die sehr viele Eigenschaften gemeinsam hätten, sich in lediglich einer Eigenschaft unterschieden. Nun wäre es praktisch, wenn man in der CSS-Datei einmal einen Stil (nennen wir ihn mal "mainbutton") für die gemeinsamen Eigenschaften definieren könnte und sich bei den einzelnen Elementen ("button1", "button2", etc.) auf die Eigenschaften von "mainbutton" beziehen könnte. Ist halbwegs verständlich, was ich meine? Und wenn ja: geht das? |
Ich bin mir zwar nicht sicher, ob ich dich richtig verstanden habe, aber: Ein Element kann mehrere Klassen haben.
| Code: | «whatever class="mainbutton button1"»...
...
«whatever class="mainbutton button2"»... |
(ich benutze hier «», weil die Forumssoftware sonst was abschneidet)
Und in der CSS-Datei steht dann:
| Code: | .mainbutton
{
/* alles, was die gemeinsam haben */
}
.button1
{
/* alles, was nur button1 betrifft */
}
.button2
{
/* alles, was nur button2 betrifft */
}
|
Ich hoffe, das ist es, was du wissen wolltest.
|
|
| Nach oben |
|
|
Critic
oberflächlich
Anmeldungsdatum: 22.07.2003
Beiträge: 16361
Wohnort: Arena of Air
|
| (#1728747) Verfasst am: 16.02.2012, 20:55 Titel: |
|
|
| AgentProvocateur hat folgendes geschrieben: | Danke für die Antwort, habe es jetzt durch Probieren selber herausgefunden. (Falls es jemanden interessiert: das Problem ist nicht die Tabelle, sondern die Eingabefelder ("input"). Bei solchen verwenden die unterschiedlichen Browser anscheinend unterschiedliche Vorgabe-Werte für 'margin'. Habe jetzt in meiner CSS-Datei folgendes hinzugefügt: "input {margin-top: 0px; margin-bottom: 0px;}" - damit geht's.)
Mal noch 'ne allgemeine Frage zu CSS: kann man einen Stil wiederverwenden? Nehmen wir mal an, ich hätte eine Menge von Elementen, die sehr viele Eigenschaften gemeinsam hätten, sich in lediglich einer Eigenschaft unterschieden. Nun wäre es praktisch, wenn man in der CSS-Datei einmal einen Stil (nennen wir ihn mal "mainbutton") für die gemeinsamen Eigenschaften definieren könnte und sich bei den einzelnen Elementen ("button1", "button2", etc.) auf die Eigenschaften von "mainbutton" beziehen könnte. Ist halbwegs verständlich, was ich meine? Und wenn ja: geht das? |
Vererbung in CSS? (Beispiel http://dorward.me.uk/www/css/inheritance/ ). Die wird beschrieben in der aktuellen CSS-Spezifikation ( http://www.w3.org/TR/CSS2/css2.pdf ) u.a. in Kapitel 6, wobei aber einige Eigenschaften sich nicht vererben lassen ( http://iam.colum.edu/phuber/week2/CSScheatSheet.pdf ).
_________________
"Die Pentagon-Gang wird in der Liste der Terrorgruppen geführt"
Dann bin ich halt bekloppt. 
"Wahrheit läßt sich nicht zeigen, nur erfinden." (Max Frisch)
|
|
| Nach oben |
|
|
AgentProvocateur
registrierter User
Anmeldungsdatum: 09.01.2005
Beiträge: 7851
Wohnort: Berlin
|
| (#1728751) Verfasst am: 16.02.2012, 20:59 Titel: |
|
|
| alae hat folgendes geschrieben: | | Ich hoffe, das ist es, was du wissen wolltest. |
Ah, danke, gut zu wissen, dass man einfach mehrere Werte für das Attribut "class" angeben kann. Habe noch ein bisschen rumprobiert, man kann es auch einfach so machen:
| Code: | .button1, .button2
{
/* alles, was die gemeinsam haben */
}
.button1
{
/* alles, was nur button1 betrifft */
}
.button2
{
/* alles, was nur button2 betrifft */
} |
|
|
| Nach oben |
|
|
|
FAQ 
Suchen 
Mitgliederliste 
Nutzungsbedingungen 
Benutzergruppen 
Links
Registrieren
Profil 
Einloggen, um private Nachrichten zu lesen 
Login 
