Problem bei Style margin in IE


  • miro
  • 1325 Aufrufe 11 Antworten

Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen

  • Problem bei Style margin in IE

    hallo

    Ich kann kein Fehler finden …. und doch funktioniert nicht so wie ich mir das vorgestellt habe in Mozilla funktionieren die Kapitel Nummer
    bei IE ist es verschoben … wie kann ich das besser machen .
    ich sende alles damit man alles sehen kann

    Danke für Vorschläge und Hilfe

    Gruß
    miro

    HTML-Quellcode

    1. <HEAD>
    3. <STYLE type="text/css">
    8. a {text-decoration:none; padding-left:10px}
    9. a:hover {text-decoration: underline;}
    12. #tab1 { border:0; width: 800px }
    14. td.head {
    15. width:100px;
    16. vertical-align:top ;
    17. font-family:Helvetica, Arial, sans-serif;
    18. font-size: 20px;
    19. font-style:normal
    20. }
    22. em.kap {
    23. font-family:Helvetica, Arial, sans-serif; font-size: 18px;
    24. font-style:normal;
    25. width: 10px;
    26. }
    28. </STYLE>
    30. </HEAD>
    33. <BODY TEXT="#000000" BGCOLOR="#FFFFFF" LINK="#0000FF" VLINK="#000099" ALINK="#FF0000" >
    35. <table id="tab1" width="800px" border="1" bordercolor="#663366">
    36. <tr>
    37. <td class="head">
    38. <b>Kapitel:</b>
    39. </td>
    40. <td align="left"><em class="kap">
    41. <A HREF="genesis-01.htm"> 1.</A>
    42. <A HREF="genesis-02.htm"> 2.</A>
    43. <A HREF="genesis-03.htm"> 3.</A>
    44. <A HREF="genesis-04.htm"> 4.</A>
    45. <A HREF="genesis-05.htm"> 5.</A>
    46. <A HREF="genesis-06.htm"> 6.</A>
    47. <A HREF="genesis-07.htm"> 7.</A>
    48. <A HREF="genesis-08.htm"> 8.</A>
    49. <A HREF="genesis-09.htm"> 9.</A>
    50. <A HREF="genesis-10.htm"> 10.</A>
    51. <A HREF="genesis-11.htm"> 11.</A>
    52. <A HREF="genesis-12.htm"> 12.</A>
    53. <A HREF="genesis-13.htm"> 13.</A>
    54. <A HREF="genesis-14.htm"> 14.</A>
    55. <A HREF="genesis-15.htm"> 15.</A>
    56. <A HREF="genesis-16.htm"> 16.</A>
    57. <A HREF="genesis-17.htm"> 17.</A>
    58. <A HREF="genesis-18.htm"> 18.</A>
    59. <A HREF="genesis-19.htm"> 19.</A>
    60. <A HREF="genesis-20.htm"> 20.</A>
    61. <A HREF="genesis-21.htm"> 21.</A>
    62. <A HREF="genesis-22.htm"> 22.</A>
    63. <A HREF="genesis-23.htm"> 23.</A>
    64. <A HREF="genesis-24.htm"> 24.</A>
    65. <A HREF="genesis-25.htm"> 25.</A>
    66. <A HREF="genesis-26.htm"> 26.</A>
    67. <A HREF="genesis-27.htm"> 27.</A>
    68. <A HREF="genesis-28.htm"> 28.</A>
    69. <A HREF="genesis-29.htm"> 29.</A>
    70. <A HREF="genesis-30.htm"> 30.</A>
    71. <A HREF="genesis-31.htm"> 31.</A>
    72. <A HREF="genesis-32.htm"> 32.</A>
    73. <A HREF="genesis-33.htm"> 33.</A>
    74. <A HREF="genesis-34.htm"> 34.</A>
    75. <A HREF="genesis-35.htm"> 35.</A>
    76. <A HREF="genesis-36.htm"> 36.</A>
    77. <A HREF="genesis-37.htm"> 37.</A>
    78. <A HREF="genesis-38.htm"> 38.</A>
    79. <A HREF="genesis-39.htm"> 39.</A>
    80. <A HREF="genesis-40.htm"> 40.</A>
    81. <A HREF="genesis-41.htm"> 41.</A>
    82. <A HREF="genesis-42.htm"> 42.</A>
    83. <A HREF="genesis-43.htm"> 43.</A>
    84. <A HREF="genesis-44.htm"> 44.</A>
    85. <A HREF="genesis-45.htm"> 45.</A>
    86. <A HREF="genesis-46.htm"> 46.</A>
    87. <A HREF="genesis-47.htm"> 47.</A>
    88. <A HREF="genesis-48.htm"> 48.</A>
    89. <A HREF="genesis-49.htm"> 49.</A>
    90. <A HREF="genesis-50.htm"> 50.</A> </em>
    91. </TD>
    92. </tr>
    94. <tr>
    95. <td class="head">
    96. <b>Vers :</b>
    97. </td>
    98. <td> <em class="kap">
    99. <A HREF="#1"> 1.</A>
    100. <A HREF="#2"> 2.</A>
    101. <A HREF="#3"> 3.</A>
    102. <A HREF="#4"> 4.</A>
    103. <A HREF="#5"> 5.</A>
    104. <A HREF="#6"> 6.</A>
    105. <A HREF="#7"> 7.</A>
    106. <A HREF="#8"> 8.</A>
    107. <A HREF="#9"> 9.</A>
    108. <A HREF="#10"> 10.</A>
    109. <A HREF="#11"> 11.</A>
    110. <A HREF="#12"> 12.</A>
    111. <A HREF="#13"> 13.</A>
    112. <A HREF="#14"> 14.</A>
    113. <A HREF="#15"> 15.</A>
    114. <A HREF="#16"> 16.</A>
    115. <A HREF="#17"> 17.</A>
    116. <A HREF="#18"> 18.</A>
    117. <A HREF="#19"> 19.</A>
    118. <A HREF="#20"> 20.</A>
    119. <A HREF="#21"> 21.</A>
    120. <A HREF="#22"> 22.</A>
    121. <A HREF="#23"> 23.</A>
    122. <A HREF="#24"> 24.</A>
    123. <A HREF="#25"> 25.</A>
    124. <A HREF="#26"> 26.</A>
    125. <A HREF="#27"> 27.</A>
    126. <A HREF="#28"> 28.</A>
    127. <A HREF="#29"> 29.</A>
    128. <A HREF="#30"> 30.</A>
    129. <A HREF="#31"> 31.</A>
    130. </em>
    131. </td>
    132. </tr>
    133. </table>
    135. </body>
    Alles anzeigen

    Dieser Beitrag wurde bereits 6 mal editiert, zuletzt von miro ()

  • hallo Shadowww

    Ja ich habe gesehen deine Bilder

    Bei mir in Mozilla Firefox v.3.5.7 sind die zahlen 1 von Kapitel und Vers 1 schön untereinander ausgerichtet.

    bei IE sehet bei mir so wie auf deinen Bilder … die 1-ser sind versetzt.
    ich verstehe nicht warum … vor allem weil bei der Class .margin1 { margin-left: -3px; } musste ich -3 setzen für eine Ausrichtung …
    IE kann ich die Zahlen nicht ausrichten

    das ist mein Problem

    Gruß
    miro

    Dieser Beitrag wurde bereits 2 mal editiert, zuletzt von miro ()

  • Hi,
    warum machst du es sooooo umständlich? Warum für jede Zahl eine Zelle?
    Wenn schon Tabellen, mach es doch einfach so:

    Quellcode

    1. <style type="text/css">
    2. #einmalig {
    3. border:0;
    4. width:80%;
    5. }
    6. td.head {
    7. width:100px;
    8. vertical-align:top;
    9. }
    10. </style>
    11. <table id="einmalig">
    12. <tr>
    13. <td class="head">Kapitel:</td>
    14. <td>Die ganzen Zahlen hintereinander</td>
    15. </tr>
    16. <tr>
    17. <td class="head">Vers:</td>
    18. <td>Die ganzen Zahlen hintereinander</td>
    19. </tr>
    20. </table>
    Alles anzeigen

    btw. IDs dürfen nur einmalig im Code vorkommen (Darum heißen die auch IDs) Klassen mehrmals ;)

    Gruß
    Broken Sword
    Auf dem Abstellgleis sah man ihn liegen,
    Auf dem Abstellgleis zwischen Schwelle und Gestein,
    Auf dem Abstellgleis im strömenden Regen,
    Auf dem Abstellgleis allein.

    Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von Broken Sword ()

  • hallo Broken Sword

    danke für deinen Vorschlag.
    ich habe mein Code in ersten Tread verändert
    (wäre es zu blöd nochmals hier zu Posten ) nach deiner Vorschlag …
    Aber …
    leider kann ich die zahlen nicht richtig ausrichten …

    Gibt den da eine Möglichkeit die Zahlen untereinader auszurichten ?

    Gruß und danke in voraus

    Miro

    Dieser Beitrag wurde bereits 2 mal editiert, zuletzt von miro ()

  • Hi,
    wichtig dabei ist, dass die Klasse .kab und die ID #tab1 eine feste Weite hat (Bsp "width:100px" für kab und "width:800px" für #tab1) Sonst gibts keinen Zeilenumbruch. Desweiteren sind die Leerzeichen vor den einzelnen Zahlen unnütz. Benutze dafür lieber "padding-left:2px" für den a-Tag. (So kannst du das bei allen mit einem Klick ändern)

    Gruß
    Broken Sword
    Auf dem Abstellgleis sah man ihn liegen,
    Auf dem Abstellgleis zwischen Schwelle und Gestein,
    Auf dem Abstellgleis im strömenden Regen,
    Auf dem Abstellgleis allein.

  • hallo Broken Sword

    Danke für deine Unterstützung Broken Sword.
    Aber … ich weis nicht weiter …
    ich habe alle deiner Vorschläge ausprobiert und
    der Code hat sich zwar verfeinert, keiner geworden und besser zu pflegen geworden, aber der „Fehler “
    besteht wie davor … ohne jegliche Veränderung
    nach deinem letzten Vorschlag Zwar die Zeile wird umgebrochen aber die lösung ist immer noch nicht in sicht.
    das heißt die 2 und 3 Zeile (in td’s) sind ausgerichtet, aber die 1 mit der 2 Zeile ist nicht ausgerichtet. Die erste Zeile macht was sie will ….
    Ich nehme an, das Zahlen 1 bis 9 haben andere breite als von 11 bis 99 …
    und bei 100 würden sich bestimmt alle 99 Zahlen wieder verschieben.

    ich habe meine Code ober wieder upgedate damit du sehen kanst was ich geändert habe und ob das in deinem Sinne war .
    hast du noch ne Idee ?

    Danke
    Gruß
    miro

    Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von miro ()

  • Hi,
    jetzt ist es nur noch ein kleiner Fehler ;)
    Die erste Zahl darf kein padding haben. Sprich entweder du entwirst eine neue Klasse für den a-Tag der "1" oder packst das Attribut style="padding:0" in diesen.

    Gruß
    Broken Sword
    Auf dem Abstellgleis sah man ihn liegen,
    Auf dem Abstellgleis zwischen Schwelle und Gestein,
    Auf dem Abstellgleis im strömenden Regen,
    Auf dem Abstellgleis allein.

  • hi

    schön das Du noch Ideen hast .... smile aber
    ich glaub dass ich dich vielleicht nicht verstanden habe ....
    ich habe folgendes versucht :

    Quellcode

    1. <table id="tab1" width="800px">
    2. <tr>
    3. <td class="head">
    4. <b>Kapitel:</b>
    5. </td>
    6. <td align="left">
    7. <em class="kap">
    8. <A HREF="genesis-01.htm" style="padding:0"> 1.</A>
    9. <A HREF="genesis-02.htm"> 2.</A>
    10. <A HREF="genesis-03.htm"> 3.</A>

    -------------------------------------------

    a:first-child { padding: 0px}

    hat zwar die 1 ausgerichtet aber die 2 bis 9 spielen verrückt wie vorhier
    Ne frage warum musst nur die "1" auf padding=0 px gesetzt werden, was ist mit 2 bis 9 ?
    wie sollen sie sich ausrichten ?

    ---------------------------------------------

    mach ich so :

    Quellcode

    1. <A HREF="genesis-01.htm" style="padding:0"> 1.</A>
    2. <A HREF="genesis-02.htm" style="padding:0"> 2.</A>

    kann ich die 2 auch nicht ausrichten ....

    oder mach ich jetzt alles falsch ?

    Gruß
    miro

    Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von Broken Sword ()

  • Hi,
    tut mir leid, da habe ich dich falsch verstanden ^^"
    Du willst, dass die ganzen Zahlen die selbe Weite haben, so geordnet aussehen... Das habe ich gerade echt nicht geblickt. Dachte, es ginge um die ersten Ziffern untereinander. Sry.

    Da machst du am besten a-Tag zu einem Block Element - dann kannst du eine Weite festsetzen.
    Bsp.

    Quellcode

    1. a {
    2. width:35px;
    3. display:block;
    4. float:left;
    5. text-decoration:none;
    6. }

    Da du allerdings ein em-Tag um die Dinger hast und ein inline-Tag nicht vor einem block-Tag stehen kann, macht der IE da mucken. em-Tag muss also raus. Kann man ja auch in CSS gleich mit formatieren.

    Quellcode

    1. a {
    2. width:35px;
    3. display:block;
    4. float:left;
    5. text-decoration:none;
    6. font-family:Helvetica, Arial, sans-serif;
    7. font-size: 18px;
    8. }

    So sind alle Zahlen gleich weit :)

    Gruß
    Broken Sword
    Auf dem Abstellgleis sah man ihn liegen,
    Auf dem Abstellgleis zwischen Schwelle und Gestein,
    Auf dem Abstellgleis im strömenden Regen,
    Auf dem Abstellgleis allein.

  • hi Broken Sword

    ja genau … so sind alle Zahlen gleich weit … :)
    genau das habe ich gesucht ….
    zwar mit dem a Tag konnte ich das nicht direkt machen den sonst würden alle a Tags betroffen, aber ich habe das als a Tag Klasse gelöst danke deiner Hilfe.

    ich möchte mich bei dir Broken Sword herzlich bedanken,
    für deine konsequente Hilfestellung.

    Danke und

    Schöne Grüße

    Miro

  • Hi,
    kein Problem, man hillft, wo man helfen kann.

    btw. Du kannst die a-Tags auch eingrenzen:

    Quellcode

    1. #tab1 a {
    2. }

    Dann sind nur die a-Tags in der Tabelle #tab1 betroffen ;)

    btw², nächstes mal daran denken, das Präfix umzustellen - freesoft-board.to/f238/faq-wie…efix-umstellt-248151.html

    => Closed

    Gruß
    Broken Sword
    Auf dem Abstellgleis sah man ihn liegen,
    Auf dem Abstellgleis zwischen Schwelle und Gestein,
    Auf dem Abstellgleis im strömenden Regen,
    Auf dem Abstellgleis allein.