tutorials.de Buch-Aktion 05/2012
ERLEDIGT
NEIN
ANTWORTEN
1
ZUGRIFFE
636
EMPFEHLEN
  • An Twitter übertragen
  • An Facebook übertragen
AUF DIESES THEMA
ANTWORTEN
  1. 12.06.10 00:26 #1
    tkliesch tkliesch ist offline Grünschnabel
    Registriert seit
    Jun 2010
    Beiträge
    1
    Hi,

    ich habe folgendes Problem:
    Ich habe eine HTML Seite und ein CSS dafür. In dem CSS habe ich ein div "content_left" und ein div "Content right". Content right floated, so dass ich beide nebeneinander habe. Durch Margin attribute habe ich beide so ausgerichtet, dass sie oben unter dem div "title" bündig erscheinen. Wenn ich mir die Seite mit IE8 anschaue, passt das auch. In IE7 und IE6 aber ist der div container content_left nach unten verschoben, so dass div "content_right" weiter oben auf der Seite beginnt als div "content_left". Hier ist der Quelltext des CSS und der entsprechende Ausschnitt aus dem HTML File (etwas vereinfacht. D.h ich habe Textblöcke im HTML weggelassen, die in den Divs noch stehen) . Hat irgendwer eine Idee woran das liegen könnte?

    CSS-File Auszug:
    Code css:
    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
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117

    @charset "windows-1252"; 
 
body 
{
 
background-color:#F3FBFA;
 
}
 
#Inhalt
{
width:900px; 
margin-left:auto;
margin-right:auto;
 
}
 
h1 {font-size:150%;color:#black;margin:0px;}
h2 {font-size:120%;color:#black;}
h3 {font-size:medium;color:#black;}
p {margin-top:0px;}
 
 
 
 
#Footer {
width:860px;
height:0px;
padding: 0px 0px 0px 0px;
margin:0px 0px 0px 0px;
text-align:center;
font-size:12px; 
font-family:Verdana; 
background-color:#F3FBFA;
color:black; 
}
 
#Logo {
width:90px;
height:65px;
margin: 0px 20px 0px 0px; 
background-color:#DEDEDE;
float:right;
}
 
#Block {
width:780px;
height:65px; 
padding: 15px 0px 10px 0px;
margin:0px 0px 0px 20px;
text-align:center;
font-size:40px; 
font-family:Verdana; 
background-color:#808080;
color:silver; 
 
}
 
 
#title {
width:860px;
height:161px;
padding:0px 0px 0px 0px;
margin:0px 20px 0px 0px;
text-align:right;
float: right; 
background-color:#4B4B4B;
}
 
 
#menu {
width: 860px;
background-color:#576061;
text-align:left;
padding:12px 0px;
margin:0px 20px 0px 20px;
font-weight:bold;
font-size:16px; 
 
}
 
#content_left {
background-color:#D9F3F0;
padding-top:20px; 
padding-right:20px;
padding-bottom:250px;
padding-left:30px;
 
margin-top:213px; 
margin-right:335px;
margin-bottom:5px;
margin-left:20px;
color:#black;
font-family:Helvetica;
font-size:15px;
height:200px; 
} 
 
#content_right {
width: 275px;
height: 200px;
background-color:#FFFFFF; 
text-align: left;
padding-top:20px; 
padding-right:25px;
padding-bottom:250px;
padding-left:5px;
 
margin-top:10px; 
margin-right:20px;
margin-bottom:5px;
margin-left:30px;
color:#4a4d18;
float:right;
font-family:Helvetica;
font-size:14px; 
}



    HTML-File Auszug:
    HTML-Code:
    <div id="content_right">
<img src="Sprechstunde_IIIa.jpg" alt="Sprechstunde">
</div>

<div id="content_left">
<h2>Willkommen auf meiner Seite</h2>
</div>
<p><br>
    Geändert von Maik (12.06.10 um 00:28 Uhr) Grund: Quellcode in Syntax-Highlighter eingefügt
     
    Zitieren Zitieren
  2. 12.06.10 00:44 #2
    Maik Tutorials.de Gastzugang
    Hi,

    wenn die Seitendarstellung im IE8 und den anderen standardkonformen Browsern (FF, Opera, Safari, Google-Chrome, u.ä.) soweit stimmt, die bei mir der margin-top:213px-Regel für #content_left folgend, beide Boxen nebeneinander nach unten versetzen, IE6 und IE7 hingegen aber den rechten Block gemäß seiner margin-top:10px-Regel zum oben Fensterrand hin ausrichten, leg für sie ein gesondertes CSS mit der entsprechenden margin-top-Regel an, das du ihnen per "Conditional Comment" übergibst. Mit dem Operator "lt" (= less-than = kleiner als) wird IE8 von dieser CSS-Formatierung ausgeschlossen.

    Code :
    1
2
3
4

    <link href="..." rel="stylesheet"  type="text/css">
[B]<!--[if lt IE 8]>
    <style type="text/css">#content_right { margin-top:213px; }</style>
<![endif]-->[/B]


    Andernfalls wäre es hier eine Überlegung wert, die beiden Blöcke in einen übergeordneten DIV-Block einzubetten, um stattdessen für ihn den gewünschten oberen Außenabstand festzulegen. Auf diese Weise kommen die beiden Browser nämlich erst garnicht in Versuchung, den beiden diskrepanten margin-top-Regeln Folge zu leisten, denn genau das geschieht derzeit mit deinem CSS, und hat die vertikale Verschiebung der beiden Boxen zueinander zur Folge.

    HTML-Code:
    <div id="content_wrap">
     <div id="content_right">
          <img src="Sprechstunde_IIIa.jpg" alt="Sprechstunde">
     </div>

     <div id="content_left">
          <h2>Willkommen auf meiner Seite</h2>
     </div>
</div>
    Code css:
    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

    #content_wrap {
margin-top:213px;
}
 
#content_left {
background-color:#D9F3F0;
padding-top:20px;
padding-right:20px;
padding-bottom:250px;
padding-left:30px;
 
margin-right:335px;
margin-bottom:5px;
margin-left:20px;
color:#black;
font-family:Helvetica;
font-size:15px;
height:200px;
}
 
#content_right {
width: 275px;
height: 200px;
background-color:#FFFFFF;
text-align: left;
padding-top:20px;
padding-right:25px;
padding-bottom:250px;
padding-left:5px;
 
margin-right:20px;
margin-bottom:5px;
margin-left:30px;
color:#4a4d18;
float:right;
font-family:Helvetica;
font-size:14px;
display:inline;
}


    mfg Maik
     
    Zitieren Zitieren
« Submenü blendet direkt wieder aus in Firefox | Beim Überschreiben reagiert es nicht mehr »

Ähnliche Themen

  1. zentrieren, aber etwas verschoben...
    Von JBJHJM im Forum CSS
    Antworten: 4
    Letzter Beitrag: 24.08.10, 21:37
  2. CSS-Container nach unten verschoben
    Von OkaminoChizu im Forum CSS
    Antworten: 3
    Letzter Beitrag: 16.05.10, 16:54
  3. Div Container sind verschoben
    Von 2Pac im Forum CSS
    Antworten: 15
    Letzter Beitrag: 05.12.09, 11:00
  4. <input> verschoben, warum?
    Von Igäl im Forum CSS
    Antworten: 6
    Letzter Beitrag: 12.12.08, 09:13
  5. Links in Div Container, mouseover
    Von chirp im Forum CSS
    Antworten: 2
    Letzter Beitrag: 25.11.07, 21:29