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

Firefox & IE

Dieses Thema im Forum "CSS" wurde erstellt von Dr_Google, 30. August 2005.

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

    Dr_Google Grünschnabel

    Hallo, ich habe eine homepage unter firefox designt und musste feststellen das unter IE alles verzogen war bzw falsch dargestellt wurde.

    Habt Ihr vielleicht ein paar gute tipps wie man sowas verhinder kann?

    Beste Grüsse
  2. AKrebs70

    AKrebs70 Gast

    Hallo!

    Mehr Infos währen nicht schlech. Z.B. der Quelltext.

    Axel
  3. Dr_Google

    Dr_Google Grünschnabel

    Code (Text):
    1.  
    2.  
    3. /* Bereiche */
    4.  
    5. body, p a  
    6. {
    7.     color: black;
    8.     background-color: #FFFFFF;
    9.    
    10.    
    11.  
    12. }
    13.  
    14.  
    15. .row0
    16. {
    17.         background-color: #F5F5F5;
    18. }
    19.  
    20.  
    21.  
    22.  
    23. .row1
    24. {
    25.  
    26.         background-color: #F0F8FF;
    27. }
    28.  
    29.  
    30.  
    31.  
    32. h1#Kopfzeilea
    33. {
    34.     position:absolute;
    35.         font-size: 24px;
    36.     top:60px;
    37.         left:15px;
    38.         width: 18em;
    39.     margin:0px;
    40.     padding: 0;
    41.     text-align: center;
    42.     background-color: #FFFFFF;
    43.    
    44. }
    45.  
    46. html>body h1
    47. {
    48.     border-color: black;  /* Farbangleichung an den Internet Explorer  */
    49. }
    50.  
    51.  
    52. div#Navigation h4
    53. {
    54.     margin: 0.2em 0.5em;
    55. }
    56.  
    57. div#Navigation p
    58. {
    59.     margin: 0.5em;
    60. }
    61.  
    62.  
    63. div#navigationsmenu
    64. {
    65.     position:absolute;
    66.         top:7000px;
    67.         left:300px;
    68.         font-size: 0.83em;
    69.     width: 18em;
    70.     margin:0px;
    71.     padding: 0;
    72.     background-color: #FFFFFF;
    73.     border: 1px solid #BBBBBB;
    74.  
    75. }
    76.  
    77.  
    78.  
    79.  
    80. /*-------------Style für den Anmeldebereich-----------------------*/
    81. div#titel p
    82. {
    83.     font-family: Verdana, Tahoma, Microsoft Sans Serif, Arial;
    84.         font-size: 12px;
    85.         font-weight:600;
    86.         color: #D3D3D3;
    87.         margin: 0.5em;
    88.       padding-top:0px;
    89. }
    90.  
    91. div#titel
    92. {
    93.     position:absolute;
    94.         top:123px;
    95.         left:300px;
    96.         font-size: 0.83em;
    97.     width: 30.78em;
    98.     padding-top:0px;
    99.       padding-right:10px;
    100.     background-color: #F5F5F5;
    101.     border: 1px solid #BBBBBB;
    102.  
    103. }
    104.  
    105.  
    106.  
    107.  
    108. div#login p
    109. {
    110.     font-family: Verdana, Tahoma, Microsoft Sans Serif, Arial;
    111.         font-size: 10px;
    112.         font-weight:600;
    113.         color: #D3D3D3;
    114.         margin: 0.5em;
    115.       padding-top:0px;
    116. }
    117.  
    118. div#login
    119. {
    120.     position:absolute;
    121.         top:150px;
    122.         left:300px;
    123.         font-size: 0.83em;
    124.     width: 20.2em;
    125.     margin:0px;
    126.     padding-left:150px;
    127.       background-color: #FFFFFF;
    128.     border: 1px solid #BBBBBB;
    129.  
    130. }
    131.  
    132.  
    133.  
    134. div#gifcaution
    135. {
    136.     position:absolute;
    137.         top:50px;
    138.         left:30px;
    139.         font-size: 0.83em;
    140.     width: 2em;
    141.     padding-top:0px;
    142.       padding-right:10px;
    143.    
    144.     border: 0px solid #BBBBBB;
    145.  
    146. }
    147.  
    148.  
    149.  
    150.  
    151. div#titelhinweis
    152. {
    153.     position:absolute;
    154.         top:25px;
    155.         left:300px;
    156.         font-size: 0.83em;
    157.     width: 30.78em;
    158.     padding-top:0px;
    159.       padding-right:10px;
    160.     background-color: #F5F5F5;
    161.     border: 1px solid #BBBBBB;
    162.  
    163. }
    164.  
    165. div#titelhinweis p
    166. {
    167.     font-family: Verdana, Tahoma, Microsoft Sans Serif, Arial;
    168.         font-size: 12px;
    169.         font-weight:600;
    170.         color: #D3D3D3;
    171.         margin: 0.5em;
    172.       padding-top:0px;
    173. }
    174.  
    175. div#hinweis
    176. {
    177.     position:absolute;
    178.         top:52px;
    179.         left:300px;
    180.         font-size: 0.83em;
    181.     width: 30em;
    182.     margin:0px;
    183.     padding:10px;
    184.     text-indent:20px;
    185.         background-color: #FFFFFF;
    186.     border: 1px solid #BBBBBB;
    187.  
    188. }
    189.  
    190.  
    191. input, textarea
    192. {
    193.     border:1px solid #D3D3D3;
    194.     padding-left:5px;
    195.     padding-top:2px;
    196.     height:20px;
    197.     font-size : 10px;
    198.     color:#000000;
    199.     font-family : Verdana, Arial, Helvetica, sans-serif;
    200. }
    201.  
    202. /*-------------Style für den Index1.php Bereich -----------------------------*/
    203. div#titelindex1 p
    204. {
    205.     font-family: Verdana, Tahoma, Microsoft Sans Serif, Arial;
    206.         font-size: 12px;
    207.         font-weight:600;
    208.         color: #D3D3D3;
    209.         margin: 0.5em;
    210.       padding-top:0px;
    211. }
    212.  
    213. div#titelindex1
    214. {
    215.     position:absolute;
    216.         top:123px;
    217.         left:300px;
    218.         font-size: 0.83em;
    219.     width: 30.78em;
    220.     padding-top:0px;
    221.       padding-right:10px;
    222.     background-color: #F5F5F5;
    223.     border: 1px solid #BBBBBB;
    224.  
    225. }
    226.  
    227. div#index1 p
    228. {
    229.     font-family: Verdana, Tahoma, Microsoft Sans Serif, Arial;
    230.         font-size: 10px;
    231.         font-weight:600;
    232.         color: #D3D3D3;
    233.         margin: 0.5em;
    234.       padding-top:0px;
    235. }
    236.  
    237. div#index1
    238. {
    239.     position:absolute;
    240.         top:150px;
    241.         left:300px;
    242.         font-size: 0.83em;
    243.     width: 30em;
    244.     margin:0px;
    245.     padding:10px;
    246.  
    247.         background-color: #FFFFFF;
    248.     border: 1px solid #BBBBBB;
    249.  
    250. }
    251.  
    252. /*-------------Style für den indexadmin.php Bereich -----------------------------*/
    253.  
    254. div#titeladmin p
    255. {
    256.     font-family: Verdana, Tahoma, Microsoft Sans Serif, Arial;
    257.         font-size: 12px;
    258.         font-weight:600;
    259.         color: #D3D3D3;
    260.         margin: 0.5em;
    261.       padding-top:0px;
    262. }
    263.  
    264. div#titeladmin
    265. {
    266.     position:absolute;
    267.         top:123px;
    268.         left:300px;
    269.         font-size: 0.83em;
    270.     width: 40.8em;
    271.     padding-top:0px;
    272.       padding-right:10px;
    273.     background-color: #F5F5F5;
    274.     border: 1px solid #BBBBBB;
    275.  
    276. }
    277.  
    278. div#admin p
    279. {
    280.     font-family: Verdana, Tahoma, Microsoft Sans Serif, Arial;
    281.         font-size: 10px;
    282.         font-weight:600;
    283.         color: #D3D3D3;
    284.         margin: 0.5em;
    285.       padding-top:0px;
    286. }
    287.  
    288. div#admin
    289. {
    290.     position:absolute;
    291.         top:150px;
    292.         left:300px;
    293.         font-size: 0.83em;
    294.     width: 37.8em;
    295.     margin:0px;
    296.     padding-left:50px;
    297.  
    298.         background-color: #FFFFFF;
    299.     border: 1px solid #BBBBBB;
    300.  
    301. }
    302. /* bilder positionieren  */
    303. div#gifdatastore
    304. {
    305.     position:absolute;
    306.         top:15px;
    307.         left:20px;
    308.       width: 0em;
    309.     margin:0px;
    310.     border: 0px solid #BBBBBB;
    311.  
    312. }
    313.  
    314. div#gifdatastore1
    315. {
    316.     position:absolute;
    317.         top:55px;
    318.         left:20px;
    319.       width: 0em;
    320.     margin:0px;
    321.     border: 0px solid #BBBBBB;
    322.  
    323. }
    324.  
    325. div#gifdatastore2
    326. {
    327.     position:absolute;
    328.         top:95px;
    329.         left:20px;
    330.       width: 0em;
    331.     margin:0px;
    332.     border: 0px solid #BBBBBB;
    333.  
    334. }
    335.  
    336. div#gifdatastore3
    337. {
    338.     position:absolute;
    339.         top:95px;
    340.         left:20px;
    341.       width: 0em;
    342.     margin:0px;
    343.     border: 0px solid #BBBBBB;
    344.  
    345. }
    346.  
    347. div#gifdatastore3
    348. {
    349.     position:absolute;
    350.         top:135px;
    351.         left:20px;
    352.       width: 0em;
    353.     margin:0px;
    354.     border: 0px solid #BBBBBB;
    355.  
    356. }
    357.  
    358.  
    359. div#gifflowgraph
    360. {
    361.     position:absolute;
    362.         top:170px;
    363.         left:20px;
    364.       width: 0em;
    365.     margin:0px;
    366.     border: 0px solid #BBBBBB;
    367.  
    368. }
    369.  
    370. div#gifdocumentmag
    371. {
    372.     position:absolute;
    373.         top:205px;
    374.         left:20px;
    375.       width: 0em;
    376.     margin:0px;
    377.     border: 0px solid #BBBBBB;
    378.  
    379. }
    380.  
    381. div#gifdocumentmag1
    382. {
    383.     position:absolute;
    384.         top:240px;
    385.         left:20px;
    386.       width: 0em;
    387.     margin:0px;
    388.     border: 0px solid #BBBBBB;
    389.  
    390. }
    391.  
    392.  
    393. div#gifusers
    394. {
    395.     position:absolute;
    396.         top:280px;
    397.         left:20px;
    398.       width: 0em;
    399.     margin:0px;
    400.     border: 0px solid #BBBBBB;
    401.  
    402. }
    403.  
    404. div#gifrotcwright
    405. {
    406.     position:absolute;
    407.         top:320px;
    408.         left:20px;
    409.       width: 0em;
    410.     margin:0px;
    411.     border: 0px solid #BBBBBB;
    412.  
    413. }
    414.  
    415.  
    416. div#gifkey
    417. {
    418.     position:absolute;
    419.         top:360px;
    420.         left:20px;
    421.       width: 0em;
    422.     margin:0px;
    423.     border: 0px solid #BBBBBB;
    424.  
    425. }
    426.  
    427.  
    428.  
    429. div#gifexit
    430. {
    431.     position:absolute;
    432.         top:400px;
    433.         left:20px;
    434.       width: 0em;
    435.     margin:0px;
    436.     border: 0px solid #BBBBBB;
    437.  
    438. }
    439.  
    440.  
    441.  
    442. /* -------------Lade mitarbeiter LoGa---------------------------------------- */
    443.  
    444. div#gifcheck
    445. {
    446.     position:absolute;
    447.         top:3px;
    448.         left:30px;
    449.         font-size: 0.83em;
    450.     width: 2em;
    451.     padding-top:0px;
    452.       padding-right:10px;
    453.     border: 0px solid #BBBBBB;
    454.  
    455. }
    456. /* ------Anzeige der Kostenstellenverantworlichen mit Ihren Kostenstellen------*/
    457. div#KSTV p
    458. {
    459.     font-family: Verdana, Tahoma, Microsoft Sans Serif, Arial;
    460.         font-size: 10px;
    461.         font-weight:600;
    462.         color: #D3D3D3;
    463.         margin: 0.5em;
    464.       padding-top:0px;
    465. }
    466.  
    467. div#KSTV
    468. {
    469.     position:absolute;
    470.         top:150px;
    471.         left:300px;
    472.         font-size: 0.83em;
    473.     width: 31.5em;
    474.     margin:0px;
    475.    
    476.       background-color: #FFFFFF;
    477.     border: 1px solid #BBBBBB;
    478.  
    479. }
    480. /* --------------------------Benutzerverwaltung-------------------------------*/
    481.  
    482. div#titelbv p
    483. {
    484.     font-family: Verdana, Tahoma, Microsoft Sans Serif, Arial;
    485.         font-size: 12px;
    486.         font-weight:600;
    487.         color: #D3D3D3;
    488.         margin: 0.5em;
    489.       padding-top:0px;
    490. }
    491.  
    492. div#titelbv
    493. {
    494.     position:absolute;
    495.         top:123px;
    496.         left:160px;
    497.         font-size: 0.83em;
    498.     width: 59.5em;
    499.     padding-top:0px;
    500.       padding-right:10px;
    501.     background-color: #F5F5F5;
    502.     border: 1px solid #BBBBBB;
    503.  
    504. }
    505.  
    506.  
    507.  
    508.  
    509. div#benutzerverwaltung p
    510. {
    511.     font-family: Verdana, Tahoma, Microsoft Sans Serif, Arial;
    512.         font-size: 10px;
    513.         font-weight:600;
    514.         color: #D3D3D3;
    515.         margin: 0.5em;
    516.       padding-top:0px;
    517. }
    518.  
    519. div#benutzerverwaltung
    520. {
    521.     position:absolute;
    522.         top:150px;
    523.         left:160px;
    524.         font-size: 0.83em;
    525.     width: 60.2em;
    526.     margin:0px;
    527.    
    528.       background-color: #FFFFFF;
    529.     border: 1px solid #BBBBBB;
    530.  
    531. }
    532.  
    533.  
    534. div#top
    535. {
    536.    
    537.         position:absolute;
    538.         top:15px;
    539.         left:270px;
    540.         font-size: 0.83em;
    541.     width: 50em;
    542.     margin:0px;
    543.     padding: 0;
    544.     background-color: #FFFFFF;
    545.     border: 1px solid #BBBBBB;
    546. }
    547.  
    548.  
    549. div#Inhalt2
    550. {
    551.    
    552.         position:absolute;
    553.         top:85px;
    554.         left:5px;
    555.         font-size: 0.83em;
    556.     width: 70em;
    557.     margin:0px;
    558.     padding: 0;
    559.     height:400px;
    560.         background-color: #FFFFFF;
    561.     border: 1px solid #BBBBBB;
    562.     z-index:2;
    563.  
    564. }
    565.  
    566.  
    567.  
    568. * html div#Inhalt
    569. {
    570.     height: 1em;  /* Workaround gegen den 3-Pixel-Bug des Internet Explorers */
    571. }
    572.  
    573. div#Inhalt h2
    574. {
    575.     margin: 0.2em 0;
    576. }
    577.  
    578. div#Inhalt p
    579. {
    580.     font-weight: normal;
    581.     margin: 1em 0;
    582. }
    583.  
    584. p#Fusszeile
    585. {
    586.     clear: both;
    587.     font-size: 12px;
    588.     font-weight: normal;
    589.     margin: 0;
    590.     padding: 0.1em;
    591.     text-align: center;
    592.     background-color: #FFFFFF;
    593.     border: 1px solid #BBBBBB;
    594.   }
    595.  
    596.  
    597. /* Schriften */
    598.  
    599. a
    600. {
    601.     color: #000000; text-decoration: none;
    602. }
    603.  
    604. a:hover
    605. {
    606.     color: #920404; text-decoration: none;
    607. }
    608.  
    609. h1
    610. {
    611.     font-family: Garamond, Verdana, Tahoma, Microsoft Sans Serif, Arial;
    612.     font-size: 24px;
    613.     color: #000000;
    614. }
    615.  
    616. h2
    617. {
    618.     font-family: Verdana, Tahoma, Microsoft Sans Serif, Arial;
    619.     font-size: 11px;
    620.     font-weight: bold;
    621.     line-height: 15px;
    622.     color: #000000;
    623. }
    624.  
    625. h3
    626. {
    627.     font-family: Verdana, Tahoma, Microsoft Sans Serif, Arial;
    628.     font-size: 10px;
    629.     letter-spacing: 3px;
    630.     line-height: 10px;
    631.     text-transform: uppercase;
    632.     color: #000000;
    633. }
    634.  
    635. h4
    636. {
    637.     font-family: Verdana, Tahoma, Microsoft Sans Serif, Arial;
    638.     font-size: 10px;
    639.     letter-spacing: 1px;
    640.     text-transform: uppercase;
    641.     color: #000000;
    642. }
    643.  
    644.  
    645.  
    646.  
    647. /*  Für alle P in Body                                                        */
    648. p
    649. {
    650.     font-family: Verdana, Tahoma, Microsoft Sans Serif, Arial;
    651.     font-size: 12px;
    652.    
    653.     color: #000000;
    654. }
    655.  
    656.  
    657.  
    658.  
    659.  
    660.  
    661. {
    662.     color: #920404;
    663. }
    664.  
    665.  
    666. LI.standard {
    667.  font-family: Verdana, Tahoma, Microsoft Sans Serif, Arial;
    668.  font-size: 1.3em;
    669.  display: inline;
    670.  width: 150em;
    671.  padding-left: 0px;
    672.  padding-right: 0px;
    673.  border-right: 5px dotted steelblue;
    674. }
    675.  
    676. LI.letztes {
    677.  font-family: Verdana, Tahoma, Microsoft Sans Serif, Arial;
    678.  font-size: 1.3em;
    679.  width: 150em;
    680.  display: inline;
    681.  padding-left: 10px;
    682.  padding-right: 6px;
    683. }
    684.  
    HTML Login Bereich:
    Hier sind die Tabellen auch verschoben:
    Code (Text):
    1.  
    2. <html>
    3. <head>
    4. <title>homepage</title>
    5. <link rel="stylesheet" type="text/css" href="CSS/style.css">
    6. </head>
    7. <body>
    8.  
    9. <div id="titel">
    10. <p>Login</p>
    11. </div>
    12. <div id="login">
    13.  
    14.  
    15. <form action="<?php print $PHP_SELF; ?>" method="POST" target="">
    16.  
    17. <div id="gifcaution">
    18. <img src="picture/key.gif">
    19. </div>
    20.  
    21. <p>Benutzername</p>
    22. <input type="Text" name="user" value="" size="" maxlength=""><br>
    23. <p>Passwort</p>
    24. <input type="Password" name="password" value="" size="" maxlength=""><br><br>
    25. <input type="Submit" name="login" value="Login">
    26. </form>
    27. </div>
    28.  
    29. </body>
    30. </html>
    Zuletzt bearbeitet: 30. August 2005
  4. AKrebs70

    AKrebs70 Gast

    Hallo!

    Ich sehe das Du einige größenangaben in em machst. Gebe die Angaben besser in Pixel an.

    Axel
  5. Dr_Google

    Dr_Google Grünschnabel

    Alles klar - ich versuche es mal.
    THX4HELP
  6. Apfelkuchen

    Apfelkuchen Grünschnabel

    hat das mit den pixeln funktioniert
  7. Dr_Google

    Dr_Google Grünschnabel

    den erhoften erfolg hat es leider doch nicht gebracht.
    hier der link zu meiner seite, bitte schaut es auch mal mit den firefox und den IE an. www .fun-page .de .vu
    Zuletzt bearbeitet: 31. August 2005
Status des Themas:
Es sind keine weiteren Antworten möglich.

Diese Seite empfehlen