Zur Navigation

CSS-Hacks

1 Hagen (Gast)

hallo,

ich bin grad dabei meine webseite zu gestalten, verzweifel jedoch bei der unterschiedlichen darstellung in browsern. Sogenannte css-hacks sollen abhilfe schaffen. für IE habe ich etwas gefunden, das auch funktioniert:

das kommt ins Markup:
<!--[if IE]>
<style type="text/css">@import url(ie.css);</style>
<![endif]-->

Allerdings weiß ich nicht, wie ich opera (safari etc.) auf die selbe art und Weise ansprechen kann. Was muss statt "IE" stehen?
Ich hab erstmal alles auf Firefox abgestimmt. bei den anderen Sachen "klapperts" gewaltig!

Kann mir jemand helfen?


28.07.2006 11:39

2 Jörg Kruse

Hallo Hagen,

diese sogenannten Conditional Comments gibt es nur für den Internet Explorer.

Für andere Browser gibt es wohl auch vereinzelte Hacks - einfacher wäre es vielleicht noch auf eine PHP-Weiche zurückzugreifen.

<?php
if(eregi("opera",$_SERVER['HTTP_USER_AGENT'])) {
?>

<!-- Inhalt für Opera -->

<?php
}
?>

In der Regel kommt man bei den modernen Browsern aber auch ohne solche Weichen aus: wenn man sich eng an die Standards anlehnt, weichen diese nur wenig voneinander ab. Eine Unterschiedliche Darstellung zwischen Opera, Firefox und Safari kann oft auch daher rühren, dass bestimmte Eigenschaften nicht definiert sind, und den Browsern so Interpretationsspielraum gelassen wird. Darüber hinaus gibt es noch browserspezifische Bugs, sowie unterschiedliches Verhalten je nach Doctype-Deklaration. Ich würde vorschlagen, die Probleme hier vorzustellen, dann kann man dir dort konkrete Lösungen aufzeigen. Eine Weiche ist eigentlich nur die letzte Lösung, da sie immer auch einiges an Mehrarbeit erfordert.

28.07.2006 12:04 | geändert: 28.07.2006 12:07

3 Jörg Kruse

Noch ein Nachtrag:

für CSS-Hacks gibt es hier eine schöne Übersicht:

centricle : css filters (css hacks)

Für Opera und Safari sehe ich keine Rule, die nur jeweils diesen einen Browser nicht anspricht. Für ältere Browser gibt es da aber einiges an Möglichkeiten, und dort sind Hacks auch noch am ehesten vonnöten

28.07.2006 12:25 | geändert: 28.07.2006 12:26

4 Hagen (Gast)

hey, vielen dank für die schnelle antwort. ich muss gestehen, absoluter css-anfänger zu sein. wahrscheinlich stehen euch die haare zu berge, wenn ihr folgenden quelltext seht ... wie es aussehen soll, kannst du hier sehen: http://www.dieses.net/v43 (wo ein Sternchen ist, kann man schon draufklicken)

hier nun mein quelltext, der wie man sieht auf einer unheimlich komplexen wie unübersichtlichen tabellenformatierung basiert - ich weiss es nicht besser :-(

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta name="generator" content="Adobe GoLive" />
<title>dieses.net</title>
<link href="basic.css" rel="stylesheet" type="text/css" media="all" />
</head>

<!--[if IE]>
<style type="text/css">@import url(ie.css);</style>
<![endif]-->

<body>

<!-- tabelle für aussen rum, Hintergrundgrafik etc. -->

<table id="tabelle_hintergrund">
<tr>
<td> <!--körper layout-->

<!-- tabelle für navi und inhalt -->

<table id="tabelle_layout">
<tr>
<td id="links"><!--körper navigation-->

<!-- logo, navigation -->
<table id="tabelle_navi">
<tr>
<td id="logo">
</td>
</tr>
<tr>
<td id="vorschaubild">
</td>
</tr>
<tr>
<td id="navigation">

<ul id="navbar">
<li><a href="f1.html">foto*</a></li>
<li><a href="(EmptyReference!)">grafik</a></li>
<ul id="navbar_abschluss"><li><img border="0" src="bilder/stopper.gif"></li>
</ul>
</ul>

</td>
</tr>
</table>

</td>
<td id="rechts"><!--körper inhalt-->

<!-- inhalt -->
<table id="tabelle_inhalt">
<tr>
<td id="kopf1"><img src="bilder/willkommen.gif"></td>
<td id="kopf2"><img src="bilder/spalte3_kopf.gif">
</td>
</tr>
<tr>
<td id="linke_spalte">
<img src="bilder/wedel.jpg">
<br><br>
<h1>Überschrift</h1>
<h2>27.07.2006</h2><p>Das Durchschnittseinkommen in dieser Region, die zu den ärmsten Europas zählt, liegt deutlich unter 70 Euro im Monat. Die meisten Menschen leben hier von der Hand in den Mund,
</p>
</td>
<td id="rechte_spalte"><p>Diesmal wurden von uns überwiegend Kleidung, Schuhe und Spielsachen, aber auch Rollstühle, Gehhilfen, medizinisches Gerät, Fahrräder und Bücher in Richtung Osten bewegt.
Ein Teil der Hilfsgüter geht an Opfer der </p></td> </tr>
<tr>
<td id="fuss1"></td>
<td id="fuss2"><span id="unterzeile">
<a href="(EmptyReference!)"> sitemap </a>
<a href="(EmptyReference!)"> impressum </a>
<a href="(EmptyReference!)"> g&auml;stebuch</a>
</span></td>
</tr>

</table>
</td>
</tr>
</table>

</td>
</tr>
</table>


<p></p>
</body>

</html>

Bin grad dabei, das ganze über DIVs (statt table tags) zu lösen, allerdings habe ich keinen schimmer, wie ich das spaltenlayout (3 spalten) umsetzen muss (liegen bei mir alle untereinander)

wäre das überhaupt sinnvoll, oder verrenne ich mich da schonwieder?

Vielen Dank für die Mithilfe und Geduld!!!

Hagen

28.07.2006 14:44

5 Jörg Kruse

Hallo Hagen,

das Layout mit Divs zu erstellen ist in jedem Fall besser als mit mehrfach verschachtelten Tabellen - für einen CSS-Anfänger aber natürlich alle andere als eine leichte Übung. Dafür gibt es aber Vorlagen und Tutorials, wie z.B. dieses auf SELFHTML:

Dreispaltiges Layout

Das könntest du für dich nach- bzw. umbauen, und bei etwaigen Problemen hier nachfragen

28.07.2006 15:25

6 Hagen (Gast)

hallo jörg, habe nun das layout soweit ich konnte mittles div-tags umgesetzt - eher intuitiv mit ein paar floats, jedenfalls siehts erstmal recht vielversprechend aus.

was mir momentan am meisten aufstößt ist die navigation, eine Liste (ul) mit einer abschließenden linie.

Leider funktioniert es mit der bündigkeit (vertikal und horizontal) eher mäßig - am besten noch im firefox. folgende grafik soll das schlamassel illustrieren:

http://www.dieses.net/temp/browser.gif

gibt es sinnvolle abhilfe gegen diese scheinbar willkürliche interpretation durch die verschiedenen browser? sollte ich auf Grafikelemente verzichten?

Vielen Dank für deine Mühe!
Grüße Hagen

01.08.2006 15:21

7 Jörg Kruse

Hallo Hagen,

1. zur horizontalen Ausrichtung:

ein ul Element direkt innerhalb eines anderen ul Elementes ist kein valides HTML:

<ul id="navbar">
		  
<!-- ... verschiedene li Elemente ... -->

<ul id="navbar_abschluss"><li><img border="0" src="bilder/stopper.gif"></li>
</ul>
</ul>

Bei einer verschachtelten Liste kannst du ein ul nur innerhalb eines li Elementes wieder aufnehmen:

<ul>
    <li>Listenpunkt erster Ebene</li>
    <li>
        <ul>
            <li>Listenpunkt zweiter Ebene</li>
        </ul>
    </li>
</ul>

Dass die Browser bei dem Abstand voneinander abweichen, liegt sicher auch an der falschen Verschachtelung

2. zur vertikalen Ausrichtung:

Hieran sind wahrscheinlich die vertikalen padding-Angaben für die Tabellenzellen schuld: Firefox und Opera rechen diese (standardkonform) zur Höhe hinzu, der IE nicht

td#linke_spalte, td#rechte_spalte {height: 480px;vertical-align: top; padding-top: 15px; padding-bottom: 15px;}

Wenn du diese Angaben testweise rausnimmst, wirst du sehen, wie sich die Browser in der Höhenausrichtung angleichen. Alternativ könntest du den Abstand durch ein margin-top und margin-bottom für die in der Tallenzelle enthaltenen Elemente realisieren, dann würden die Browser die Tabellenzellen wieder gleich hoch rechnen

01.08.2006 17:06

Beitrag schreiben (als Gast)

Die Antwort wird nach der Überprüfung durch einen Moderator freigeschaltet.





[BBCode-Hilfe]