Ein Bug der eigentlich seit IE7 gefixt sein sollte..

[hassowuff]

Auf meiner Seite wird das letzte Stück eines Textes in einem DIV unterhalb dessen erneut angezeigt. Wie gesagt nur ein paar Buchstaben vom Ende des Textes.. Im Firefox ist alles so wie es sich gehört..

Auch der Hinweis zum damaligen IE6-Bug mit dem "margin: -3px;" löst das Problem nicht wirklich, da ich ihn entweder an der falschen Stellen hinzugefügt habe, oder es einfach nicht daran liegt!

Hier der CSS-Code:

  
* {  
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;  
	font-size: 10pt;  
	font-weight: normal;  
	color: black;  
	text-decoration: none;  
}  
  
div.container {  
	background-color: white;  
	width: 1066px;  
	border: 1px solid black;  
	float: left;  
	position: absolute;  
	left: 50%;  
	margin-left: -533px;  
}  
  
body {  
	background-color: #383944;  
}  
  
  
  
div.head_line_gray {  
	background-color: gray;  
	width: 1066px;  
	height: 20px;  
	float: left;  
}  
  
div.head_line_logo {  
	background-color: white;  
	width: 1066px;  
	height: 110px;  
	border-bottom: 1px solid black;  
	float: left;  
}  
  
div.logo {  
	background-image: url(../img/logo.png);  
	background-repeat: no-repeat;  
	background-position: center;  
	width: 520px;  
	height: 110px;  
	float: left;  
}  
  
div.menue_item {  
	height: 110px;  
	line-height: 110px;  
	float: left;  
}  
  
.menue_item {  
	font-family: "@Arial Unicode MS";  
	font-size: 10pt;  
	font-weight: bold;  
	text-decoration: none;  
	color: gray;		  
}  
  
a.menue_item:hover {  
	color: red;  
	cursor: pointer;  
	text-decoration: underline;  
}  
  
div.menue_item_active {  
	background-image: url(../img/arrow.png);  
	background-position: left;  
	background-repeat: no-repeat;  
	padding-left: 20px;  
	height: 110px;  
	line-height: 110px;  
	padding-left: 20px;  
	float: left;  
}  
  
.menue_item_active {  
	font-family: "@Arial Unicode MS";  
	font-size: 10pt;  
	font-weight: bold;  
	text-decoration: underline;  
	color: #0066bc;	  
}  
  
a.menue_item_active:hover {  
	color: green;  
	cursor: pointer;  
}  
  
div.menue_cutline {  
	background-image: url(../img/cutline.png);  
	background-position: center;  
	background-repeat: no-repeat;  
	width: 20px;  
	height: 110px;  
	float: left;  
}  
  
div.head_line_flash {  
	width: 1066px;  
	height: 278px;  
	float: left;  
	border-bottom: 1px solid black;  
}  
  
div.flash_left {  
	background-image: url(../img/flash_left.png);  
	width: 150px;  
	height: 278px;  
	float: left;  
}  
  
div.flash_main {  
	background-color: white;  
	width: 766px;  
	height: 278px;  
	float: left;  
}  
  
div.flash_right {  
	background-image: url(../img/flash_right.png);  
	width: 150px;  
	height: 278px;  
	float: left;  
}  
  
div.head_line_tasks {  
	background-color: white;  
	border-bottom: 1px solid black;  
	width: 1066px;  
	float: left;  
	display: none;  
}  
  
div.task:hover {  
	border: 2px dotted red;  
	margin: 1px;  
	cursor: pointer;  
}  
  
div.task {  
	background-position: top;  
	background-repeat: no-repeat;  
	padding-top: 55px;  
	text-align: center;  
	font-family: "@Arial Unicode MS";  
	font-size: 10pt;  
	color: black;  
	margin: 2px;  
	width: 146px;  
	border: 1px dotted gray;  
	float: left;  
}  
  
div.task_write {  
	background-image: url(../img/task_write.png);  
}  
  
div.task_search {  
	background-image: url(../img/task_search.png);  
}  
  
div.task_market {  
	background-image: url(../img/task_market.png);  
}  
  
div.task_book {  
	background-image: url(../img/task_book.png);  
}  
  
div.task_user {  
	background-image: url(../img/task_user.png);  
}  
  
div.task_calendar {  
	background-image: url(../img/task_calendar.png);  
}  
  
div.task_contacts {  
	background-image: url(../img/task_contacts.png);  
}  
  
div.main {  
	width: 1066px;  
	float: left;  
	border-bottom: 1px solid black;  
}  
  
div.content {  
	padding: 5px;  
	text-align: justify;  
	float: left;  
}  
  
div.footer {  
	width: 1066px;  
	background-color: silver;  
	float: left;  
}  
  
div.footer_line_shaddow {  
	background-color: gray;  
	width: 1066px;  
	height: 10px;  
	float: left;  
}  
  
div.footer_line_copyright {  
	background-color: silver;  
	padding: 5px;  
	height: 30px;  
	line-height: 30px;  
	float: left;  
}  
  
.copyright {  
	font-size: 8pt;  
	color: gray;	  
}  
  
a.copyright {  
	text-decoration: underline;  
}  
  
a.copyright:hover {  
	color: red;  
}  

Und hier der HTML-Code dazu:

  
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
<html>  
  
  <head>  
  
    <meta http-equiv="content-type" content="text/html; charset=windows-1250">  
    <meta name="generator" content="XYZ">  
    <link rel="stylesheet" type="text/css" href="css/style.css">  
    <title>XYZ - Das OnlinePortal</title>  
  
  </head>  
  
  <body>  
  
    <div class="container">  
  
      <div class="head_line_gray"></div>  
  
      <div class="head_line_logo">  
        <div class="logo"></div>  
        <div class="menue_item_active">  
          <a class="menue_item_active" href="index.php?p=startseite">HOME</a>  
        </div>  
        <div class="menue_cutline"></div>  
        <div class="menue_item">  
          <a class="menue_item" href="index.php?p=faq">FAQ</a>  
        </div>  
        <div class="menue_cutline"></div>  
        <div class="menue_item">  
          <a class="menue_item" href="index.php?p=kontakt">KONTAKT</a>  
        </div>  
        <div class="menue_cutline"></div>  
        <div class="menue_item">  
          <a class="menue_item" href="index.php?p=anmelden">ANMELDEN</a>  
        </div>  
        <div class="menue_cutline"></div>  
        <div class="menue_item">  
          <a class="menue_item" href="index.php?p=login">LOGIN</a>  
        </div>  
      </div>  
  
      <div class="head_line_flash">  
        <div class="flash_left"></div>  
        <div class="flash_main">  
          <object type="application/x-shockwave-flash"  
            data="swf/loader.swf?path=swf/banner.swf"  
            width="766" height="278">  
            <param name="movie" value="swf/loader.swf?path=swf/banner.swf">  
          </object>  
        </div>  
        <div class="flash_right"></div>  
      </div>  
  
      <div class="head_line_tasks">  
        <div class="task task_write">Text Schreiben</div>  
        <div class="task task_search">Auftrag erstellen</div>  
        <div class="task task_market">Marktplatz</div>  
        <div class="task task_book">Bücher & Kurzgeschichten</div>  
        <div class="task task_user">Arbeitsplatz & Profil</div>  
        <div class="task task_calendar">Kalender & Termine</div>  
        <div class="task task_contacts">Kontakte & Nachrichten</div>  
      </div>  
  
      <div class="main">  
        <div class="content">  
          Hier könnte der irgendwas stehen.. Aber wer weiß, was da noch schönes hinein kommt!  
        </div>  
      </div>  
  
      <div class="footer">  
        <div class="footer_line_shaddow"></div>  
        <div class="footer_line_copyright copyright">  
          Copyright &copy;2009 by XYZ,  
          <a class="copyright" href="http://www.xyz.tld">www.xyz.tld</a>  
          Alle Rechte vorbehalten.  
          <a class="copyright" href="index.php?p=impressum">Impressum</a>  
          |  
          <a class="copyright" href="index.php?p=agb">AGB</a>  
        </div>  
      </div>  
  
    </div>  
  
  </body>  
</html>  

Leider kann ich die Seite hier nirgends verlinken, da Sie auf einem lokalen Server liegt und auch noch nicht öffentlicht zugänglich sein soll..

Danke und Gruß, Hassowuff

[ChrisB]

Hi,

Auf meiner Seite wird das letzte Stück eines Textes in einem DIV unterhalb dessen erneut angezeigt. Wie gesagt nur ein paar Buchstaben vom Ende des Textes.. Im Firefox ist alles so wie es sich gehört..

Auch der Hinweis zum damaligen IE6-Bug mit dem "margin: -3px;" löst das Problem nicht wirklich, da ich ihn entweder an der falschen Stellen hinzugefügt habe, oder es einfach nicht daran liegt!

Ob's die falsche Stelle ist, wirst du ja rausfinden können.
http://positioniseverything.net/explorer/dup-characters.html
Der Artikel nennt noch weitere Möglichkeiten.

MfG ChrisB

[hassowuff]

Ob's die falsche Stelle ist, wirst du ja rausfinden können.

Ich hab es an diversen Stellen probiert und nirgends hat es einen Erfolg gebracht.

http://positioniseverything.net/explorer/dup-characters.html
Der Artikel nennt noch weitere Möglichkeiten.

Leider ist mein Englisch nicht das beste, daher kann ich dem Artikel auch nach dem 5. mal lesen nicht neues entnehmen..

Kannst du mir nicht vielleicht die Stelle zeigen, an der das Problem auch im IE8 auftritt?

[hassowuff]

Ob's die falsche Stelle ist, wirst du ja rausfinden können.

Ich hab es an diversen Stellen probiert und nirgends hat es einen Erfolg gebracht.

http://positioniseverything.net/explorer/dup-characters.html
Der Artikel nennt noch weitere Möglichkeiten.

Leider ist mein Englisch nicht das beste, daher kann ich dem Artikel auch nach dem 5. mal lesen nicht neues entnehmen..

Kannst du mir nicht vielleicht die Stelle zeigen, an der das Problem auch im IE8 auftritt?

Okay, hab das Problem selbst lösen können:

  
div.main {  
	width: 1066px;  
	float: clear;  
	border-bottom: 1px solid black;  
}  

das "float: clear" anstelle von "float: left" hat's gelöst, doch frage ich mich, was das "clear" für den Browser bedeutet und wie es zu diesem Problem kommen konnte?

[Gunnar Bittersmann]

@@hassowuff:

nuqneH

das "float: clear" anstelle von "float: left" hat's gelöst, doch frage ich mich, was das "clear" für den Browser bedeutet

Dass er die Deklaration ignoriert, weil "clear" kein gültiger Wert für die 'float'-Eigenschfat ist. [CSS2 §9.5.1] Du kannst die Zeile auch ganz weglassen. Lies: du solltest, da es sonst ein CSS-Fehler ist.

BTW, den CSS-Validator kennst du?

und wie es zu diesem Problem kommen konnte?

'float' macht desöfteren Probleme. 'float' ist nicht unbedingt angebracht, wenn man gar nicht floaten (umfließen) lassen will, sondern Boxen nebeneinander plazieren. Dafür gibt es eine Alternative.

Qapla'

[Rouven]

Hello,

Dafür gibt es eine Alternative.

Dein Webserver mag meinen Firefox 3.0.11 nicht - mein IE8 hat keine Probleme...Oder sollte ich sagen: mein Firefox spricht ungern Deutsch und dein Server redet ungerne Englisch?

GET /articles/inline-block/ HTTP/1.1
Host: bittersmann.de
User-Agent: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-GB; rv:1.9.0.11) Gecko/2009060215 Firefox/3.0.11 (.NET CLR 3.5.30729)
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: en-gb,en;q=0.5
Accept-Encoding: gzip,deflate
Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7
Keep-Alive: 300
Connection: keep-alive
Cache-Control: max-age=0

HTTP/1.x 406 Not Acceptable
Date: Sun, 19 Jul 2009 20:24:07 GMT
Server: Apache
Alternates: {"article.de.html" 1 {type text/html} {language de} {length 9189}}
Vary: negotiate
TCN: list
Content-Length: 389
Keep-Alive: timeout=1, max=100
Connection: Keep-Alive
Content-Type: text/html; charset=iso-8859-1

MfG
Rouven

[Gunnar Bittersmann]

@@Rouven:

nuqneH

Oder sollte ich sagen: mein Firefox spricht ungern Deutsch […]
Accept-Language: en-gb,en;q=0.5

Eher: spricht kein Deutsch.

Ich hab schon ’nen Knoten im Taschentuch, dass ich das Problem mit meinem Server habe, dass er, wenn keine Sprache matcht, kein Dokument ausliefert. Sollte er aber, Defaultsprache ist angegeben. Ich muss wohl bei all-incl.com mal nachfragen, was da los ist.

Danke für die Erinnerung.

Qapla'

[hassowuff]

Dass er die Deklaration ignoriert, weil "clear" kein gültiger Wert für die 'float'-Eigenschfat ist.

Ja das erscheint mir logisch..

BTW, den CSS-Validator kennst du?

Ja klar!
Mozilla hat's mir auch in der Fehlerkonsole gemeldet.

'float' macht desöfteren Probleme. 'float' ist nicht unbedingt angebracht, wenn man gar nicht floaten (umfließen) lassen will, sondern Boxen nebeneinander plazieren. Dafür gibt es eine Alternative.

Das ist interessant.. Ich muss mich unbdingt mal damit beschäftigen, wie ich das auf meine Designs anwenden kann.. Aber naja, ich müsste mich überhaupt mal mehr mit CSS beschäftigen.

Danke!!!

[Cheatah]

Hi,

Kannst du mir nicht vielleicht die Stelle zeigen, an der das Problem auch im IE8 auftritt?

gerne: An der Stelle, die besagt, dass das Problem im IE6 auftritt. Wie ein solcher verhält sich nämlich der IE8 im Quirks-Mode.

Cheatah