Internet Explorer 6: float Problem
Twilo
- css
0 Thomas J.S.0 Twilo0 Twilo0 Thomas J.S.0 Twilo1 Thomas J.S.0 Twilo0 Thomas J.S.0 Twilo0 Thomas J.S.0 Twilo0 Thomas J.S.0 Twilo
Hallo,
ich hab mal ein paar fragen zwecks CSS :-)
Internet Explorer 6 Problem
http://www.twilo.de/version/version1.htm
der Internet Explorer 6 fängt mit den rechten div etwas zu tief an.
beim testen fand ich heraus, dass wen ich das Bild herausnehme und stattdessen Text mache...
http://www.twilo.de/version/version2.htm
das die rechte Spalte in Höhe der 2. Zeile vom linken div anfängt
woran könnte das liegen?
oder ist das ein bekannter Bug?
Internet Explorer 5 Problem
http://www.twilo.de/version/screenshot.png
der Internet Explorer 5 ignoriert bei mir irgendwie die padding-top Angabe, da wo die 2 schwarzen Rahmen sind
kann man vom Code her das ganze noch optimieren?
wäre das, so wie es zur Zeit ist, relativ Barrierefrei?
mfg
Twilo
Hallo,
ich hab mal ein paar fragen zwecks CSS :-)
Internet Explorer 6 Problem
http://www.twilo.de/version/version1.htm
der Internet Explorer 6 fängt mit den rechten div etwas zu tief an.
Das da:
<div id="bildContainer1">
<div id="bildContainer2">
<div id="bildContainer3">
<div id="bild"><img src="/version/motiv.gif" alt="" /></div>
<div id="rahmen">
<div id="text">
...
</div>
</div>
<p>Hier kann noch etwas Text stehen.</p>
</div>
</div>
</div>
ist _irre_. Ev. reicht ein #text { float:right; }.
Aber versuche bitte das ganze zu vereinafachen!
Grüße
Thomas
Hallo,
ich hab mal ein paar fragen zwecks CSS :-)
Internet Explorer 6 Problem
http://www.twilo.de/version/version1.htm
der Internet Explorer 6 fängt mit den rechten div etwas zu tief an.
Das da:
<div id="bildContainer1">
<div id="bildContainer2">
<div id="bildContainer3">
<div id="bild"><img src="/version/motiv.gif" alt="" /></div>
<div id="rahmen">
<div id="text">
...
</div>
</div>
<p>Hier kann noch etwas Text stehen.</p>
</div>
</div>
</div>
ist _irre_. Ev. reicht ein #text { float:right; }.
dann hab ich das Problem, dass er mir das nicht rechts floatet, das hatte ich schon probiert
neue Version
neue CSS-Datei
Aber versuche bitte das ganze zu vereinafachen!
wie kann ich das denn vereinfachen?
der Rahmen soll abewr so aussehen
mir fällt da nix passendes ein
mfg
Twilo
Hallo,
Das da:
<div id="bildContainer1">
<div id="bildContainer2">
<div id="bildContainer3">
<div id="bild"><img src="/version/motiv.gif" alt="" /></div>
<div id="rahmen">
<div id="text">
...
</div>
</div>
<p>Hier kann noch etwas Text stehen.</p>
</div>
</div>
</div>
Aber versuche bitte das ganze zu vereinafachen!
ich bekomm das nicht vereinfacht, kann mir jemand ein Tipp geben, wie man das vereinfachen könnte?
mfg
Twilo
Hallo,
Aber versuche bitte das ganze zu vereinafachen!
ich bekomm das nicht vereinfacht, kann mir jemand ein Tipp geben, wie man das vereinfachen könnte?
Nimm einen Tabelle. Im ernst.
Grüße
Thomas
Hallo,
Aber versuche bitte das ganze zu vereinafachen!
ich bekomm das nicht vereinfacht, kann mir jemand ein Tipp geben, wie man das vereinfachen könnte?
Nimm einen Tabelle. Im ernst.
das bringt mich auch nicht viel weiter ;-)
wenn ich Tabellen nehmen würde, müsste ich die Tabellen auch verschachteln, dadurch entsteht sogar noch mehr Code
denn der Rahmen soll ungefähr so aussehen :-)
mfg
Twilo
Hallo,
Nimm einen Tabelle. Im ernst.
das bringt mich auch nicht viel weiter ;-)
wenn ich Tabellen nehmen würde, müsste ich die Tabellen auch verschachteln, dadurch entsteht sogar noch mehr Code
denn der Rahmen soll ungefähr so aussehen :-)
Oh menno!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
<head>
<title>Version 2</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
body {
background-color:#999999;
margin:20px;
}
#Container {
width:29.2em;
background-color:#FFFFFF;
padding:0.4em;
}
#RahmenContainer {
border:0.4em solid #000000;
padding:0.2em;
}
#tableContainer {
border:0.2em solid #000000;
border-collapse:collapse;
width:28em;
}
#bild img {
width: 10em;
/*height:200px;*/
border:0px;
display:block;
}
p {
margin:0px;
padding:0px;
}
.name {
font-size:1.5em;
text-align:center;
margin:1em 0;
}
.datum {
font-size:0.5em;
text-align:center;
}
.angehoerige {
margin:0.5em 3em;
}
.spruch {
margin: 0em 1.5em;
}
</style>
</head>
<body>
<div id="Container">
<div id="RahmenContainer">
<table id="tableContainer" cellpadding="0" cellspacing="0" border="0">
<tr>
<td id="bild" valign="top">
<img src="/version/motiv.gif" alt="" />
</td>
<td id="text">
<p class="spruch">Die Erinnerung ist das einzige Paradies, woraus wir nicht vertrieben werden können.</p>
<p class="name">Vorname Nachname<br />
<span class="datum">* 31.12.2004 † 01.01.2005</span>
</p>
<p class="angehoerige">In Liebe und Dankbarkeit<br />
<strong>Person1<br />
Person2<br />
Person3</strong>
</p>
</td>
</tr>
<tr>
<td colspan="2">
<p>Hier kann noch etwas Text stehen.</p>
</td>
</tr>
</table>
</div>
</div>
</body>
</html>
Grüße
Thomas
Hallo,
Nimm einen Tabelle. Im ernst.
das bringt mich auch nicht viel weiter ;-)
wenn ich Tabellen nehmen würde, müsste ich die Tabellen auch verschachteln, dadurch entsteht sogar noch mehr Code
denn der Rahmen soll ungefähr so aussehen :-)
Oh menno!
wie soll ich das verstehen? *g*
<div id="Container">
<div id="RahmenContainer">
<table id="tableContainer" cellpadding="0" cellspacing="0" border="0">
<tr>
<td id="bild" valign="top">
<img src="/version/motiv.gif" alt="" />
</td>
<td id="text">
<p class="spruch">Die Erinnerung ist das einzige Paradies, woraus wir nicht vertrieben werden können.</p>
<p class="name">Vorname Nachname<br />
<span class="datum">* 31.12.2004 † 01.01.2005</span>
</p>
<p class="angehoerige">In Liebe und Dankbarkeit<br />
<strong>Person1<br />
Person2<br />
Person3</strong>
</p>
</td>
</tr>
<tr>
<td colspan="2">
<p>Hier kann noch etwas Text stehen.</p>
</td>
</tr>
</table>
</div>
</div>
das soll weniger sein als
<div id="bildContainer1">
<div id="bildContainer2">
<div id="bildContainer3">
<div id="bild"><img src="/version/motiv.gif" alt="" /></div>
<div id="rahmen">
<div id="text">
<p class="spruch">Die Erinnerung ist das einzige Paradies, woraus wir nicht vertrieben werden können.</p>
<p class="name">Vorname Nachname<br />
<span class="datum">* 31.12.2004 † 01.01.2005</span></p>
<p class="angehoerige">In Liebe und Dankbarkeit<br />
<strong>Person1<br />
Person2<br />
Person3</strong></p>
</div>
</div>
<p>Hier kann noch etwas Text stehen.</p>
</div>
</div>
</div>
? ;-)
denn du schriebst ja
Aber versuche bitte das ganze zu vereinafachen!
ps. wie war eigentlich dein
ist _irre_.
gemeint?
ps. den Fehler konnte ich beseitigen
das IE 6 Problem lag am "vertical-align" bei "#bild"
IE 6 Problem ist hier behoben
das IE 5 Problem lag daran, weil der IE5 für #bildContainer2 und #bildContainer3 eine Höhe von 1px braucht
mfg
Twilo
Hallo,
Oh menno!
wie soll ich das verstehen? *g*
Wie möchtest du es verstehen? ;-)
denn du schriebst ja
Aber versuche bitte das ganze zu vereinafachen!
Ja ;-) Du brauchst 5 ineinander verschtelte divs ich zwei und eine Tabelle (mit ledigich drei Zellen). ;-)
ps. den Fehler konnte ich beseitigen
das IE 6 Problem lag am "vertical-align" bei "#bild"
IE 6 Problem ist hier behobendas IE 5 Problem lag daran, weil der IE5 für #bildContainer2 und #bildContainer3 eine Höhe von 1px braucht
Genau das habe ich gemeint mit vereinfachen. ;-)
Du machst super verrenkungen (die 3px Kommentar in deinem CSS z.B.) um den IE5, dann den IE6 etc zu bedienen. Den Code den ich dir zeigte kommt mit einem Drittel der CSS aus die du sonst brauchst und braucht keine Hacks für irgendwelche Browser.
Ich denke, das kann man als vereinfachen betrachten? ;-)
Grüße
Thomas
Hallo,
Oh menno!
wie soll ich das verstehen? *g*
Wie möchtest du es verstehen? ;-)
z.B.
och Menno, der Twilo hat Recht
och Menno, ich (Thomas J.S) hab mal wieder kein Recht
och Menno, ich (Thomas J.S) hab mal wieder alles falsch gemacht
och Menno, ich (Thomas J.S) erzähl mal wieder nur Mist
och Menno, ich (Thomas J.S) ...
da fällt mir noch mehr ein :-P
denn du schriebst ja
Aber versuche bitte das ganze zu vereinafachen!
Ja ;-) Du brauchst 5 ineinander verschtelte divs ich zwei und eine Tabelle (mit ledigich drei Zellen). ;-)
dafür kann man dein nicht mehr anpassen ;)
z.B.
kann man es nicht so einfach anpassen wie bei
hier :-)
Version 4 hat noch ein Fehler :-/
ps. den Fehler konnte ich beseitigen
das IE 6 Problem lag am "vertical-align" bei "#bild"
IE 6 Problem ist hier behoben
das IE 5 Problem lag daran, weil der IE5 für #bildContainer2 und #bildContainer3 eine Höhe von 1px braucht
Genau das habe ich gemeint mit vereinfachen. ;-)
Du machst super verrenkungen (die 3px Kommentar in deinem CSS z.B.) um den IE5, dann den IE6 etc zu bedienen. Den Code den ich dir zeigte kommt mit einem Drittel der CSS aus die du sonst brauchst und braucht keine Hacks für irgendwelche Browser.
Ich denke, das kann man als vereinfachen betrachten? ;-)
dann muss ich aber für die anderen Versionen extra Dateien erstellen
ich bleib bei der CSS-Variante *g*
die gefällt mir besser ;)
mfg
Twilo
Hallo,
z.B.
och Menno, der Twilo hat Recht
och Menno, ich (Thomas J.S) hab mal wieder kein Recht
och Menno, ich (Thomas J.S) hab mal wieder alles falsch gemacht
och Menno, ich (Thomas J.S) erzähl mal wieder nur Mist
och Menno, ich (Thomas J.S) ...
Du heisst Thomas J.S.!?! Das ist aber nett! ;-)
da fällt mir noch mehr ein :-P
Sprich weiter! ;-)
Ja ;-) Du brauchst 5 ineinander verschtelte divs ich zwei und eine Tabelle (mit ledigich drei Zellen). ;-)
dafür kann man dein nicht mehr anpassen ;)
Also was du innerhalb der Tabelle machst ist relativ egal:
Version 1: ist schon gegeben,
Version 2: braucht du nur eine Zelle
Version 3: ebenfalls
Version 4: braucht 2 Zellen
dann muss ich aber für die anderen Versionen extra Dateien erstellen
ich bleib bei der CSS-Variante *g*
die gefällt mir besser ;)
Du hast auch jetzt 4 Dateien. Wo ist da der Unterschied?
Bzw. du hättest sagen könnne, dass du nur experimetierts und das ganze nicht wirklich brauchst ;-)
Grüße
Thomas
Hallo,
Ja ;-) Du brauchst 5 ineinander verschtelte divs ich zwei und eine Tabelle (mit ledigich drei Zellen). ;-)
dafür kann man dein nicht mehr anpassen ;)
Also was du innerhalb der Tabelle machst ist relativ egal:
Version 1: ist schon gegeben,
Version 2: braucht du nur eine Zelle
Version 3: ebenfalls
Version 4: braucht 2 Zellen
jo, bei dir muss man die Tabellen ändern
ps. wo sind das denn eigentlich Tabellarische Daten? :)
dann muss ich aber für die anderen Versionen extra Dateien erstellen
ich bleib bei der CSS-Variante *g*
die gefällt mir besser ;)
Du hast auch jetzt 4 Dateien. Wo ist da der Unterschied?
Bzw. du hättest sagen könnne, dass du nur experimetierts und das ganze nicht wirklich brauchst ;-)
zur Zeit ja, nur nachher wird es nur per CSS geregelt.. also nix mehr am Quellcode rumpfuschen :)
wobei 4 noch nicht so will, wie ich das gerne hätte :-/
mfg
Twilo
Hallo Twilo,
jo, bei dir muss man die Tabellen ändern
ps. wo sind das denn eigentlich Tabellarische Daten? :)
wie gesagt, wenn ich gewusst hätte dass du nur ein wenig experimetierst ...
zur Zeit ja, nur nachher wird es nur per CSS geregelt.. also nix mehr am Quellcode rumpfuschen :)
Ich sehe da für die Praxis überhapt keinen Vorteil darin. Auch wenn du dann verschiede Styles per <link> zur Verfügung stellt. Nicht alle Browser unterstützen das, vor allem nicht der IE, also kommt dann der Ehrgeitz es doch für "alle" Browser zugänglich zu machen und du stehst wieder am Afang. (Oder du hast doch 4 CSS-Dateien und wechselst diese per JavaScript aus. Dann mach es wiederum keinen Unterschied ob es nun 4 CSS- oder 4 HTML-Dateien sind)
Du hattest eine konkte Anforderung "diese Seite sollte im IE 5 und 6 und Firefox gleich aussehen". Ich lieferte eine Lösung, dass sie nicht das war was du dir vorgestellt hat, tut mir Leid.
Grüße
Thomas
Hallo,
jo, bei dir muss man die Tabellen ändern
ps. wo sind das denn eigentlich Tabellarische Daten? :)
wie gesagt, wenn ich gewusst hätte dass du nur ein wenig experimetierst ...
experimetieren kann man das nicht nennen, dass fliesst nachher so im Projekt ein, nur jetzt teste ich, wie ich das am besten mache :)
zur Zeit ja, nur nachher wird es nur per CSS geregelt.. also nix mehr am Quellcode rumpfuschen :)
Ich sehe da für die Praxis überhapt keinen Vorteil darin. Auch wenn du dann verschiede Styles per <link> zur Verfügung stellt. Nicht alle Browser unterstützen das, vor allem nicht der IE, also kommt dann der Ehrgeitz es doch für "alle" Browser zugänglich zu machen und du stehst wieder am Afang. (Oder du hast doch 4 CSS-Dateien und wechselst diese per JavaScript aus. Dann mach es wiederum keinen Unterschied ob es nun 4 CSS- oder 4 HTML-Dateien sind)
das entsprechende CSS-File wird nachher per PHP eingeflegt
Du hattest eine konkte Anforderung "diese Seite sollte im IE 5 und 6 und Firefox gleich aussehen". Ich lieferte eine Lösung, dass sie nicht das war was du dir vorgestellt hat, tut mir Leid.
hätte ich es nicht per CSS hinbekommen, hätte ich deine Variante genommen ;)
trotzdem thx noch einmal :)
mfg
Twilo