tutorials.de Buch-Aktion 05/2012
ERLEDIGT
JA
ANTWORTEN
3
ZUGRIFFE
167
EMPFEHLEN
  • An Twitter übertragen
  • An Facebook übertragen
DIESES THEMA IST
GESCHLOSSEN
  1. 12.08.08 12:07 #1
    jackisback jackisback ist offline Mitglied Gold
    Registriert seit
    Jul 2007
    Beiträge
    100
    Hallo,
    Bin grade dabei mich in CSS fit zu machen und habe folgendes Layout versucht zu bauen.
    Dabei macht der IE alles richtig aber im Firefox will es nicht so richtig.
    Hier mal in die Bilder schauen damit man den Unterschied erkennt.

    Es ist klar zu sehen dass das padding rechts im Firefox nicht beachtet wird und der Schwarze Balken bis an den Rand geht.


    Code :
    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90

     
<html>
 
<head>
<meta http-equiv="Content-Language" content="de">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Neue Seite 1</title>
 
<style type="text/css" media="screen"><!--
 
 
/*  body und schrift deffinitionen */
 
html { 
  padding:0px;
  margin:0px;
}
 
body {
  background-color: #ECEDFF;
  font-size: 12px;
  font-family: Verdana, Arial, SunSans-Regular, Sans-Serif;
  color:#564B47;  
  margin:0px; 
  padding:0px 20px 0px 20px; 
}
 
#logo { 
  padding:0px;
  margin:0px; 
  width:100%; 
  height:80;
  background-color: #FFFFFF; background-image:url('images/headerbg.jpg'); background-repeat:repeat-x
}
 
#center{
  background-color: #0066FF;
 
}
 
#content{
  padding: 10px;
  margin:  0px 5px 0px 5px; 
  width:100%; 
  height:80;
  background-color: #000000;
}
 
#footer{
  padding: 0px;
  margin:  0px 5px 0px 5px; 
  width:100%; 
  height:20;
  background-color: #FFFFFF;
}
 
#bottom{
  padding: 0px;
  margin:  0px; 
  width:100%; 
  height:10;
  background-color: #FFFFFF;
}
 
 
--></style>
 
 
</head>
 
<body>
 
<div id="center">
<div  id="logo">
 
</div>
<div  id="content">
 
</div>
<div  id="footer">
 
</div>
<div  id="bottom">
 
</div>
</div>
 
</body>
 
</html>
    Miniaturansicht angehängter Grafiken Miniaturansicht angehängter Grafiken Layout problem mit Browsern...-ie7.jpg   Layout problem mit Browsern...-firefox.jpg  

     
  2. 12.08.08 12:11 #2
    Maik Tutorials.de Gastzugang
    Hi,

    entgegen deiner Aussage, dass der IE hier alles richtig anzeigt, muß ich dich leider enttäuschen, denn Firefox (und alle übrigen Nicht-IE-Browser) interpretiert im Quirksmode-Darstellungsmodus das CSS-Boxmodell korrekt, der IE hingegen nicht.

    Desweiteren solltest du dir angewöhnen, die Einheit bei Werten, die größer oder kleiner als null sind, mit anzugeben - in deinem Stylesheet betrifft dies die height-Deklarationen -, denn beim Wechsel in den standardkonformen Darstellungsmodus führt dies ansonsten zu fehlerhaften Darstellungen in den Browsern.

    mfg Maik
     
  3. 12.08.08 12:47 #3
    jackisback jackisback ist offline Mitglied Gold
    Registriert seit
    Jul 2007
    Beiträge
    100
    Danke für deine Kritik.
    Ein hinweis wie "nimm beim #content element einfach das width:100% raus" hätte auch geholfen.
     
  4. 12.08.08 13:01 #4
    Maik Tutorials.de Gastzugang
    Aktives Lesen eines empfohlenen Artikels und mitdenken soll den "Gehirnschmalz" bekanntermaßen stärken

    mfg Maik
     
« Rahmen um Objekt | IE6 rollt den Background weg »

Ähnliche Themen

  1. Problem mit versch. Browsern
    Von JBJHJM im Forum HTML & XHTML
    Antworten: 3
    Letzter Beitrag: 06.10.10, 15:41
  2. Layout-Probleme mit versch. Browsern
    Von marcoX im Forum HTML & XHTML
    Antworten: 4
    Letzter Beitrag: 19.04.06, 08:55
  3. Problem bei verschiedenen Browsern
    Von LoMo im Forum Javascript & Ajax
    Antworten: 10
    Letzter Beitrag: 06.03.06, 14:19
  4. Mit welchen Browsern Layout testen?
    Von Don Stefano im Forum CSS
    Antworten: 11
    Letzter Beitrag: 01.08.05, 21:41
  5. table-layout:fixed in verschiedenen Browsern
    Von Xaicon im Forum CSS
    Antworten: 3
    Letzter Beitrag: 25.10.04, 13:47