Anzeige

Textdarstellung von Div in IE anders als in Firefox

Textdarstellung von Div in IE anders als in Firefox | PSD-Tutorials.de

Erstellt von Darkwing-dave, 01.11.2006.

  1. Textdarstellung von Div in IE anders als in Firefox
    Hab eine Div-Box gemacht und Text hinein geschrieben... jetzt sieht das im IE ganz anders aus als im Firefox... Kann mir einer sagen, wo ich welchen Fehler mache? (Seh vor lauter Bäumen den Wald nicht mehr....)

    Hier Bild:
    [​IMG]

    (Die Div-Box heisst contact..)



    Hier Quelltext:
    Code (Text):
    1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    2.  "http://www.w3.org/TR/xhtml1/DTD/Strict.dtd">
    3. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
    4. <head>
    5. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    6. <meta name="Author" content="..." />
    7. <meta name="description" content="...." />
    8. <meta name="keywords" content="....." />
    9. <style type="text/css"><!--
    10. body
    11. {
    12. font-family:Verdana, Arial, sans-serif;
    13. font-size:100.1%;
    14. background-color:black;
    15. text-align:center;
    16. margin-top:20px;
    17. }
    18. h1 {font-size:1.4em;color:#000000;margin-bottom:0px;}
    19. h2 {font-size:1.2em;color:#000000;}
    20. h3 {font-size:1.0em;color:#000000;}
    21. h6 {font-size:0.6em;color:#eeeeee;font-weight:lighter;}
    22.  
    23. a:link, a:visited, a:active, a:hover
    24.     {
    25.     text-decoration:underline;
    26.     font-weight:normal;
    27.     color:#ff0000;
    28.     font-size:0.7em;
    29.     }
    30. a:active, a:hover
    31.     {
    32.     color:#009999;
    33.     }
    34. a.menu  {
    35.     display:block;
    36.     padding:3px;
    37.     border-top:1px solid #000;
    38.     background-color:#737994;
    39.     text-align:left;
    40.     color:#eeeeee;
    41.     text-decoration:none;
    42.      }
    43. a.menu:link, a.menu:visited
    44.     {
    45.     color:#eeeeee;
    46.     background-color:#737994;
    47.     text-decoration:none;
    48.     font-weight:bold;
    49.     }
    50. a.menu:active, a.menu:hover
    51.     {
    52.     color:#737994;
    53.     font-weight:bold;
    54.     background-color:#eeeeee;
    55.     }
    56.  
    57. #container
    58. {
    59. width:740px;
    60. height: 530px;
    61. margin: 0px auto;
    62. text-align:left;
    63. background-color:#cccccc;
    64. border:1px solid #000000;
    65. }
    66. #title {
    67.     height:80px;
    68.     border-bottom:1px solid #000;
    69.     background-image: url(bilder/banner.jpg);
    70.     background-repeat: no-repeat;
    71. }
    72.  
    73. #left {
    74. background-color:#cccccc;
    75. width:145px;
    76. height:430px;
    77. float:left;
    78. margin-top:10px;
    79. margin-left:8px;
    80. }
    81.     .menutitle{
    82.     font-weight:bold;
    83.     text-align:left;
    84.     margin:0px;
    85.     padding:2px;
    86.     }
    87.     .menucontainer {
    88.     border:1px solid #000;
    89.     background-color:#7b7d8e;
    90.     width:125px;
    91.     margin:10px;
    92.     }
    93.  
    94. #content {
    95. border:1px solid #000000;
    96. background-color:#eeeeee;
    97. width:auto;
    98. height:430px;
    99. float:left;
    100. margin:10px 10px 10px 10px;
    101. }
    102.  
    103. #contact {
    104. border:1px solid #000;
    105. background-color:#7b7d8e;
    106. width:124px;
    107. margin-top:80px;
    108. margin-left:10px;
    109. margin-right:0px;
    110. padding:1px;
    111. }
    112.  
    113. //--></style>
    114. <title>Wiesehoeckli Flumserberg</title>
    115. </head>
    116. <body>
    117. <div id="container">
    118.   <div id="title">
    119.  </div>
    120.  
    121.  <div id="left">
    122.   <div class="menucontainer">
    123.    <p class="menutitle">Menu</p>
    124.    [url="#"]Wieseh&ckli[/url]
    125.    [url="#"]Preise/Anfahrt[/url]
    126.    [url="#"]Reservation[/url]
    127.    [url="#"]Aktivit&ten[/url]
    128.    [url="#"]aktuelles Wetter[/url]
    129.    [url="#"]Gallerie[/url]
    130.    [url="#"]Links[/url]
    131.   </div>
    132.  
    133. <div id="contact">
    134. <h6>Zeile 1
    135.  
    136. Zeile 2
    137.  
    138. Zeile 3
    139.  
    140. Zeile 4
    141. </h6>
    142.  
    143.  
    144. </p>
    145. <h6>Zeile 5 nach Abstand
    146.  
    147.  
    148.  
    149. </p>
    150. Zeile 6 nach Abstand
    151.  
    152. Zeile 7</h6>
    153. </div>
    154.  
    155.  </div>
    156.  
    157.  <div id="content">
    158. <iframe src="iframe1.htm" name="iframe" scrolling="auto" allowtransparency="true" width="545" height="430" margin="10" boder="0"></iframe>
    159. </div>
    160.  <br style="clear:both;" />
    161. </div>
    162. </body>
    163. </html>
    164.  
     
    #1      
  2. BlackIronHeart

    BlackIronHeart Unsichtbar

    Dabei seit:
    22.10.2006
    Beiträge:
    1.332
    Geschlecht:
    männlich
    Software:
    bevorzugt PS7
    Textdarstellung von Div in IE anders als in Firefox
    der text in der box wird im FF mittig dargestellt.
    <grübel>
    müsste nun selber schaun wie man den text
    innerhalb der box dazu bewegen könnte
    links/oben zu beginnen.
    bei tabellen gibt es den ( wenn auch unschönen ) <tr valign="top">

    bin in html nicht sonderlich bewandert
    aber vielleicht reicht es ja als denkanstoss?

    [edit]
    du könntest aber auch die grösse der box anpassen

    [edit2]
    öhm...ich probier grad auch mal ein wenig mit dem code rum.
    das verhalten ist echt ein wenig eigenartig...
    liegt wohl am <h6>? *mal weiter rumprobiert

    [edit3]
    Code (Text):
    1. <div id="contact">
    2. Zeile 1
    3.  
    4. Zeile 2
    5.  
    6. Zeile 3
    7.  
    8. Zeile 4
    9.  
    10.  
    11.  
    12. </p>
    13. <h6>Zeile 5 nach Abstand
    14.  
    15.  
    16.  
    17. </p>
    18. Zeile 6 nach Abstand
    19.  
    20. Zeile 7</h6>
    21. </div>
    erzeugt diese verschiebung nicht mehr...
     
    #2      
  3. Quaese

    Quaese Noch nicht viel geschrieben

    Dabei seit:
    18.06.2006
    Beiträge:
    31
    Textdarstellung von Div in IE anders als in Firefox
    Hi,

    zeichne mal die Überschriften (H6) innerhalb des Elementes #contact mit CSS so aus, dass sie keinen oberen Abstand (innen und außen) besitzen.
    Code (Text):
    1. #contact h6{ margin-top: 0; padding-top: 0;}
    Vielleicht hilft das weiter.

    Ciao
    Quaese
     
    #3      
  4. sanji

    sanji Guest

    Textdarstellung von Div in IE anders als in Firefox
    hi,

    ich habe momentan ein sehr ähnliches Problem mit einer contentbox. der abstand des textes zum oberen rand des div is irgendwie zu groß ...

    Wahrscheinlich gibts für beide Probleme die gleiche Lösung also schließe ich mich diesenm Thread einfach mal an :p

    [klick fürs bildchen]

    Code (Text):
    1.  
    2. <div style="position:absolute; top:224px; left:156px; width:496px; height:21px; background-image:url(images/content_box_head.jpg); padding:2px;">
    3.                     <h1> This is just a test heading !
    4.                          </h1>
    5.                  </div>
    6.              
    7.                  <div style="position:absolute; top:245px; left:156px; width:494px; height:250px; border:1px solid #bababa; background-color:#efefef; padding:2px;">
    8.                    
    9.  
    10. Lorem ipsum nam quodsi (habs mal abgekürzt...)
    11.                          </p>
    12.                  </div>
    13.  
    Der code is noch bissl naja durcheinander, aber doch verständlich denk ich...

    mfg, sanji


    EDIT: wie schnell das hier mit dem support doch immer geht. ich schreibe noch fröhlich meine code und schon findet der Quaese die richtige Lösung. Also mir hats geholfen, DANKE !
     
    #4      
  5. BlackIronHeart

    BlackIronHeart Unsichtbar

    Dabei seit:
    22.10.2006
    Beiträge:
    1.332
    Geschlecht:
    männlich
    Software:
    bevorzugt PS7
    Textdarstellung von Div in IE anders als in Firefox
    yep...auch bei dem anderen code hats geholfen :)
     
    #5      
  6. Textdarstellung von Div in IE anders als in Firefox

    Vielen Dank Quase!!!
    habe einfach bei der definition von h6 noch margin + padding mit 0-Wert angehängt...
    Jetzt wirds endlich bei beiden richtig dargestellt!!! !!--)
     
    #6      
x
×
×