Strohhalm

Sprung zu Navigation. Sprung zu Privat. Sprung zu Linktipps. Sprung zu StyleSwitcher. Sprung zum Inhalt.

 

Sprung zu Navigation. Sprung zu Privat. Sprung zu Linktipps. Sprung zu StyleSwitcher. Sprung zum Inhalt.

Privat

 

Anmelde-Formular



Als Strohhalm-Mitglied registrieren.

 

Sprung zu Navigation. Sprung zu Privat. Sprung zu Linktipps. Sprung zu StyleSwitcher. Sprung zum Inhalt.

Linktipps

 

passende Links in der aktuellen Rubrik

CSS-Hilfe.19.04.2005, 10:29
Unter CSSHilfe bietet Manuela Hoffmann in Weblogform die neusten Links, Tricksereien und Spinnereien…
Xhtml / CSS Einführung.15.04.2005, 18:02
Michael Jendryschik bietet einen sehr umfangreichen und doch recht leicht verständlichen Einstieg in…
css-discuss.19.04.2005, 10:27
css-discuss ist ein Wiki zu allen Fragen und Unfragen mit denen sich der moderne Webdesigner von…
XHTML Character Entity Reference.09.11.2005, 22:11
Eine wunderbare Übersicht der XHTML Character Entities…
SELFHTML - html /css/js.15.04.2005, 18:34
Die Kult Referenz wenn es um Fragen zu HTML / CSS / JavaScript geht.…

Insgesamt sind 17 Links in dieser Kategorie

 

Sprung zu Navigation. Sprung zu Privat. Sprung zu Linktipps. Sprung zu StyleSwitcher. Sprung zum Inhalt.

Sprung zu Navigation. Sprung zu Privat. Sprung zu Linktipps. Sprung zu StyleSwitcher. Sprung zum Inhalt.

Forum

 

strohhalm.org / Forum / Forenübersicht / (X)HTML + CSS / Nachricht 2626 lesen

Problem mit IE 6 und position

  1. Problem mit IE 6 und position

    Struppi.+0 -0.17. August 2009, 09:19

    Hallo zusammen,

    ich kämpfe jetzt schon längere Zeit mit meinem Problem und finde einfach keine Lösung.
    Kurz zu meinem Problem: der IE 6 zeigt mir zwei Element (divs: author und date) nicht an der richtigen Stelle an. Andere (aktuelle) Browser (FF 3.5, Opera 9.6, Safari 4) zeigen's mir aber an wie gewünscht.
    Die Seite in HTML:

    <?xml version="1.0" encoding="utf-8"?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <!-- <!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>
    <link rel="stylesheet" type="text/css" href="test2.css" />
    </head>
    <body>
    <div id="story">
    <div id="story_category">
    Kategorie
    </div>
    <div id="story_content">
    Lorem ipsum dolor sit amet, consectetuer sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.<br>
    </div>
    <div id="story_author">
    <span>verfasst von: </span>Autor<br>
    </div>
    <div id="story_date">
    <span>verfasst am: </span>Datum<br>
    </div>
    <div id="story_headline">
    &Uuml;berschrift
    </div>
    </div>
    </body>
    </html>

    und hier das zugehörige css:

    body {font-family:Verdana,Arial,Sans-serif; text-align:left; font-size:14px; color:black;}
    #story { margin:0 0 12px 0; padding:10px 10px 70px 10px; border:1px solid lightblue; font-size:12px; position:relative;}
    #story_category{padding:3px 0 5px 5px; background-color:lightblue; text-align:left;}
    #story_author{text-align:left; display:inline; position:absolute; left: 10px; bottom:10px;}
    #story_date{text-align:right; display:inline; position:absolute; right: 10px; bottom:10px;}
    #story_headline{text-align:left; display:inline; position:absolute; left: 10px; top:40px;}
    #story_content{text-align:justify; display:inline; position:relative; top:40px;}

    Das Einzigste an Lösung, was mir eingefallen ist, ist per Browserweiche beim IE 6 diese beiden Felder durch display:none komplett auszublenden.

    Aber vielleicht hat von Euch einer eine Idee oder schreibt mir woran es happert.

    Danke

    Antworten [/forum/index.php?topic=2626&strukturid=2626&action=newEntry]

  2. Re: Problem mit IE 6 und position

    wahsaga.+0 -0.17. August 2009, 11:00

    Sieht nach meinem Test auch im IE 6 korrekt aus - sobald du ihn aus dem Quirks Mode holst.

    Antworten [/forum/index.php?topic=2626&strukturid=2626&action=newEntry]

  3. Re: Problem mit IE 6 und position

    Struppi.+0 -0.25. August 2009, 08:48

    Danke wahsaga,

    Dein Tipp hat mir ein ganz klein bisschen weitergeholfen.

    Ich habe diverse Einstellungen probiert:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "externer Linkhttp://www.w3.org/…/xhtml11.dtd">

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "externer Linkhttp://www.w3.org/…/xhtml1-strict.dtd">

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "externer Linkhttp://www.w3.org/…/strict.dtd">

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "externer Linkhttp://www.w3.org/…/xhtml1-transitional.dtd">

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "externer Linkhttp://www.w3.org/…/loose.dtd">

    Das schaut auch gut aus solange ich nur eine Box (<div id="story">) im HTML-Code habe. Wenn weitere hinzukommen wandern die Inhalte von <div id="story_author"> und <div id="story_date"> von der ersten Box in die letzte hinein und alle anderen verschwinden irgendwo.
    Erlaubt mir, dass ich den HTML-Code dazu spar, da jeder durch Copy&Paste ihn selbst schnell erzeugen kann.

    vielen Dank

    Antworten [/forum/index.php?topic=2626&strukturid=2626&action=newEntry]

  4. Re: Problem mit IE 6 und position

    eraetz.+0 -0.25. August 2009, 13:37

    Ich bin mir nicht sicher warum du unbedingt mit Positionen arbeiten möchtest. Dein Code enthält sehr viele DIV-Tags anstatt dessen kannst du aber auch auf ganz normale Tags zurückgreifen die für deinen Zweck ebensogut geeignet sind.

    So würd ich es umsetzen:

    HTML

    <?xml version="1.0" encoding="utf-8"?>
    <!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">
    <head>
    <link rel="stylesheet" type="text/css" href="test2.css" />
    </head>
    <body>
    <dl>
    <dt>Kategorie</dt>
    <dd class="content">
    <h2>&Uuml;berschrift</h2>
    <p>Lorem ipsum dolor sit amet, consectetuer sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
    <p>Lorem ipsum dolor sit amet, consectetuer sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
    </dd>
    <dd class="footer">
    <p class="datum">verfasst am: Datum</p>
    <p>verfasst von: <a href="#">Autor</a></p>
    </dd>
    </dl>
    </body>
    </html>

    CSS

    * {
    margin:0;
    padding:0;
    }

    body {
    font:62.5% verdana,arial,sans-serif;
    padding:2em;
    }

    dl {
    margin-bottom:1em;
    padding:1em;
    border:0.2em solid lightblue;
    }

    dt {
    background-color:lightblue;
    padding:0.4em 0.5em;
    margin-bottom:0.5em;
    color:#fff;
    font-size:1.2em;
    line-height:140%;
    font-weight:bold;
    }

    dd.content {
    padding:0.5em;
    }

    dd.content h2 {
    font-size:1.6em;
    line-height:140%;
    margin-bottom:0.4em;
    }

    dd.content p {
    font-size:1.2em;
    line-height:140%;
    margin-bottom:1.2em;
    }

    dd.footer {
    background-color:lightblue;
    padding:0.4em 0.5em;
    color:#fff;
    }

    dd.footer p {
    font-size:1.2em;
    line-height:140%;
    }

    dd.footer p.datum {
    float:right;
    }

    Antworten [/forum/index.php?topic=2626&strukturid=2626&action=newEntry]

 
Nach oben springen

.(c) 2002 - 2019 strohhalm.org Community.Server powered by Manitu.Software powered by Mathias Bank
.Impressum + Team.Datenschutz