zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Verdammter 3px-jog

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 19.03.2007, 10:48
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 19.03.2007
Beiträge: 10
C-rank befindet sich auf einem aufstrebenden Ast
Standard Verdammter 3px-jog

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>
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 19.03.2007, 19:46
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.856
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

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).

Geändert von heiko_rs (19.03.2007 um 19:55 Uhr)
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 20.03.2007, 20:47
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 19.03.2007
Beiträge: 10
C-rank befindet sich auf einem aufstrebenden Ast
Standard

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
Mit Zitat antworten
  #4 (permalink)  
Alt 20.03.2007, 20:53
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.778
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

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...
Mit Zitat antworten
  #5 (permalink)  
Alt 20.03.2007, 20:57
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 19.03.2007
Beiträge: 10
C-rank befindet sich auf einem aufstrebenden Ast
Standard

Nicht umständlicher als ne Extralösung für die Paragraphen ohne vorausgehender Überschrift... tolle Lösung Dank dir!!!
Mit Zitat antworten
  #6 (permalink)  
Alt 20.03.2007, 23:12
Benutzerbild von Schneemann
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 15.01.2006
Ort: Bochum
Beiträge: 268
Schneemann befindet sich auf einem aufstrebenden Ast
Standard

Was bitte ist ein jog?
__________________
Gruß,
Peter
Mit Zitat antworten
  #7 (permalink)  
Alt 20.03.2007, 23:39
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.778
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Ein Schubs.

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

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ä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


Alle Zeitangaben in WEZ +2. Es ist jetzt 06:14 Uhr.