Fehler im HTML Code, bitte um Hilfe ;)

E

EuropaChat

Erfahrenes Mitglied
Hallo, habe hier einen HTML Code, dort sind noch paar Fehler enthalten z.B. im FF funktioniert es im IE nicht usw. habe es schon mit einem Validator teils bearbeitet. Könnte mir bitte jemand helfen noch die restlichen Bugs zu entfernen, das es so wird wie auf dem Screen.

http://www.europachat.ibitlive.eu/Bild2.jpg

Hier ist der Code:

PHP: 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
  <meta http-equiv="Content-Type"
 content="text/html; charset=utf-8">
  <link type="text/css" rel="stylesheet"
 href="http://europachat.ibitlive.eu/css/main.css">
  <style type="text/css">
#teaser_content_navigation ul { list-style-type: none; padding-left: 10px; margin: 0px; }
#teaser_content_navigation li { display: block; line-height: 15px; font-style: bold; color:#CCC }
  </style>
  </html>
<body>
<div id="teaser_holder">
<div id="teaser_content">
<div id="teaser_content_image"> <img
 style="border: 0px solid ; width: 250px; height: 145px;" alt=""
 src="http://www.europachat.ibitlive.eu/images/www/Bild1.jpg"><br
 style="color: rgb(255, 0, 0);">
<span style="color: rgb(255, 0, 0);">
&gt;&nbsp;Clubnight // 21. August</span> </div>
</div>
</div>
</body>
</html>



Danke Gruß Markus K. :)
 
Das nenn ich mal eine grundsolide mißlungene bis mangelhafte Fehlerbeschreibung :p

Sollen wir jetzt erstmal deinen Code durch alle drei gängigen IE-Versionen (6, 7, 8) jagen, um dahinterzukommen, von welchen "Bugs" du überhaupt in welcher der drei Versionen sprichst?

HTML: 
</style>
  </html> <!-- muß </head> lauten, um den Dokumentkopf zu schliessen, bevor der Dokumentkörper mit <body> beginnt -->
<body>

Außerdem solltest du einen anderen Doctype wählen, denn mit dem aktuellen schalten alle Browser in den "Quirks Mode", was sich gerade und besonders beim IE negativ auswirkt, wie es dir nicht entgangen ist.
 
Zuletzt bearbeitet:
Nachtrag, deine mehrfach genutzte CSS-Eigenschaft position:fixed wird von den IEs erst seit dem IE7 unterstützt.

Dringende Voraussetzung hierfür ist aber, dass das HTML-Dokument den Browsern nicht im "Quirks Mode", sondern mit dem entsprechenden Dokumenttyp im "Standards Mode" übergeben wird, ansonsten verhalten sich IE7 und IE8 in diesem Darstellungsmodi, wie ihr berühmt-berüchtigter Vorgänger IE6, der diese Art der Positionierung nicht zu interpretieren weiß.


Für den ollen IE6 kannst du http://code.google.com/p/ie7-js/ in deiner Seite implementieren, damit es in ihm mit der fixierten Positionierung funktioniert - sofern er bei dir noch eine Berücksichtigung erfährt.
 
Zuletzt bearbeitet:
Danke ;) habe jetzt den Code und den Doctyp bisschen bearbeitet.

Hier so sieht es jetzt aus, sind aber immer noch Bugs drin. :(

PHP: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
       "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <meta http-equiv="Content-Type"
 content="text/html; charset=utf-8">
  <link type="text/css" rel="stylesheet"
 href="http://europachat.ibitlive.eu/css/main.css">
  <style type="text/css">
#teaser_content_navigation ul { list-style-type: none; padding-left: 10px; margin: 0px; }
#teaser_content_navigation li { display: block; line-height: 15px; font-style: bold; color:#CCC }
  </style>
</head>
<body>
<div id="teaser_holder">
<div id="teaser_content">
<div id="teaser_content_image"> <img
 style="border: 0px solid ; width: 250px; height: 145px;" alt=""
 src="http://www.europachat.ibitlive.eu/images/www/Bild1.jpg"><br
 style="color: rgb(255, 0, 0);">
<span style="color: rgb(255, 0, 0);">
&gt;&nbsp;Follow us on Facebook</span> </div>
</div>
</div>
</body>
</html>
 
Ich kann mit meiner (validen) Fassung keinen einzigen Bug ausfindig machen.

HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>...</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link type="text/css" rel="stylesheet" href="http://europachat.ibitlive.eu/css/main.css">
<style type="text/css">
#teaser_content_navigation ul { list-style-type: none; padding-left: 10px; margin: 0px; }
#teaser_content_navigation li { display: block; line-height: 15px; font-style: bold; color:#CCC }
</style>
<!--[if lt IE 7]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE7.js"></script>
<![endif]-->
</head>
<body>
<div id="teaser_holder">
     <div id="teaser_content">
          <div id="teaser_content_image">
               <img style="border: 0px solid ; width: 250px; height: 145px;" alt="" src="http://www.europachat.ibitlive.eu/images/www/Bild1.jpg">
               <br style="color: rgb(255, 0, 0);">
               <span style="color: rgb(255, 0, 0);">&gt;&nbsp;Clubnight // 21. August</span>
          </div>
     </div>
</div>
</body>
</html>

Aber vielleicht weißt / siehst du ja mehr, wie meinereiner.

Und da du weiterhin nicht gewillt bist, diese "Bugs" beim Namen zu nennen, darfst du dir nun einen anderen Spielkameraden suchen gehen, denn für solche Spielereien ist mir meine Freizeit am Wochenende zu kostbar :p

Ciao!
 
Zuletzt bearbeitet:
So so sieht jetzt der Code perfekt aus ohne Bugs :D Endlich :)

Aber so bräuchte ich es wie auf dem Screen zu sehen ist alle 3 nebeneinander. http://www.europachat.ibitlive.eu/Bild2.jpg

Wie kann ich das am besten machen, das in jedem Browser der gleiche Abstand bleibt. :confused:

Hier ist der aktuelle Code:

PHP: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
       "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <meta http-equiv="Content-Type"
 content="text/html; charset=utf-8">
  <link type="text/css" rel="stylesheet"
 href="http://europachat.ibitlive.eu/css/main.css">
  <style type="text/css">
#teaser_content_navigation ul { list-style-type: none; padding-left: 10px; margin: 0px; }
#teaser_content_navigation li { display: block; line-height: 15px; font-style: bold; color:#CCC }
  </style>
  <!--[if lt IE 7]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE7.js"></script>
<![endif]-->
</head>
<body>
<div id="teaser_holder">
<div id="teaser_content">
<div id="teaser_content_image"> <img
 style="border: 0px solid ; width: 250px; height: 145px;" alt=""
 src="http://www.europachat.ibitlive.eu/images/www/Bild1.jpg"><br
 style="color: rgb(255, 0, 0);">
<span style="color: rgb(255, 0, 0);">
&gt;&nbsp;Follow us on Facebook</span> </div>
</div>
</div>
</body>
</html>
 
Wie kommst du zu der Aussage, dass sich da diskrepante Abstände ergeben?

Ich kann sie bei mir nicht erkennen / messen.

HTML: 
<div id="teaser_holder">
     <div class="teaser_content">
          <div class="teaser_content_image">
               <img style="border: 0px solid ; width: 250px; height: 145px;" alt="" src="http://www.europachat.ibitlive.eu/images/www/Bild1.jpg">
               <br style="color: rgb(255, 0, 0);">
               <span style="color: rgb(255, 0, 0);">&gt;&nbsp;Clubnight // 21. August</span>
          </div>
     </div>
     <div class="teaser_content">
          <div class="teaser_content_image">
               <img style="border: 0px solid ; width: 250px; height: 145px;" alt="" src="http://www.europachat.ibitlive.eu/images/www/Bild1.jpg">
               <br style="color: rgb(255, 0, 0);">
               <span style="color: rgb(255, 0, 0);">&gt;&nbsp;Clubnight // 21. August</span>
          </div>
     </div>
     <div class="teaser_content">
          <div class="teaser_content_image">
               <img style="border: 0px solid ; width: 250px; height: 145px;" alt="" src="http://www.europachat.ibitlive.eu/images/www/Bild1.jpg">
               <br style="color: rgb(255, 0, 0);">
               <span style="color: rgb(255, 0, 0);">&gt;&nbsp;Clubnight // 21. August</span>
          </div>
     </div>
</div><!-- ENDE #teaser_holder -->

Die mehrfach gleichnamigen ID-Bezeichner #teaser_content und #teaser_content_image hab ich hier entsprechend in Klassenbezeichner umgewandelt, da nur diese im Dokumentkörper mehrfach vergeben werden dürden. IDs hingegen müsssen eindeutig sein, dürfen also nur einmal im Dokumentbaum genannt werden.
 
Zuletzt bearbeitet:
Cooooooooooool, aber wie mache ich das, das es nebeneinander ist, weil so wie ich es im moment sehe ich es untereinander. :) :confused:


Danke ;)
 
Du mußt dein CSS auch meinem erläuterten Arbeitsschritt im HTML-Code anpassen, und die ID-Bezeichner in Klassenbezeichner umwandeln. Aus #ID-Name wird .Klassenname.
 
Zuletzt bearbeitet:
Jetzt sitz ich komplett auf dem Schlauch :( Was möchtest du dafür, wenn du es mir anpassen könntest?


Hier das ist die main.css:

PHP: 
#teaser_holder { position: fixed; bottom: 10px; width: 1000px; height: 330px; margin-left: -500px; left: 50%;}
#teaser_background { position: fixed; bottom: 10px; width: 1000px; height: 125px; margin-left: -500px; left: 50%; background-color: #333; z-index:110; }
#teaser_content {position: relative; top: 45px; width: 262px; z-index:120; float:left; text-transform: uppercase; font-size: 9px; margin-left: 53px;}
#teaser_content_image {position: relative; padding:6px 6px 14px 6px; background-color: #000; font-size:  11px; }
#teaser_content img { margin-bottom: 4px;   }
#teaser_content_navigation { margin: 6px 2px 0px 6px; font-size: 11px; }
#teaser_content_navigation ul { list-style-type: none; padding-left: 10px; margin: 0px; }
#teaser_content_navigation li { display: block; line-height: 15px; font-style: bold; color:#CCC }
 
Zuletzt bearbeitet:
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück