Verdammter 3px-jog

C-rank · #1 (**permalink**) 19.03.2007, 10:48

Hallo Jungs und Mädels,
Ich bekomm ihn nicht weg... hab euch den Quelltext aufs nötigste reduziert. Ich hoffe ihr könnt mir helfen! CSS und HTML sind laut Validatoren valide

Es kann doch nicht sein, dass ich diese Art von Inhaltsdarstellung nicht machen darf... zum. im <=IE6

Alles zum Mäuse melden...

Ach: Für alle Ausprobierfaulen:
Zur Testseite

Und für alle die weder schauen noch den Quelltext lesen möchten:
Das Problem liegt darin, dass meine <h2>, die links vom Text "fließen", die betroffenen <p> um die netten 3px-jog-Pixel verschieben. Ein weiterer <p> dem keine Überschrift vorausgeht, ist dementsprechend weiter links eingerückt als der <p> dem eine Überschrift vorausgeht.
Hoffe es ist einigermaßen verständlich...

Greetings!

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Geschichte</title>
<style type="text/css">
<!--
body
{
  background:         #039;
  padding:            0;
  color:              #444;
  font-size:          81.25%;
  font-family:        Verdana, Helvetica, Arial, sans-serif;
}

p
{
  height:             1%;
  font-size:          75%;
  line-height:        1.3em;
  margin:             0 0 1em 0;
}

#col3
{
  background:         #fff;
  color:              #000;
  font-size:          1.1em;
  margin-left:        170px;
  margin-right:       0;
  padding-right:      225px;
}

#col3_content
{
  margin-left:        1em;
  margin-right:       1em;
}

#col3 a
{
  color:              #38D;
}

#col3 p
{
  margin-left:        10em;
}

#col3 h2.left
{
  margin:             0;
  padding:            0;
  font-size:          0.8em;
  float:              left;
  width:              8.5em;
  font-weight:        bold;
  margin-left:        0;
}

#col3 div.img_left
{
  margin-left:        9.5em;
}


* html #col3 p
{
  height:1%;
  margin-left:110px;
}
-->
</style>

</head>
<body>
   <!-- Content - Start -->
    <div id="col3">
      <a id="content" name="content"></a>
      <div id="col3_content" class="clearfix">
        <h1>Geschichte</h1>
        <h2 class="left">Inhalt</h2>
        <p>
          <a class="inhalt" href="">Ein kleiner Blindtext</a><br>
          <a class="inhalt" href="">Letzter Absatz</a><br>
        </p>
        &nbsp;
        <h2 class="left">Ein kleiner Blindtext</h2>
        <p>Weit hinten, hinter den Wortbergen, fern der Länder Vokalien und Konsonantien
         leben die <a href="http://www.newmediadesigner.de/">Blindtexte</a>.
         Abgeschieden wohnen Sie in Buchstabhausen an der Küste des Semantik, eines großen
         Sprachozeans. Ein kleines Bächlein namens Duden fließt durch ihren Ort und versorgt
         sie mit den nötigen Regelialien.</p>
        <p>
         Es ist ein paradiesmatisches Land, in dem einem gebratene Satzteile in den Mund
         fliegen. Nicht einmal von der allmächtigen Interpunktion werden die Blindtexte
         beherrscht &ndash; ein geradezu unorthographisches Leben. Eines Tages aber beschloß eine
         kleine Zeile Blindtext, ihr Name war <a href="mailto:lorem@ipsum.de">Lorem Ipsum</a>, hinaus zu gehen in die weite
         Grammatik. Der große Oxmox riet ihr davon ab, da es dort wimmele von bösen Kommata,
         wilden <a href="">Fragezeichen</a> und hinterhältigen Semikoli, doch das Blindtextchen ließ sich
         nicht beirren. Es packte seine sieben Versalien, schob sich sein Initial in den
         Gürtel und machte sich auf den Weg.</p>
        <h2 class="left">Letzter Absatz</h2>
        <p>
         Als es die ersten Hügel des Kursivgebirges erklommen hatte, warf es einen letzten
         Blick zurück auf die Skyline seiner Heimatstadt Buchstabhausen, die Headline von
         Alphabetdorf und die Subline seiner eigenen Straße, der Zeilengasse. Wehmütig lief ihm
         eine rhetorische Frage über die Wange, dann setzte es seinen Weg fort.</p>

        &nbsp;
      </div>

      <div id="ie_clearing">&nbsp;</div>
    </div>
   <!-- Content - Ende -->
</body>
</html>

heiko_rs · #2 (**permalink**) 19.03.2007, 19:46

Da gibt's leider keine tollen Lösungen: Entweder den betreffenden p per Klasse einen um 3px reduzierten margin-left zuweisen, oder jeweils ein div um die zusammengehörigen p (und dem div Layout geben), oder die Floats per position: absolute; aus dem Fluß nehmen (nur für IE 5/6).

PS: Erläuterung zu letztgenannter Lösung: Das übergeordnete Element bekommt position: relative; und h2 einen passenden Wert für left (top wird logischerweise nicht definiert).

C-rank · #3 (**permalink**) 20.03.2007, 20:47

Ich hab gehofft du würdest was anderes sagen...

Die Lösung ist mir auch schon in den Sinn gekommen finde sie aber so... *würg*
Aber wozu M$ uns nicht schon alles gezwungen hat

Danke trotzdem

fricca · #4 (**permalink**) 20.03.2007, 20:53

In solchen Fällen verwende ich meist negative margins.
Quickhack:

Code:

* html #col3_content {
    margin-left:10em;
    height:1%;
    }

* html #col3_content h2.left {
    margin-left:-10em;
    position:relative;
    }

* html #col3_content p {
    margin-left:0;
    }

Leider umständlich...

C-rank · #5 (**permalink**) 20.03.2007, 20:57

Nicht umständlicher als ne Extralösung für die Paragraphen ohne vorausgehender Überschrift... tolle Lösung

Dank dir!!!

Schneemann · #6 (**permalink**) 20.03.2007, 23:12

Was bitte ist ein jog?

fricca · #7 (**permalink**) 20.03.2007, 23:39

Ein Schubs.

Und ein sehr bekannter Name des hier diskutierten Bugs.
IE6 Three Pixel Gap / text-jog

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Problem mit einem 3D-Effekt	moep0710	CSS	12	12.06.2010 15:30
CSS für Firefox, IE, Opera Probleme - Browserweiche	talkuvit	CSS	4	31.10.2009 19:07
Problem mit CSS Style	flo007	CSS	3	25.01.2009 18:08
Ich krieg die höhe des contnet-DIV nicht hin	mp3fritz	CSS	3	20.07.2007 11:11
Stylesheet Breite ändern (BlogUrl ist angegeben)	tequilahombre	CSS	6	16.05.2006 09:58