HTML: Probleme mit Website im IE/FF

[CalganX]

Hi,
so langsam erkläre ich HTML, PHP, CSS und dem Internet Explorer den Krieg. Ich schaffe es nicht eine simple Seite aufzubauen. :wall: Im Firefox siehts richtig aus und im IE falsch. Ich habe alle Dateien mal angehängt, vielleicht kann sich das ja mal jemand ansehen (ich gehe nicht davon aus, dass irgendjemand hier das Design gebrauchen könnte). :)

Zur Theorie:

Code:

|---------------------------------------|
|img|             TEXT              |img|
|---------------------------------------|
| * Einfache <ul>-Liste, die mit CSS    |
|   formartiert wurde                   |
|---------------------------------------|

So sollte es aussehen. Wer sich den Anhang ansieht (die test.html), wird sehen, dass die beiden Bilder (hier als img gekennzeichnet) 8px breit sind und somit die ganze Spalte ausfüllen sollten. Die Spalte, in dem der Titel-Text steht hat mit CSS ein Hintergrund bekommen. Soweit so gut. Im Firefox sieht das auch perfekt aus, nur der Internet Explorer spackt rum, weil er einfach zwischen dem rechten Bild und dem Hintergrund einen Flecken frei lässt. Ich kann mir nicht erklären, warum er das tut. :( Eigentlich *darf* er das gar nicht machen.

Weiter geht es dann aber mit der <ul>-Liste: das durch CSS zugewiesene Bild sollte auf der gleichen Höhe mit dem Text sein - im Firefox ist es so. Jetzt dürft ihr mal raten, welcher Browser das nicht macht. :roll:

Hat jemand einen grandiosen Einfall? Ich verzweifle da nun schon seit gut 2 Stunden dran. :cry:

Chris

[MasterEvil]

ich kann dir leider nicht sagen warum IE das macht.
ich hab eben ein wenig mit deinen Sachen rumgespielt, finde aber ebenfalls auf diesem weg keine Lösung.

Ich würde dir einfach zu zwei anderen Methoden raten:

1. Mach die Überschrift einfach mit aufs Bild und nimm einen img Tag wie auch für die Seiten.
So hast du zwar, je nachdem wieviele solcher überschriften du brauchst, mehr bilder, aber dafür passt es perfekt.

2. Nimm keine Liste. Mach dort wieder eine Tabelle hin und mach in die erste Spalte deine dot grafik und in die zweite deinen text. kommt wieder aufs selbe raus, nur funzt es überall.

greetz
Steffen

[Kidix]

schau dir mal den Quelltext an, man sollte right und left auch schon unterscheiden können!!!

z.B. hier:

Code:

<td width="8" align="right">[img]images/menu_caption_left.gif[/img]</td>
        <td align="center" class="tdNavCaption" width="100%">Aktuelles</td>
        <td width="8" align="left">[img]images/menu_caption_right.gif[/img]</td>

[MasterEvil]

was meinstn damit?
das align is doch richtig.

das eine is das bild für links, muss aber nen align haben nach rechts, damit es mit dem bild in der mitte zusammenschließt. das selbe beim andern umgedreht.

[mh166]

Mach einfach noch in das <td>-Tag der rechten Spalte folgenden Code rein: style="padding:0px;" Dann gehts.

mfg, mh166

[Kidix]

Zitat:

Zitat von MasterEvil

was meinstn damit?
das align is doch richtig.

das eine is das bild für links, muss aber nen align haben nach rechts, damit es mit dem bild in der mitte zusammenschließt. das selbe beim andern umgedreht.

gut zu wissen wie ihr komplexere darstellungen lösen wollt *lachweg*

[Matze]

Ich hatte kürzlich ein ähnliches Problem: Der IE wollte partout keine festen Breitenangaben umsetzen, vielleicht liegt es daran.

Entweder per css lösen, oder relative (prozentuale) Breitenangaben verwenden.

[alcaeus]

Zitat:

Zitat von Matze

Ich hatte kürzlich ein ähnliches Problem: Der IE wollte partout keine festen Breitenangaben umsetzen, vielleicht liegt es daran.

Naja, die Browser haben immer andere Sichtweisen. Ein Beispiel: was soll passieren, wenn eine Spalte 150px breit sein soll, und die zweite 100%? Soll die erste 150px breit sein oder soll die 2. 100% des verfuegbaren Platzes einnehmen?
Da muss man einfach kompromissloesungen finden.

@Kidix: na lach mal brav weiter. Es funktioniert jedenfalls, ein Bild nach rechts und ein Bild nach links zu schieben. Ich weiss nicht was daran falsch sein soll. Ich stelle so ganze Seiten zusammen :roll:

Greetz
alcaeus

[Airblader]

@alcaeus

nunja, "falsch" ist nichts, es ist nur veraltet alles mit html-attributen anzugeben.
Modern wird das mit CSS gemacht und der W3C-standard wird irgendwann soweit sein dass html-attribute garnicht mehr existieren.

funktionieren tun im moment aber noch alle attribute
air

[alcaeus]

Moin Airblader,

ich denke er meinte wohl dass es falsch sei, mit aligns zu arbeiten. Ob dies nun via HTML oder CSS geschieht, ist egal.

Greetz
alcaeus

[Matze]

Zitat:

Zitat von alcaeus

Naja, die Browser haben immer andere Sichtweisen. Ein Beispiel: was soll passieren, wenn eine Spalte 150px breit sein soll, und die zweite 100%? Soll die erste 150px breit sein oder soll die 2. 100% des verfuegbaren Platzes einnehmen?
Da muss man einfach kompromissloesungen finden.

Es ist aber so, wenn ich eine zweispaltige Tabelle habe, die 500 Px breit ist und die eine Spaltenbreite auf 200 Px setze, die andere auf 300, dann stimmt das im IE trotzdem nicht.

Der IE kommt mit aligns bei mir ohne weiteres klar, ich denke nicht, dass es daran liegt.

Btw:

Code:

<td>
  [img] ... [/img]
</td>

Stellt der IE auch komplett falsch dar, bei ihm muss es immer in einer Zeile sein, bei einem Bild, was Chakotay jedoch richtig gelöst hat. ABer verstehen kann man das Parsen des IEs nicht, zumindest ich nicht.

[alcaeus]

Zitat:

Zitat von Matze

Btw:

Code:

<td>
  [img] ... [/img]
</td>

Stellt der IE auch komplett falsch dar, bei ihm muss es immer in einer Zeile sein, bei einem Bild, was Chakotay jedoch richtig gelöst hat. ABer verstehen kann man das Parsen des IEs nicht, zumindest ich nicht.

Ja, das habe ich festgestellt.

Opera hingegen mag sowas nicht:

Code:

<tr>
  <td>[img]...[/img]</td>
</tr>
<tr>
  <td>[img]...[/img]</td>
</tr>

Zwischen den Zeilen landen immer Abstände, auch wenn cellspacing="0" und cellpadding="0" gesetzt sind. Aber mit solchen Sachen müssen Webdesigner eben leben.

Greetz
alcaeus

[freak4fun]

Ist das Problem jetzt schon gelöst? :angel2:

MfG
fR34k

[CalganX]

Hi,
ja, danke, so funktioniert das jetzt (mit dem padding in CSS). :)
Allerdings will das trotzdem nicht so, wie ich. -.-" Aber diesmal "nur" eine designtechnische Sache (Hintergrundbild der Tabelle). Mal sehen, wie ich das lösen muss. :roll:

Chris

[himitsu]

Wenn ihr unbedingt eine feste Spaltenbreite in einer Tabelle haben wollt, dann solltet/müßt ihr die automatische Breitenanassung abstellen, damit der Browser sich nicht in die Breitenverteilung einmischt, aber damit fangen dann wiederum andere Probleme erst an (weil man sich ja dann um alles selber kümmern muß...)

Code:

<table style="[color=#ff0000]table-layout:fixed[/color]" ...>