CSS / FF / IEx - % wird in FF ignoriert

**Tamara-Jasmin** · 22.07.2011, 19:00

Hi, ich bastel sei Stunden an einer Einstellung, bekomme die aber nicht wirklich hin.
Zumal hätte ich noch eine Frage zur Auflösung. Wie ist denn die Ansicht (in Pixel) im Browser bei einer 1024x768er Bildschirmauflösung?

Hier nun mal mein Code, der im IE7 und 8 korrekt angezeigt wird.

Bildlich sieht es so aus:

kleines Bild...................................... kleines Bild
........................grosser Text1
.
.
.......................Mittiger Infotext
.
.
........................grosser Text2
kleines Bild......................................kleines Bild

mein Code (um meinen Text gekürzt):

HTML-Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">

<head>

<title>..</title>

<meta ..zeugs "/>

<link rel="stylesheet" type="text/css" href="/xx.css"/>
</head>

<body  marginwidth="0" marginheight="0" topmargin="0" leftmargin="0" bgcolor="#ffffff" text="#000000" link="#000000" vlink="#000000" alink="#000000" bottommargin="0" rightmargin="0">

<div class="neu-l" style="position: absolute; top: 0px; left: 0px;"> </div>
<div class="neu-l" style="position: absolute; bottom: 0px; right:0px;"> </div>
<div class="neu-r" style="position: absolute; top: 0px; right: 0px;"> </div>
<div class="neu-r" style="position: absolute; bottom: 0px; left: 0px;"> </div>

<div style="color: blue; text-align:center; margin:auto; position: relative; top: 3%" >
    <h2>grosser Text1<br /> grosser Text1</h2>
</div>

<div class="text">
    <h2 style="color: #FF0000; text-decoration: underline">Unser Service f&uuml;r Sie:</h2>
    Text in Mitte

<div style="position: absolute; bottom:0px; left: 50px">
    <br /><br />
    <a href="/info/kosten.php" target="_self"> Kosten</a>&nbsp;&nbsp;&nbsp;
    <a href="/info/listeundbedingungen-07-2011.pdf" target="_blank">Gegenstandsliste </a>&nbsp;&nbsp;&nbsp;
    <a href="/info/info.php" target="_self"> zur&uuml;ck</a>&nbsp;&nbsp;&nbsp;
    <a href="/info/impressum.php" target="_self"> Impressum</a>

</div>

</div>

<div style="color: blue; text-align:center; margin:auto; position: relative; top: 78%;" >
    <h2>grosser Text2<br />grosser Text2</h2></div>
<?php
hier ist noch ein kleiner Aufrufzähler ..?>
</body>
</html>

Meine CSS dazu:

HTML-Code:

.neu-l {
    height: 145px;
    width: 145px;
    background-image: url(neu-2.jpg);

}
.neu-r {
    height: 145px;
    width: 145px;
    background-image: url(neu-1.jpg);
}
.text {
    height: 69%;
    width: 77%;
    background-color: #E4E4E4;
    margin:auto;
    padding-left: 15px;
    padding-top: 15px;
    padding-right: 15px;
    padding-bottom: 0px;
    text-align: center;
    position: absolute; top: 16%; left:11%;
    display: inline;
}
a {
    color: #008000;
    font-size: smaller;
    text-decoration: underline;
    text-align: left;
    display: inline;
}
table {
    font-size: x-small;
    font-weight: bold;
    text-align: center;
}

Wie gesagt, in IEx schaut es aus wie ich es haben will. Gut ... Cellarius gab mir ja mal den "Arschtritt" mehrere Browser zu installieren und zu testen (Danke

),
und nun stelle ich eben fest, dass "grosser Text 2" direkt unter "Grosser Text 1 geschrieben wird - und damit in den grauen Kasten mit der Info wandert.

So funktioniert es einigermassen, aber doch sichtlich unprofessionell und verschoben:

HTML-Code:

<div style="color: blue; text-align:center; margin:auto; position: absolute; bottom: 6%; left:30%" >
    <h2>grosser Text 2<br />grosser Text 2</h2></div>

Irgendeine Idee?

Es gibt ja tatsächlich noch Leute mit 800*600 Auflösung - frage mich wie wir das letzte Jahrzehnt damit leben konnten - aber die Anzahl gerade in Hotels
ist nicht mal so gering. Da frage ich mich, ob man das irgendwie regeln kann, eine Auflösungserkennung enzubauen und dann bei 800*600px eine Info einzufügen,
dass man doch bitte seine Auflösung auf 1024*768 einstellen - oder sich einen neuen Monitor kaufen soll, da die Seite nur mit 1024*768 ordentlich dargestellt
werden kann. Schliesslich ist bei der kleinen Auflösung alles komplett zerissen!

Danke fürs Lesen

Liebe Grüsse:
Tammy

**Tamara-Jasmin** · 23.07.2011, 12:25

Verstehen tue ich es zwar nicht, aber so geht es:

HTML-Code:

<div style="color: blue; text-align:center; margin:auto; position: relative; bottom: -80%;" >
    <h2>grosser Text2<br />grosser Text2</h2></div>

Vielleicht kann es ja wer erklären, warum -80% mittig ist und ca. 3-5% vom Boden (bottom) ist.
eigentlich müsste doch -80% = 3-5 % sein, denn das ist die Position wo es sein sollte.

Liebe Grüsse:
Tammy

**Tamara-Jasmin** · 23.07.2011, 12:30

war zu voreilig, war im Internet Explorer und nicht im FF

Zumindest ist die Position im IE etwas genauer

Liebe Grüsse:
Tammy

**Tamara-Jasmin** · 24.07.2011, 13:14

Kennt vielleicht jemand ein Forum - wo auch was los ist - und wo ich solche Fragen mal posten kann?

Liebe Grüsse:
Tammy

**Hoffi** · 24.07.2011, 18:31

Du mischt div. Floats. Ganz kruder Quelltext.

Du solltest dir ein paar Dinge angewöhnen:
Niemals Inline Style benutzen! (Ausnahme: display:none; bei DIV's die initialisiert werden.
Möglichst keine absoluten Positionierungen!
Verzichte komplett auf Tag-Eigenschaften die formatieren. (Body-Tag). Dazu kann man im CSS als erstes den Selektor * benutzen.

Der Code da oben wird dir beim X-Browser test mehrere lustige Effekte bringen.

Entwickel im Firefox mit dem AddOn Firebug. Da kannst du quasi Live das CSS bearbeiten. Und wenn es passt in deine CSS kopieren.

Dann les dich in die Materie des Floaten eins. Dazu gibt es genug gute Texte im Netz, so gut kann ich es jetzt auch nicht schreiben.

**Tamara-Jasmin** · 24.07.2011, 22:03

Oha ... mit so einer Antwort habe ich nicht gerechnet.
Zumal ich in fast allen Quelltexten absolute positionierungen lese

Hab schon 3 Tage gebastelt um die Textbox einigermassen mittig zu bekommen.
Oder meinst Du nur innerhalb der Textbox das nicht mehr verwenden?
Mit Float habe ich das erste mal vor ein paar Stunden gearbeitet, damit der überschüssige Text gerollt werden kann, das klappt schon mal, trotzdem
werde ich das gefühl nicht los, Du redest von etwas anderem .... Ich mische div floats? ...
Möchte den Link hier nicht Online stellen, wer ihn haben möchte bekommt ihn per PN.
Das Ergebnis kann sich zwar sehen lassen - aber das Problem mit dem "grosser Text 2" ist leider ungelöst.
den FireBug schau ich mir morgen mal an.
Hier mal der neue Code:

HTML-Code:

.neu-l {
    height: 145px;
    width: 145px;
    background-image: url(neu-2.jpg);

}
.neu-r {
    height: 145px;
    width: 145px;
    background-image: url(neu-1.jpg);
}
.text {
    height: 69%;
    width: 77%;
    background-color: #E4E4E4;
    margin:auto;
    padding-left: 15px;
    padding-top: 15px;
    padding-right: 15px;
    padding-bottom: 0px;
    text-align: center;
    position: absolute; top: 16%; left:11%;
    display: inline;
    overflow:scroll;
}
.linkbox {
    height: 20px;
    width: 77%;
    background-color: #E4E4E4;
    margin:auto;
    padding-left: 15px;
    padding-right: 15px;
    padding-bottom: 0px;
    text-align: left;
    position: absolute; bottom: 13%; left: 11%;
    display: inline;
}
.einl {
    color: blue;
    text-align:center;
    margin:auto;
    position: relative; top: 3%
}

.tel {
    color: blue;
    text-align:center;
    margin:auto;
    position: relative;
    bottom: -80%;
}



a {
    color: #008000;
    font-size: smaller;
    text-decoration: underline;
    text-align: left;
    display: inline;
}
table {
    font-size: x-small;
    font-weight: bold;
    text-align: center;
}

HTML-Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">

<head>

<title>Mein Titel</title>

<meta zeugs .../>

<link rel="stylesheet" type="text/css" href="/xyz.css"/>
</head>

<body>

<div class="neu-l" style="position: absolute; top: 0px; left: 0px;"> </div>
<div class="neu-l" style="position: absolute; bottom: 0px; right:0px;"> </div>
<div class="neu-r" style="position: absolute; top: 0px; right: 0px;"> </div>
<div class="neu-r" style="position: absolute; bottom: 0px; left: 0px;"> </div>

<div class="einl">
    <h2>grosser Text 1<br /> grosser Text 1</h2>
</div>

<div class="text">
    <h2 style="color: #FF0000; text-decoration: underline">Unser Service f&uuml;r Sie:</h2>
Info Text
    <br />


<div style="text-align: left; font-weight: bold;"> Wie gehen wir vor?:</div>
<div style="text-align: left; padding-left:35px"> <br />Erklärung ... Text
</div>

</div>

<div class="linkbox">
    <a href="/info/kosten.php" target="_self"> Kosten</a>&nbsp;&nbsp;&nbsp;
    <a href="/info/listeundbedingungen-07-2011.pdf" target="_blank">Gegenstandsliste </a>&nbsp;&nbsp;&nbsp;
    <a href="/info/info.php" target="_self"> zur&uuml;ck</a>&nbsp;&nbsp;&nbsp;
    <a href="/info/impressum.php" target="_self"> Impressum</a>
<!-- im eigenen div rollt der wenigstens nicht mit :-p -->
</div>

<div class="tel" >
    <h2>grosser Text 2<br />grosser Text 1</h2></div>

<?php
kleiner Besucherzähler
}
?>
</body>
</html>

Liebe Grüsse:
Tammy

**Tamara-Jasmin** · 25.07.2011, 10:40

Also FireBug ist gar nicht mal schlecht. Nur hilft es mir bei meinem Problem nicht weiter.

Werde wohl in dem Fall wieder mit Tabellen arbeiten - oder aber:

Gibt es eine Möglichkeit der Browsererkennung, so dass ich bei FF eine Meldung einbringe, dass der Browser nicht gescheit darstellen kann und man bitte den IEx verwenden soll?
Das hier funktioniert leider nicht:

HTML-Code:

<!--[if !IE]>Bitte verwende für eine ordentliche Ansicht den Microsoft Internet-Explorer ab 7.0!<![endif]-->

Liebe Grüsse:
Tammy

**cellarius** · 25.07.2011, 21:31

Zitat von Tamara-Jasmin

Gibt es eine Möglichkeit der Browsererkennung, so dass ich bei FF eine Meldung einbringe, dass der Browser nicht gescheit darstellen kann und man bitte den IEx verwenden soll?
Das hier funktioniert leider nicht:

HTML-Code:

<!--[if !IE]>Bitte verwende für eine ordentliche Ansicht den Microsoft Internet-Explorer ab 7.0!<![endif]-->

Wenn Du Dich vollkommen blamieren willst, dann machst Du das. Du willst doch nicht ernsthaft Deinen Besuchern vorschreiben, welchen Browser sie verwenden sollen - und dann auch noch den IE? Das löst doch bestenfalls Lachsalven aus.

**Tamara-Jasmin** · 26.07.2011, 13:00

Für jemanden der Internetexplorerfeindlich eingestellt ist sicherlich. Ich selber arbeite fast ausschliesslich mit IE - und mir sind Boardmittel immer noch lieber als den PC mit jedem zusätzlichen Programm zuzumüllen. Oder hast Du auch zwei Buchhaltungssysteme
installiert?
Fakt ist wohl, dass die Darstellung für beide Nutzer nicht wirklich einzurichten ist (sonst hätte ja jemand hier mit einem direkten Verbesserungshinweis am Code geantwortet) und ich mich für eine Seite entscheiden muss. Ausserdem ist die Zahl der IE Nutzer immer noch am höchsten! Da der Hinweis leider auch nicht erscheint, lade ich das jetzt einfach so hoch, und die Leute sollen von selber drauf kommen einen anderen Browser zu verwenden. Die inkompatibilität der Programme geht mir sowas von auf den Senkel, das kannst Du Dir gar nicht vorstellen - jeder dreht sein eigenes Ding, anstatt das es mal einen Standard gibt.

Liebe Grüsse: Tammy

**captainslater** · 26.07.2011, 13:07

Der Haken an der Sache: Die anderen Browser halten sich mehr an die Standards, als der Internet Explorer...

**Tamara-Jasmin** · 26.07.2011, 13:39

Ok, auch wenn dem so ist, ich habe nun wirklich alles versucht den "grosser Text 2" mittig und fasst bündig von unten hin zu bekommen. Warum klappt das mit dem Internetexplorer mit Werten wo ich absolut nicht verstehe das es so funktioniert (-80%), und bei den Browsern, die mit dem Standard arbeiten - mit Werten die eigentlich eindeutig so funktionieren sollten - absolut gar nicht?
Das ist eigentlich mein einziges Problem - nur dieser eine Text untenbündig und mittig. Hab mich gestern auch nochmal eingelesen und gelernt, dass <h"x"> Elemente Blockelemente sind und somit auch kein Div brauchen. Dachte dass vielleicht das dann stört. Neee... Griff in die Schüssel ... hat sich nichts geändert.

Liebe Grüsse:
Tammy

**captainslater** · 26.07.2011, 13:43

<h>-Elemente sind Überschriften
Wenn du also h2 verwenden willst, solltest du dafür auch eine Definition in deiner CSS-Datei erstellen:
http://de.selfhtml.org/css/formate/zentrale.htm

**cellarius** · 26.07.2011, 14:11

Zitat von Tamara-Jasmin

Für jemanden der Internetexplorerfeindlich eingestellt ist sicherlich.

Was hat das denn damit zu tun?

Ich selber arbeite fast ausschliesslich mit IE - und mir sind Boardmittel immer noch lieber als den PC mit jedem zusätzlichen Programm zuzumüllen. Oder hast Du auch zwei Buchhaltungssysteme
installiert?

Ach so, Du erstellst Deine Internetseiten nur für Dich selbst und hast sonst keine User. Dann frage ich mich allerdings, wozu Du einen Hinweis brauchst. Oder doch nicht? Und nur mal so als Tipp: Es soll auch Systeme geben, auf denen nicht Windows läuft, und auf denen es folglich auch keinen Internet Explorer gibt. Schwer vorstellbar, ich weiß.

Fakt ist wohl, dass die Darstellung für beide Nutzer nicht wirklich einzurichten ist (sonst hätte ja jemand hier mit einem direkten Verbesserungshinweis am Code geantwortet) und ich mich für eine Seite entscheiden muss.

Man könnte auch vermuten, dass Du es nicht kannst (das weißt Du), und andere keine Lust oder Zeit haben, täglich größere Codefragmente von Dir auseinanderzuklamüsern und Dir einen Privatprogrammierkurs zu geben.

Ausserdem ist die Zahl der IE Nutzer immer noch am höchsten! Da der Hinweis leider auch nicht erscheint, lade ich das jetzt einfach so hoch, und die Leute sollen von selber drauf kommen einen anderen Browser zu verwenden. Die inkompatibilität der Programme geht mir sowas von auf den Senkel, das kannst Du Dir gar nicht vorstellen - jeder dreht sein eigenes Ding, anstatt das es mal einen Standard gibt.

Ausgezeichneter Plan, das. Aber es sind ja nicht meine Nutzer, die da vergrault werden.

**Hoffi** · 27.07.2011, 10:40

Für den IE gibt es auch Tools: http://www.microsoft.com/download/en....aspx?id=18359

Als WebDeveloper gilt eigentlich: Entwickeln im Firefox. Danach anpassen für Chrome, Safari, IE.

Der Weg ist der leichtere.

Und bitte, lerne CSS. Warum hast du display:inline gemacht?
Positionierung mittels % Zahlen ist auch sehr gewagt, vor allem wenn Objekte miteinander harmonieren sollen. Dann kannst du besser ein großes DIV drumrumpacken, und die einzelelemente da rein setzen.

h1 bis h5 sind HEading-Tags. Diese sind auch für das SEO relevant, und sollten auch nur für Überschriften eingesetzt werden. H2 ohne H1 macht kaum Sinn. H1 sollte immer ein Hauptthema sein. Mittlerweile sagt man sogar, das man überall in H1 den Domainnamen schreiben soll.

Ich hab das ganze mal umgebaut.

Wenn du was nicht versteht, frag oder Google.

HTML-Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<title>Mein Titel</title>
<link rel="stylesheet" type="text/css" href="xyz.css"/></head>
<body>
<div class="neu-l top left"> </div><div class="neu-l bottom right"> </div><div class="neu-r top right"> </div><div class="neu-r bottom left"> </div>
<div class="einl">    <h1>grosser Text 1<br /> grosser Text 1</h1></div><div class="clear"></div><div class="content">    <div class="text">        <h2>Unser Service f&uuml;r Sie:</h2>        <div class="info"> Info Text</div>        <div class="question"><strong>Wie gehen wir vor?:</strong></div>        <div class="description">Erkl&auml;rung ... Text</div>        </div>    <div class="clear"></div>    <div class="linkbox">        <a href="/info/kosten.php" target="_self"> Kosten</a>&nbsp;&nbsp;&nbsp;        <a href="/info/listeundbedingungen-07-2011.pdf" target="_blank">Gegenstandsliste </a>&nbsp;&nbsp;&nbsp;        <a href="/info/info.php" target="_self"> zur&uuml;ck</a>&nbsp;&nbsp;&nbsp;        <a href="/info/impressum.php" target="_self"> Impressum</a>    <!-- im eigenen div rollt der wenigstens nicht mit :-p -->    </div></div>
<div class="clear"></div>
<div class="tel">    <h2>grosser Text 2<br />grosser Text 1</h2></div>

</body></html>

HTML-Code:

body {    margin: 0;    padding: 0;}
.neu-l {    height: 145px;    width: 145px;    background-image: url(neu-2.jpg);    position: absolute;
}.neu-r {    height: 145px;    width: 145px;    background-image: url(neu-1.jpg);    position: absolute;}
.top {    top: 0px;}
.bottom {    bottom: 0px;}
.right {     right: 0px;}
.left {    left: 0px;}
.content {    border: 0;    padding: 0;    margin: 0;    height: 69%;    width: 76%;    background-color: #E4E4E4;    text-align: center;    left: 50%;    margin-left: -38%;    position: relative;    top: 10px;}
.text {    padding: 15px 15px 0px 15px;    overflow:auto;    position:relative;    width: 100%;    height: 100%;}
.linkbox {    height: 20px;    background-color: #E4E4E4;    padding-left: 15px;    padding-right: 15px;    padding-bottom: 0px;    text-align: left;    bottom: 39px !important;     bottom: 0;    position:relative;}
.einl {    color: blue;    text-align:center;    margin:auto;    position: relative; top: 3%}
.tel {    color: blue;    text-align:center;    position: relative;}
.clear {    clear: both;}

a {    color: #008000;    font-size: smaller;    text-decoration: underline;    text-align: left;    display: inline;}table {    font-size: x-small;    font-weight: bold;    text-align: center;}h1, h2, h3 {    width: 100%;}
.content h2 {     color: #FF0000; }
.text .question {    text-align: left;}
.text .description {    text-align: left;    padding-left: 35px;    }

**Tamara-Jasmin** · 30.07.2011, 14:06

Lieben Dank! Das klappt echt! Bin noch dabei mir den Code mehrfach durchzulesen - will ihn ja schliesslich auch verstehen. Melde mich dann nochmal. Echt perfekt!

Was mich irritiert: Der IE soll doch nicht sonderlich kompatibel sein - ok.
Aber warum werden dann farblich geänderte Rollbalken nur DORT korrekt angezeigt?
Liebe Grüsse:
Tammy

**Boothby** · 02.08.2011, 12:17

Zitat von Tamara-Jasmin

Was mich irritiert: Der IE soll doch nicht sonderlich kompatibel sein - ok.
Aber warum werden dann farblich geänderte Rollbalken nur DORT korrekt angezeigt?

Genau deswegen. Weil der IE nicht sonderlich W3C kompatibel ist und die Einfärbung der Scrollbalken nicht zum CSS Standard gehört.

siehe auch: http://de.selfhtml.org/css/eigenscha....htm#scrollbar

**Hoffi** · 02.08.2011, 15:52

Weil MS den Scrollbar-Kram eingeführt hat, das ist nicht valides CSS.

Dann besser jQuery Scrollpane benutzen.

**Tamara-Jasmin** · 04.08.2011, 19:02

Ich glaube ich habe jetzt kapiert:

position absolute = immer vom Rand des Browserfensters aus
position relative = orientiert sich immer am letzten Div

jQuery Scrollpane

Wieder ein Fall für Google

Danke erst mal an alle!
Liebe Grüsse:
Tammy

**Hoffi** · 04.08.2011, 22:45

Nicht am letzten Div, sondern am letzten block Element. span und strong z.b. sind inline Elemente.

Lektüre dazu: http://www.webdesign-in.de/mts/unter...-div-und-span/

**Tamara-Jasmin** · 09.08.2011, 15:12

Ich komme derzeit gut voran. Aber eines z.B. verstehe ich einfach gar nicht.
Wie kann es sein, dass

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">

und

<!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">

völlig unterschiedliche Ausgaben veranlasst?

Hier wird einiges erklärt, aber die Technik dahinter verstehe ich nicht. http://www.professorweb.de/html/was-ist-eigentlich-der-doctype.html
Verwende ich z.B. den ersten Eintrag, so fliesst der Hintergrund meiner Infobox in eine andere Seite ein - nicht schön anzusehen.
Funktioniert wunderbar mit dem 2. Eintrag - wie es sein sollte - ABER - ich habe dann z.B. einige Formatierungen nicht mehr - unter
anderem der Rahmen von einem input-suchen-feld - das in der ersten Variante aber wieder perfekt ist.

Für was sollte ich mich denn bei meinen Seiten entscheiden um es RICHTIG zu machen - so das alles CSS funktioniert wie ich mir das vorstelle?

Was mir auffällt - unter der im Link angegeben Adresse ist "mein" XHTML gar nicht so aufgeführt - hatte diesen aber vor Monaten mal von einer
erklärenden Seite genau so rauskopiert, damit sich ja kein Fehler einschleicht durch abschreiben.

Liebe Grüsse:
Tammy