layout mit css anstatt mit tabellen

[Turtle]

Hallo,

ich bin dabei mich (endlich) vom reinen tabellenlayout zu entfernen und mehr mit css zu layouten.

ich habe dabei folgendes problem:

ich möchte einen zentrierten, 760px breiten div in der kopfzeile.
hierin befinden sich zwei divs, das "linke" eine grafik und das rechte eine rechtsgesetzte grafik. beide grafik enthalten eine linie,
die zusätzlich im rechten div als hintergrundgrafik platziert ist.

im firefox sieht alles wunderbar aus, die linie ist durchgehend.
im MSIE6 allerdings wird die hintergrundgrafik des rechten divs ein paar pixel rechts neben der linken divgrenze angzeigt. die linie ist also unterbrochen.

ich weiss nicht, wie ich es nach etlichem probieren hinbekomme.

hier quelltext und css:

HTML:
-----------------------------------------------
<div id="topDiv" align="center">
 <div id="navTopDiv"><img src="images/topLeft.gif" alt="" width="181" height="99"></div>
 <div id="contentTopDiv"><img src="images/logo.gif" alt="architekturb&uuml;ro ising" width="408" height="99"></div>
</div>
-----------------------------------------------

CSS:
-----------------------------------------------
div#topDiv
{
 height:99px;
 width:760px;
 margin:auto;
 border:0px dashed #00FFFF;
}

#navTopDiv, #contentTopDiv
{
 height:99px;
}
#navTopDiv
{
 background-image:url(images/topLeftBg.gif);
 background-repeat:repeat-x;
 padding-right:0px;
 float:left;
}

#contentTopDiv
{
 background-image:url(images/topBg.gif);
 background-repeat:repeat-x;
 text-align:right;
 border:0 px dotted #FF0000;
}
-----------------------------------------------

hat jemand eine idee, woran das liegt oder wie ich die linie durchgezogen angezeigt bekommen.

sonst werde ich (leider) eine tabelle daraus machen.

gruss und danke,
turtle

[Marian]

Hi Turtle,

im firefox sieht alles wunderbar aus, die linie ist durchgehend.
im MSIE6 allerdings wird die hintergrundgrafik des rechten divs ein paar pixel rechts neben der linken divgrenze angzeigt. die linie ist also unterbrochen.

du siehst: der fehler liegt nicht bei dir, sondern beim IE bzw. bei Micro$oft.

hat jemand eine idee, woran das liegt oder wie ich die linie durchgezogen angezeigt bekommen.

sonst werde ich (leider) eine tabelle daraus machen.

nur weil ein browser css nicht richtig versteht, willst du darauf verzichten?
du könntest das gleich noch mit firefox-promotion verbinden ("Diese Seite kann nur mit dem Firefox (+link) richtig angezeigt werden. Der IE ist zu blöd dafür") ;-)

zu deinem problem: ich kann es mir garnicht angucken, weil ich die seite nicht weiß (den quelltext und das css in eine datei kopieren geht auch niweil ich die bilder nicht hab)

Gruß, Marian

[Cyx23]

Hallo,

sonst werde ich (leider) eine tabelle daraus machen.
nur weil ein browser css nicht richtig versteht, willst du darauf verzichten?
du könntest das gleich noch mit firefox-promotion verbinden ("Diese Seite kann nur mit dem Firefox (+link) richtig angezeigt werden. Der IE ist zu blöd dafür") ;-)

Meinst du etwas wie if(document.all)self.close oder so, denn wen es da erwischt ist
letztlich selbst Schuld?-)

zu deinem problem: ich kann es mir garnicht angucken, weil ich die seite nicht weiß (den quelltext und das css in eine datei kopieren geht auch niweil ich die bilder nicht hab)

Da fehlt es allerdings an einem brauchbaren Beispiel, online wäre ganz praktisch, ich
konnte mit dem Code auch nicht soviel anfangen.

Grüsse

Cyx23

[Marian]

Hi Cyx23,

Hallo,

sonst werde ich (leider) eine tabelle daraus machen.
nur weil ein browser css nicht richtig versteht, willst du darauf verzichten?
du könntest das gleich noch mit firefox-promotion verbinden ("Diese Seite kann nur mit dem Firefox (+link) richtig angezeigt werden. Der IE ist zu blöd dafür") ;-)

Meinst du etwas wie if(document.all)self.close oder so, denn wen es da erwischt ist
letztlich selbst Schuld?-)

ja, das is gut. aber da kommt ja immer noch ne abfrage ob mans wirklich schließen will ;-(

aber ich mein eigentlich: "wenn sie IE haben, sieht das hier scheiße aus, ich weiß, laden sie sich <a href="http://www.getfirefox.com">Firefox</a> runter, dann sieht es schön aus" (und das dann über php oä nur dann einblenden wenn der UserAgent IE ist) (kenn auch seiten wo das steht, aber immer, auch bei firefox)

Gruß, Marian

[Cyx23]

Hallo,

aber ich mein eigentlich: "wenn sie IE haben, sieht das hier scheiße aus, ich weiß, laden sie sich <a href="http://www.getfirefox.com">Firefox</a> runter, dann sieht es schön aus" (und das dann über php oä nur dann einblenden wenn der UserAgent IE ist) (kenn auch seiten wo das steht, aber immer, auch bei firefox)

Ich habe schon befürchtet dass du solchen Unfug meintest.

Solche unseligen Ideen sind mir in den letzten Jahren aber eher bei Opera gekommen, nicht dass er
so schlecht wäre, aber wegen der ständigen Weiterentwicklung und einiger lästiger Bugs ist Opera
manchmal schwieriger zu bedienen als ein IE, der immer die gleichen Fehler macht, und in den drei
"aktuellen" Versionen notfalls per conditinal comment auch ohne CSS-Hack angepasst bedient werden
kann.
Ähnliche Probleme mag es auch geben wenn ein Code neben Firefox und Opera noch Konqueror, der mir
eigentlich immer besser gefällt, und vielleicht noch "ältere" Mozillas oder Netscape 7 gerecht
werden soll.

Grüsse

Cyx23

[L00NIX]

Hallo

ich möchte einen zentrierten, 760px breiten div in der kopfzeile.
hierin befinden sich zwei divs, das "linke" eine grafik und das
rechte eine rechtsgesetzte grafik. beide grafik enthalten eine
linie, die zusätzlich im rechten div als hintergrundgrafik
platziert ist.

im firefox sieht alles wunderbar aus, die linie ist durchgehend.
im MSIE6 allerdings wird die hintergrundgrafik des rechten divs ein paar pixel rechts neben der linken divgrenze angzeigt. die linie ist also unterbrochen.

ich weiss nicht, wie ich es nach etlichem probieren hinbekomme.

Zuerst einmal die Validatoren befragen, ob noch Fehler vorhanden sind:

HTML: http://validator.w3.org
CSS: http://jigsaw.w3.org/css-validator

Dann erst alle (kritischen, anzeigerelevanten) Fehler beseitigen.

hier quelltext und css:

HTML:

<div id="topDiv" align="center">

Das Attribut "align" ist veraltet. Benutze CSS!

<div id="navTopDiv"><img src="images/topLeft.gif" alt="" width="181" height="99"></div>
<div id="contentTopDiv"><img src="images/logo.gif" alt="architekturb&uuml;ro ising" width="408" height="99"></div>

Auch die Höhen ud Breitenangaben der Bilder können über CSS erfolgen.

CSS:

[...]
hat jemand eine idee, woran das liegt oder wie ich die linie
durchgezogen angezeigt bekommen.

Es gibt Außen- (margin) und Innenränder (padding).

Kannst du die Seite testweise hochladen und einen Link posten?

Gruß
L00NIX

[beza1e1]

Die Motivation ordentlich semantisches HTML zu schreiben hast du. Das ist gut. Leider rennst du gerade, trotz aller guten Absichten in die falsche Richtung.

CSS Layout bedeutet nicht div statt table zu benutzen. Die Idee ist den *Inhalt* mit HTML auszuzeichnen. Deine img Tags sind kein Inhalt sondern Layout. Was genaueres kann ich erst sagen, wenn du mir ne URL zu deinem HTML gibst.

Der Bug, den du siehts, ist halt IE ...