• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

DIV-Probleme in XHTML

I

Iltis

Lounge-Member
Hallo zusammen,

ich baue meine erste XHTML-Seite und schon habe ich ein erstes Problem.

Wenn ich folgenden Code mit dem Doctype von HTML 4.01 im Browser öffne funktioniert alles wunderbar.

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<head>
<title>Titel</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head

<body>

<div id="img_left_layer" style="position:absolute; left:0; top:0; width:96; height:600; z-index:1; visibility: visible"> 
  <img src="img/img_left.jpg" name="img_left" width="96" height="600" border="0" id="img_left" />
</div>
<div id="top_blue" style="position:absolute; left:100; top:0; width:96; height:600; z-index:2; visibility: visible">
  blablablablablablablablablabla
</div>

</body>
</html>

Wenn ich aber den XHTML-Doctype verwende, dann wird der zweite div-Layer nur im IE6 und NN4.75 richtig dargestellt. Bei den anderen wird die position-left ignoriert und der Layer wird immer etwa 0.5 cm vom linken Rand eingefügt, egal für welchen Wert. (ausser für 0 stimmts)

Code: 
<?xml version="1.0" encoding="UTF-8"?>
<!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">
<head>
<title>Titel</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>

<body>

<div id="img_left_layer" style="position:absolute; left:0; top:0; width:96; height:600; z-index:1; visibility: visible"> 
  <img src="img/img_left.jpg" name="img_left" width="96" height="600" border="0" id="img_left" alt="" />
</div>
<div id="top_blue" style="position:absolute; left:96; top:0; width:96; height:600; z-index:2; visibility: visible">
  blablablablablablablablablabla
</div>

</body>
</html>

Auch der XHTML-Validator hat keine Fehler gefunden. Ich hoffe jemand von euch hat einen guten Ratschlag für mich.

Danke im voraus.
 
Habe gemerkt, dass die Positionsbestimmung (ausser 0) auch beim ersten Layer nicht funktioniert. Ich nehme also mal an, dass das style-Attribut in XHTML anders verwendet wird und werde mich mal auf die Suche machen.
 
du solltest immer die einheit mit angeben also beispielsweise 0px,
ausserdem kann der IE nicht richtig CSS => siehe Box-Model-Bug
je nach doc-type schaltet er auch in den Quirks-Mode...
 
die fehlende Einheit ist das Problem.

Mit diesem DOCTYPE:
Code: 
<?xml version="1.0" encoding="UTF-8"?>
<!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">

switchen alle browser in den Standard Mode, nur der IE nicht, da ihn diese xml Deklaration irritiert (NC 4.x kennt das überhaupt nicht)
 
Ich habe noch ein weiteres Problem:

Ich habe folgenden Div-Layer:

<div id="top" style="position:absolute; left:94px; top:0px; width:100%; height:84px; z-index:2;visibility: visible; background-color:#B8D4E3">
 
</div>

Das Problem daran ist: width:100%. Ich möchte ja eigentlich, dass der Layer am rechten Browserrand aufhört. Aber weil ich left:94px habe, geht der Layer 94px über den rechten Rand hinaus, so dass ein Scrollbalken entsteht.

Wie kann ich dieses Problem lösen?

Danke für die Antwort.
 
Das ist ein altbekanntes Problem.
Aber das ist das Problem mit gemischten Werten (absolute und relative).
Das Beste wäre es, Dein Layout auf %-Angaben zu stellen.
Sprich: left:9%; width:91%;
 
Dann probiere mal nicht 100%, sondern 90% oder 85%.
Ist zwar nicht schick, aber der Zweck heiligt die Mittel.

Nachtrag:
Vielleicht bringt es was, wenn Du das topdiv ohne left machst und stattdessen ein div mit 94px davor setzt.
 
Zuletzt bearbeitet:
Hallo zusammen,

ich bin mit der Website etwas weiter und bin noch auf neue Probleme gestossen.

Im Internet Explorer werden alle Menupunkte 2px tiefer angezeigt, als bei allen anderen Browsern. Sonst stimmt aber alles überein. Weiss jemand wieso?
Ihr könnt euch die Site hier anschauen.

THX

P.S.: Falls noch jemandem einen Lösungsvorschlag zu meinem vorherigen Problem einfällt (blauer Balken oben), dann wäre ich froh. (Habe jetzt mal die Site übergangsmässig oder auch definitiv für eine Auflösung von 1024x760 optimiert)
 
Leider auch nicht.
Ich habe schon vieles versucht, denn sonst stimmt ja alles überein, der violette Balken, ... und die DIVs sind ja alle gleich aufgebaut.
 
Code: 
<div id="balken_violett_layer" style="position:absolute; left:94px; top:47px; width:836px; height:27px; z-index:4;visibility: visible; [B]padding:0px;[/B]">
Das hast Du sicher auch schon probiert ?
 
Funktioniert leider auch nicht. Habe es auch bei allen Menupunkten versucht, der violette Balken stimmt ja.
 
Ich werde noch etwas CSS recherchieren, um eine passende Anweisung zu finden.

Sonst bleibt mir als absolute Notlösung nur noch per PHP abzufragen, ob es sich beim Browser um den IE handelt und dann 2 verschieden positionierte Menus zu haben. Was ich aber ziemlich doof finden würde.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben