1. Diese Seite verwendet Cookies. Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies. Weitere Informationen

Codeschnipsel -> IE - Darstellungs-"Fehler"

Dieses Thema im Forum "CSS" wurde erstellt von Rexo, 20. März 2006.

Status des Themas:
Es sind keine weiteren Antworten möglich.
  1. Rexo

    Rexo Mitglied

    Hallo zusammen,

    ich habe ein Darstellungsproblem mit dem IE. Firefox stellt es "erwartungsgemäß" dar.
    Das Problem stellt sich beim dem rechts-gefloateten Formular. Es sollte direkt unter dem Preis stehen.
    Der IE verschiebt es imho recht willkürlich in den Raum hinein. :(

    Hab unten den Code mal gepostet (alles Unnötige: Kopf, Footer, Grafiken, Navigation) hab ich aus der Datei entfernt.

    Es handelt sich somit nur noch um das Problemkind ;)

    HTML:
    1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    2.  
    3.     <title></title>
    4. <style type="text/css" media="screen">
    5.     * {
    6.             margin: 0;
    7.             padding: 0;
    8.         }
    9.         body {
    10.            font-family: Arial, Helvetica, sans-serif;
    11.             font-size: 11px;
    12.         }
    13.        
    14.  
    15. /* =content
    16.     =================================================
    17.         =========================================== */
    18.  
    19.         #content {
    20.         margin-left: 201px;
    21.         padding-top: 30px; /* EDIT */
    22.         padding-left: 30px; /* EDIT */
    23.         }
    24.        
    25.  
    26.  
    27.  
    28. /* Produkt */
    29.  
    30.     #produkt {
    31.         background-color:  #F3FBF0; /* EDIT */ 
    32.         margin: 0 80px 20px 15px;      
    33.         padding: 20px 30px 0 20px;
    34.         border-bottom: 2px solid #DDEAA5;
    35.     }
    36.    
    37.     #produkt_abschluss {
    38.             clear: left;
    39.     }
    40.         #produkt img {
    41.             clear: left;
    42.             float: left;
    43.             border: 1px solid #C0CC8B;
    44.             margin: 0 20px 20px 0;
    45.         }
    46.        
    47.  
    48.         #produkt h2{
    49.             float: left;
    50.             color: #2f4e94;
    51.             font-size: 14px;
    52.             font-weight: bold;
    53.             }
    54.         #produkt em {
    55.             display: block;
    56.             float: right;
    57.             font-style: normal;
    58.             color: #2f4e94;
    59.             font-size: 14px;
    60.             font-weight: bold;
    61.         }
    62.        
    63.         #produkt form {
    64.             clear: right;
    65.             float: right;
    66.         }
    67.        
    68.         #beschreibung {
    69.         margin-left: 140px;    
    70.         padding: 0 80px 20px 0;
    71.         }
    72.  
    73.         #produkt ul {
    74.         padding-left: 158px;
    75.         list-style: square;
    76.  
    77.         }
    78.  
    79. </head>
    80.  
    81.  
    82.     <!-- content-->
    83.     <div id="content">
    84.  
    85.    
    86.    
    87.         <div id="produkt">
    88.             <img src="http://www.google.de/intl/de_de/images/logo.gif" height="120" width="120" alt="Test"  title="Test" />
    89.                 <h2>&Uuml;berschrift -> h2</h2>
    90.                 <!-- rechts -->
    91.                 <em>Preis &euro;</em>
    92.                 <form action="" method='post'><input type='text' id="sub_zahl" name='zahl' value='1' size="1"><input type='submit' id="sub_send" value="OK">
    93.                 </form><br />
    94.                 <br />
    95.                 Evtl. ein kleiner Text<br />
    96.                 <br />
    97.                 <ul>
    98.                     <li>Punkt 1</li>
    99.                     <li>Punkt 2</li>
    100.                     <li>Punkt 3</li>
    101.                 </ul>
    102.                 <br />
    103.                     <div id="produkt_abschluss"></div>
    104.         </div>
    105.  
    106.         <div id="produkt">
    107.             <img src="http://www.google.de/intl/de_de/images/logo.gif" height="120" width="120" alt="Test"  title="Test" />
    108.                 <h2>&Uuml;berschrift -> h2</h2>
    109.                 <!-- rechts -->
    110.                 <em>Preis &euro;</em>
    111.                 <form action="" method='post'><input type='text' id="sub_zahl" name='zahl' value='1' size="1"><input type='submit' id="sub_send" value="OK">
    112.                 </form><br />
    113.                 <br />
    114.                 Evtl. ein kleiner Text<br />
    115.                 <br />
    116.                 <ul>
    117.                     <li>Punkt 1</li>
    118.                     <li>Punkt 2</li>
    119.                     <li>Punkt 3</li>
    120.                 </ul>
    121.                 <br />
    122.                     <div id="produkt_abschluss"></div>
    123.         </div>
    124.        
    125.     </div> 
    126. </body>
    127. </html>
    Grüsse,
    Rexo
     
  2. Maik

    Maik Gast

    Vorsicht: eine ID, wie z.B. #produkt, darf in einem Dokument nur einmal vergeben werden (!)

    Im folgenden Lösungsvorschlag habe ich mal alle IDs (außer #content) in CSS-Klassen umgewandelt, denn die dürfen in einer Seite praktisch unendlich vorkommen ;)

    Das Beispiel basiert auf den zwei floatenden Spalten .leftCol und rightCol, in denen die jeweiligen Elemente eingebettet sind:
    • Browsercheck: FF 1.5, IE 6.0, MOZ 1.7, NN 7.0, OP 8.50 | Win2000
    Code (HTML5):
    1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    2.  
    3.         <title></title>
    4. <style type="text/css" media="screen">
    5.         * {
    6.                         margin: 0;
    7.                         padding: 0;
    8.                 }
    9.                 body {
    10.                    font-family: Arial, Helvetica, sans-serif;
    11.                         font-size: 11px;
    12.                 }
    13.  
    14.  
    15. /* =content
    16.         =================================================
    17.                 =========================================== */
    18.  
    19.                 #content {
    20.                 margin-left: 201px;
    21.                 padding-top: 30px; /* EDIT */
    22.                 padding-left: 30px; /* EDIT */
    23.                 }
    24.  
    25.  
    26.  
    27.  
    28. /* Produkt */
    29.  
    30.         .produkt {
    31.                 background-color:  #F3FBF0; /* EDIT */
    32.                 margin: 0 80px 20px 15px;
    33.                 padding: 20px 30px 0 20px;
    34.                 border-bottom: 2px solid #DDEAA5;
    35.         }
    36.  
    37.         .produkt div.leftCol {
    38.                 float:left;
    39.                 }
    40.  
    41.         .produkt div.rightCol {
    42.                 float:right;
    43.                 text-align: right;
    44.                 }
    45.  
    46.         .produkt_abschluss {
    47.                         clear: both;
    48.         }
    49.         .produkt img {
    50.                         clear: left;
    51.                         float: left;
    52.                         border: 1px solid #C0CC8B;
    53.                         margin: 0 20px 20px 0;
    54.                 }
    55.  
    56.         .produkt h2 {
    57.                         color: #2f4e94;
    58.                         font-size: 14px;
    59.                         font-weight: bold;
    60.                  }
    61.  
    62.         .produkt em {
    63.                         display: block;
    64.                         font-style: normal;
    65.                         color: #2f4e94;
    66.                         font-size: 14px;
    67.                         font-weight: bold;
    68.                 }
    69.  
    70.         .beschreibung {
    71.                 margin-left: 140px;
    72.                 padding: 0 80px 20px 0;
    73.                 }
    74.  
    75.         .produkt ul {
    76.                 padding-left: 158px;
    77.                 list-style: square;
    78.                 }
    79. </head>
    80.  
    81.  
    82.         <!-- content-->
    83.         <div id="content">
    84.  
    85.                 <div class="produkt">
    86.                 <!-- leftCol -->
    87.                 <div class="leftCol">
    88.                      <img src="http://www.google.de/intl/de_de/images/logo.gif" height="120" width="120" alt="Test"  title="Test" />
    89.                                 <h2>Überschrift -> h2</h2>
    90.                                 <br />
    91.                                 Evtl. ein kleiner Text<br />
    92.                                 <br />
    93.                                 <ul>
    94.                                         <li>Punkt 1</li>
    95.                                         <li>Punkt 2</li>
    96.                                         <li>Punkt 3</li>
    97.                                 </ul>
    98.                                 <br />
    99.                 </div><!-- end leftCol -->
    100.  
    101.                 <!-- rightCol -->
    102.                 <div class="rightCol">
    103.                           <em>Preis &euro;</em>
    104.                           <form action="" method='post'><input type='text' id="sub_zahl" name='zahl' value='1' size="1"><input type='submit' id="sub_send" value="OK">
    105.                           </form>
    106.                 </div><!-- end rightCol -->
    107.  
    108.                 <div class="produkt_abschluss"></div>
    109.  
    110.                 </div><!-- end produkt -->
    111.  
    112.                 <div class="produkt">
    113.                 <!-- leftCol -->
    114.                 <div class="leftCol">
    115.                      <img src="http://www.google.de/intl/de_de/images/logo.gif" height="120" width="120" alt="Test"  title="Test" />
    116.                                 <h2>Überschrift -> h2</h2>
    117.                                 <br />
    118.                                 Evtl. ein kleiner Text<br />
    119.                                 <br />
    120.                                 <ul>
    121.                                         <li>Punkt 1</li>
    122.                                         <li>Punkt 2</li>
    123.                                         <li>Punkt 3</li>
    124.                                 </ul>
    125.                                 <br />
    126.                 </div><!-- end leftCol -->
    127.  
    128.                 <!-- rightCol -->
    129.                 <div class="rightCol">
    130.                           <em>Preis &euro;</em>
    131.                           <form action="" method='post'><input type='text' id="sub_zahl" name='zahl' value='1' size="1"><input type='submit' id="sub_send" value="OK">
    132.                           </form>
    133.                 </div><!-- end rightCol -->
    134.  
    135.                 <div class="produkt_abschluss"></div>
    136.  
    137.                 </div><!-- end produkt -->
    138.  
    139.         </div>
    140. </body>
    141. </html>
     
  3. Rexo

    Rexo Mitglied

    Vielen Dank für die Antwort.

    Gibt es keine Möglichkeit das ganze ohne die beiden div's (.leftCol und rightCol) zu lösen?

    Ich möchte so wenig div's und span's wie möglich verwenden: Das div (produkt_abschluss) war schon an der Schmerzgrenze, aber es hat sich leider keine andere Lösung gefunden, bei 2 gefloateten Bereichen ein gemeinsamer Abschluss zu finden, wobei ich mir das div schenken kann, wenn ich mit 2 "Spalten" arbeite.

    Dann hab ich im Vgl. zur "alten" Lösung nur noch ein div mehr.. aber optimal ist das auch nicht. :(

    Da es im FF funktioniert, sollte es doch nur ne Eigenheit vom IE sein, dass er es nicht in meinem Sinne darstellen möchte, oder? :rolleyes:

    Grüsse
     
  4. Maik

    Maik Gast

    Selbstverständlich habe ich zunächst versucht, das Darstellungsproblem im IE so (ohne die Spalten) in den Griff zu bekommen, leider ohne Erfolg.
     
  5. Rexo

    Rexo Mitglied

    Eine Lösung ohne das zusätzliche div, seh ich nur in einem Conditional Comment für alle IE -Varianten (wie es dann mit dem Mac aussieht, müsste man natürlich testen).

    Und in dem conditional comment ein position: relative;


    Aber das halt ich für die schlechteste Lösung. Da nimmt man doch lieber ein weiteres div in Kauf ;)

    So ging es mir leider auch.

    Wenn keiner nen neuen Ansatz bietet, werd ich nach llanger - leider erfolglosen -Lösungssuche, doch auf eine Lösung mit Spalten o. ä. zurückgreifen (naja ein div halt mehr).

    Grüsse,
    Rexo
     
Die Seite wird geladen...
Ähnliche Themen - Codeschnipsel Darstellungs Fehler
  1. Alice
    Antworten:
    7
    Aufrufe:
    242
  2. mm250787
    Antworten:
    8
    Aufrufe:
    1.722
  3. tschloss
    Antworten:
    8
    Aufrufe:
    1.132
  4. bigtail
    Antworten:
    2
    Aufrufe:
    1.498
  5. PowerCheat
    Antworten:
    6
    Aufrufe:
    574
Status des Themas:
Es sind keine weiteren Antworten möglich.