css unterschiedliche darstellung in webbrowsern

[ipu]

Hallo zusammen!

Ich habe mit XSQL und XSLT eine Webanwendung programmiert. Die Grundstruktur habe ich mit <div>....</div> umgesetzt; die Container enthalten wiederum Tabellen. Alles habe ich mit CSS Stylesheets formatiert.

Im Internet Explorer 6.x sieht das auch alles sehr hüsch aus. Mit dem Internet Explorer 5.x hatte ich das Problem, dass

a:hover{

	text-decoration: none;

	font-weight: bold;

}

dazu führte, dass kein Link angeklickt werden konnte. Die komplette Formatierung löste sich auf, soblad der Mauszeiger den Link erreicht hat. Dieses Problem habe ich jetzt umgangen, indem ich "font-weight: bold;" mit „font-weight: normal;“ überschreibe und statt dessen „text-decoration: underline;“ verwende. Die Darstellung im Internet Explorer 5.x war sonst in Ordnung.

Jetzt gibt es da aber noch den Mozilla Firefox, Netscape 7.1 und Opera. Mit den ersten beiden habe ich die Webanwendung getestet mit dem Ergebnis, dass die einzelnen Boxen übereinander geschoben werden. Gelesen habe ich, dass man dieses Problem lösen kann, indem man „float“ auf „left“ setzt und den Containern eine feste Breite vorgibt. In meinem Stylesheet haben alle Container eine relative feste Breite (z. B. „width: 20%;“); alle sind mit „float:left;“ formatiert.

Hat jemand eine Idee, woran das liegen könnte, dass die Boxen trotzdem alle links oben ausgerichtet werden?

Vielen Dank im Voraus!

Grüße von ipu

[tobias-digital]

Hi!

Also, ich helf in CSS-Fragen immer gerne weiter, aber ohne konkreten Quellcode, und nach Möglichkeit auch Layout-Entwurf ist das schwer zu sagen.

Gruß, Tobias

[ipu]

Was soll ich denn an Quellcode rüberschicken? Den Quellcode zu den Stylesheets hab ich doch dazu gepackt. Und die Container sind alle so formatiert.

Ein Layout-Entwurf fällt mir schwer, hier als Grafik einzubinden. Ich kanns ja mal beschreiben:

1 Container enthält die Titelleiste. Dieser befindet sich auf dem Bildschirm ganz oben, ist so breit wie die Anzeige und in der Höhe etwa 1/4. Dann kommt links die Menüleiste, so hoch wie die restliche Anzeige und etwa 1/4 breit. Daneben kommen übereinander 2 Container, breit etwa 1/2 des Bildschirms und zusammen so hoch wie die Menüleiste. Ganz rechts kommt noch ein weiterer Container, etwa 1/4 breit und ebenfalls so hoch wie die Menüleiste.

Hilft das weiter?

Grüße von ipu

[Manitu71]

Was soll ich denn an Quellcode rüberschicken? Den Quellcode zu den Stylesheets hab ich doch dazu gepackt. Und die Container sind alle so formatiert.

Den Quellcode zu den Stylesheets? Also ich sehe da ned viel.

Und die Container sind alle so formatiert.

Tolle Aussage.

Ein Link auf die Seite und das CSS hier als Code geposted, würde uns eher weiterbringen.

[ipu]

Den Quellcode zu den Stylesheets? Also ich sehe da ned viel.

Und die Container sind alle so formatiert.

Tolle Aussage.

Ein Link auf die Seite und das CSS hier als Code geposted, würde uns eher weiterbringen.

Einen Link auf die Seite geht nicht, da es sich um eine Intraweb-Anwendung mit Datenbankanbindung handelt.

Bei meiner ersten Anfrage habe ich schon beschrieben, wie die Container formatiert sind. Aber hier gerne auch der Quellcode dazu:

div{

  float: left;

  margin: 1px;

  vertical-align: middle;

  text-align: center;

}

Dazu kommt dann noch jeweils individuell Höhe und Breit in %, z.B.:

  width:99%;

  height:10%;

Grüße von ipu

[tobias-digital]

... dazu führte, dass kein Link angeklickt werden konnte. Die komplette Formatierung löste sich auf, soblad der Mauszeiger den Link erreicht hat. Dieses Problem habe ich jetzt umgangen, indem ich "font-weight: bold;" mit „font-weight: normal;“ überschreibe und statt dessen „text-decoration: underline;“ verwende. Die Darstellung im Internet Explorer 5.x war sonst in Ordnung.

Jetzt gibt es da aber noch den Mozilla Firefox, Netscape 7.1 und Opera. Mit den ersten beiden habe ich die Webanwendung getestet mit dem Ergebnis, dass die einzelnen Boxen übereinander geschoben werden. Gelesen habe ich, dass man dieses Problem lösen kann, indem man „float“ auf „left“ setzt und den Containern eine feste Breite vorgibt. In meinem Stylesheet haben alle Container eine relative feste Breite (z. B. „width: 20%;“); alle sind mit „float:left;“ formatiert.

Hat jemand eine Idee, woran das liegen könnte, dass die Boxen trotzdem alle links oben ausgerichtet werden?

Vielen Dank im Voraus!

Grüße von ipu

Also IMHO hast Du die ganze Sache falsch rum angepackt. Der Internet Explorer (egal welche Version) interpretiert die HTML- und CSS-Standards falsch. Wenn Du zum Entwickeln den Firefox verwendest und dein Mearkup regelmäßig vom W3C Validator prüfen lässt, dann erhältst Du zunächst mal guten Code. Wenn du guten Code hast, dann kannst du versuchen die Seite an die verschiedenen Internet-Explorer anzupassen. Entweder duch Conditional Comments (mein Favorit) oder durch CSS Hacks.

Wenn deine Boxen wirklich floaten, dann kann es mit ziemlicher Sicherheit nicht sein, dass sie übereinander geschoben werden und sich verdecken. Da musst du schon irgendwo ein position absolute/relative in Verbindung mit top/left/right/bottom stehen haben.

"float: left" bedeutet, dass sich deine Boxen links anordnen. Wenn du z.B. zwei divs hast und beide mit

div {

  float: left;

  width: 50%;

}

formatierst, dann werden diese beiden links nebeneinanderangeordnet. Du hast aber z.B. noch margin auf 1px gesetzt, was bedeutet, dass zu der Gesamtbreite noch 4 Pixel Rand dazugezählt werden (1px Rand + 50% Weite + 1px Rand + 1px Rand + 50% Weite + 1px Rand); das überschreitet 100% um 4px, also können die Boxen nicht nebeneinander angeordnet werden und werden untereinander angeordnet.

[ipu]

Das mit dem Rand von 4 pixeln leuchtet mir ein. Hab das jetzt mal rausgenommen, hatte aber keine weiteren Konsequenzen.

Trotzdem vielen Dank!

Grüße von ipu

[tobias-digital]

Das mit dem Rand von 4 pixeln leuchtet mir ein. Hab das jetzt mal rausgenommen, hatte aber keine weiteren Konsequenzen.

Könnte natürlich auch damit zu tun haben, dass Dein Markup fehlerhaft ist. Wenn Du hier mal deinen Quellcode posten würdest könnte man sogar ganz konkret sagen woran's liegt.

[geloescht_JesterDay]

div{

  float: left;

  margin: 1px;

  vertical-align: middle;

  text-align: center;

}

Dazu kommt dann noch jeweils individuell Höhe und Breit in %, z.B.:

  width:99%;

  height:10%;

Grüße von ipu

Divs mit float: left werden ansich links angeordnet und nebeneinander... im Normalfall. Wenn ein DIV davon aber 99% Breite des Elternelements hat, gibt es für das nächste DIV keinen Platz mehr links zu floaten (also rechts neben dem vorhergehenden DIV). Da es aber dennoch links floatet, floatet es eben da, wo noch Platz ist, also in der nächsten Zeile bzw. unter dem vorhergehenden DIV.