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 Mitglied

    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 Mitglied

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

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

    Apfelkuchen Mitglied

    hat das mit den pixeln funktioniert
     
  7. Dr_Google

    Dr_Google Mitglied

    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