tutorials.de Buch-Aktion 05/2012
ERLEDIGT
JA
ANTWORTEN
9
ZUGRIFFE
363
EMPFEHLEN
  • An Twitter übertragen
  • An Facebook übertragen
AUF DIESES THEMA
ANTWORTEN
  1. 31.10.08 12:05 #1
    Philipp- Tutorials.de Gastzugang
    Hallo Community,

    ich verzweifle langsam echt an dem Internet Explorer 6.
    Habe mal wieder ein Problem, Internet Explorer 7 und Firefox gehen immer bestens, Internet Explorer 6 manchmal auch, aber nicht immer geht alles dann.

    Auf dieser Seite, seht ihr Rechts die Boxen für Suche und Bewertung. Im Firefox und Internet Explorer 7 sind diese an der richtigen Stelle. beim Internet Explorer 6 werden diese nach unten geschoben. Wenn ich versuche das ganze mit z.B. margin-top:-150px; nach oben zu bekommen, gehen die zwei Boxen nach oben, jedoch werden sie dann komischer Weiße nicht mehr angezeigt. Ich hab schon alles ausprobiert, jedoch komm ich einfach nicht mehr weiter.
    Wäre echt lieb wenn ihr mir helfen könntet.

    So nun hier der Link zu der Seite:
    http://clients.hingucker.info/heinkel/

    Der HTML - Code für den Header Bereich mit den Boxen:
    HTML-Code:
    <div id="header">
    	<div id="headerLeft">
        	<div id="logo">
            	<a href="#"><img src="images/logo.png" alt="" /></a>
            </div>
            <div id="leiste">
                <div id="leisteLeft">
                    <div id="leisteRight">
                    	<div id="shortMenu">
                        	<ul>
                            	<li><a href="#">Ihr Konto</a></li>
                                <li><a href="#">Warenkorb</a></li>
                                <li id="shortMenuLast"><a href="#">Kasse</a></li>
                            </ul>
                        </div>
                        <div id="login">
                        	<form action="" method="post">
                            	<a id="lostPassword" href="#">Password vergessen?</a>
                            	<input name="submit" type="submit" id="loginButton" value="Anmelden" />
							  <input name="" type="text" /> <input name="" type="password" />
                            </form>
                        </div>
                    </div>
                </div>
            </div>            
         </div>
        <div id="headerRight">
        	<div id="search">
            	<form action="" method="post">
                 <input type="text" id="searchInput" value="Ihre Suchanfrage ..." />
                 <input id="searchButton" name="submit" type="submit" value="Suchen" />
                </form>
                <p><a href="#">&raquo; Erweiterte Suche</a></p>
            </div>
        	<div id="bewertung"></div>        
        </div>
    </div>
    Der CSS - Code für den Bereich:
    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
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
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135

    #header {
    clear:both;
    width:100%;
    height:234px;
    }
 
#header #headerLeft {
    float:left;
    width:653px;
    }
    
#logo {
    height:177px;
    }
    
#leiste {
    background:url(images/leisteBg.png) repeat-x;
    height:57px;
    }
    
#leisteLeft {
    background:url(images/leisteLeft.png) no-repeat left;
    height:57px;
    }
    
#leisteRight {
    background:url(images/leisteRight.png) no-repeat right;
    height:57px;
    }
 
#shortMenu {
    display:table-cell;
    padding:0 20px 0 0;
    }
    
#shortMenu ul {
    margin:0;
    padding:0;
    }
 
#shortMenu ul li {
    list-style:none;
    float:left;
    padding:0 10px 0 10px;
    margin:0;
    border-right:1px solid #fff;
    }   
    
#shortMenu ul li#shortMenuLast {
    border-right:none;
    }
    
#shortMenu ul li a {
    color:#fff;
    font-size:12px;
    }
    
#login {
    display:table-cell;
    }
    
#lostPassword {
    background:url(images/lostPassword.png) no-repeat;
    height:20px;
    width:137px;
    position:absolute;
    margin:-32px 0 0 10px;
    color:#fff;
    font-size:12px;
    text-align:center;
    padding:3px 0 0 0;
    }
    
#login form {
    margin:19px 0 0 0 !important;
    }
    
#loginButton {
    background:url(images/loginButton.png) no-repeat;
    height:23px;
    width:95px;
    color:#fff;
    font-size:12px;
    border:none;
    padding:0;
    position:absolute;
    margin:-32px 0 0 152px;
    }
        
#header #headerRight {
    float:right;
    width:354px;
    }
    
#search {
    background:url(images/sucheBg.png) no-repeat;
    height:117px;
    width:354px;
    }
    
#search p {
    padding:0 0 0 15px;
    margin:7px 0 0 0;
    }
        
#search p a {
    font-weight:bold;
    color:#dceab5;
    font-size:12px;
    }   
 
#search form {
    padding:16px 0 0 0;
    }
    
 
#searchInput {
    background:transparent !important;
    width:262px;
    border:none;
    font-weight:bold;
    color:#fff;
    padding:6px 0 0 18px;
    }
 
#searchButton {
    position:absolute;
    width:74px;
    }
    
#bewertung {
    background:url(images/bewertungBg.png) no-repeat;
    height:117px;
    width:354px;
    }

    und zu guter letzt mein bisheriger Internet Explorer 6 Fix:
    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

    /* IE 6 Fix */
 
#shortMenu {
    margin:17px 30px 0 0;
    }
    
#logo {
    overflow:hidden;
    }
    
#search {
    margin-top:-150px;
    overflow:hidden;
    }
 
#searchButton {
    margin:0 0 0 -5px;
    }
    
#search p {
    margin:-10px 0 0 0;
    }
    
#mainMenuRight ul li a {
    display:inline;
    }

    Freu mich über Vorschläge, bzw. Lösungen.
    Mit freundlichen Grüßen
    Philipp
     
    Zitieren Zitieren
  2. 31.10.08 12:20 #2
    Maik Tutorials.de Gastzugang
    Hi,

    wandel mal im Stylesheet style.css die fixe Breitenangabe für #search in eine relative um:

    Code :
    1
2
3
4
5

    #search {
        background:url(images/sucheBg.png) no-repeat;
        height:117px;
        [b]width:100%;[/b]
        }
    oder entferne sie gänzlich aus der Regel, da ein Blockelement diese Eigenschaft von Hause aus mitbringt, solange es nicht durch eine absolute Positionierung oder eine float-Deklaration aus dem normalen Textfluß genommem wird.

    Somit ist dann auch die margin-top:-150px-Deklaration für #search im IE6-Stylesheet hinfällig.

    mfg Maik
     
    Zitieren Zitieren
  3. 31.10.08 12:30 #3
    Philipp- Tutorials.de Gastzugang
    Danke hat funktioniert. Kannst du mir noch vielleicht sagen, warum im Internet Explorer 6 der Hover Effekt im Hauptmenü nicht funktioniert?

    Schonmal danke.
    Mit freundlichen Grüßen
    Philipp
     
    Zitieren Zitieren
  4. 31.10.08 12:39 #4
    Maik Tutorials.de Gastzugang
    Die angewandte allg. li:hover-Pseudoklasse wird bekanntermaßen erst vom IE7 interpretiert, seine Vorgängerversionen unterstützen dagegen diese Pseudoklasse nur für Links, also a:hover - siehe die Hinweise zur Browserunterstützung der Pseudoklasse :hover.

    Beim zweiten Hintergrundbildaufruf im a:hover-Selektor erwarten die älteren IEs eine Deklaration, die das Inline-Element mit "Block-Level-Charakteristika" ausstattet - also float:left wegen ihrer horizontalen Ausrichtung.

    mfg Maik
     
    Zitieren Zitieren
  5. 01.11.08 14:35 #5
    Philipp- Tutorials.de Gastzugang
    Dankeschön. Werd mal schauen wie ich das mache.
     
    Zitieren Zitieren
  6. 09.11.08 12:46 #6
    Maik Tutorials.de Gastzugang
    Zitat Zitat von PhilippBosshart Beitrag anzeigen
    Dankeschön. Werd mal schauen wie ich das mache.
    Hi,

    warum vereinst du nicht einfach die beiden Hover-Bilder (mainMenuHover.png & aHover.png) für das li- und a-Element in einem einzigen Hintergrundbild und rufst es entsprechend im Selektor #mainMenuRight ul li a:hover auf?

    Selbstverständlich kannst du diese Technik auch parallel zur Bestehenden einsetzen, und sie über eine CSS-Browserweiche mit Hilfe eines entsprechenden "Conditional Comments" lediglich auf die älteren IEs anwenden.

    mfg Maik
     
    Zitieren Zitieren
  7. 09.11.08 16:51 #7
    Philipp- Tutorials.de Gastzugang
    Weil ich nicht weiß, wie ich es machen muss, dass sich dann der Grüne Teil hinten trotzdem wiederholt, und dass der Schwarze "Pfeil" genau in der Mitte ist.
     
    Zitieren Zitieren
  8. 09.11.08 19:00 #8
    Maik Tutorials.de Gastzugang
    Ich hab da mal was vorbereitet

    style.css:

    Code :
    1
2
3
4
5
6
7
8
9
10
11
12
13
14

    #mainMenuRight ul li a {
        font-size:12px;
        font-weight:bold;
        color:#fff;
        height:36px;
        [B]float:left;[/B]
        padding:12px 10px 0 10px;
 
        }
 
#mainMenuRight ul li a:hover {
        background:url(images/aHover.png) no-repeat center top;
        [B]float:left;[/B]
        }

    ie6.css:

    Code :
    1
2
3

    #mainMenuRight ul li a:hover {
        background:url(images/Hover.png) no-repeat center top;
        }

    Und die neue Grafik "Hover.png", die ich hier "großzügigerweise" mal mit der Dimension 150*48px erstellt habe:

    Name: Hover.png Hits: 18 Größe: 446 Bytes

    Die "Überlänge" der Grafik, die bei den unterschiedlichen Breiten der Links entsteht, ist aber nicht zu sehen

    Da beim Upload die Grafikdatei vom Forensystem auf 140*40px runterskaliert wird , häng ich sie hier nochmal gesondert als ZIP-File an

    mfg Maik
    Angehängte Dateien Angehängte Dateien
     
    Zitieren Zitieren
  9. 09.11.08 22:03 #9
    Philipp- Tutorials.de Gastzugang
    Hey dankeschön.
    Werde das mal ausprobieren und schauen ob das ganze klappt. Schonmal vielen vielen Danke.

    Mit freundlichen Grüßen
    Philipp
     
    Zitieren Zitieren
  10. 09.11.08 22:05 #10
    Maik Tutorials.de Gastzugang
    Zitat Zitat von PhilippBosshart Beitrag anzeigen
    Hey dankeschön.
    Werde das mal ausprobieren und schauen ob das ganze klappt. Schonmal vielen vielen Danke.
    Mach das ruhig - bei mir hat's auf Anhieb reibungslos funktioniert

    Bitte, ist gern geschehen

    mfg Maik
     
    Zitieren Zitieren
« Die Schriftart vom server verwenden? geht das? | Menü klappt nicht ein bei IE 7 »

Ähnliche Themen

  1. Scanner macht nicht das was er soll
    Von fredlllll im Forum Hardware
    Antworten: 2
    Letzter Beitrag: 01.02.10, 20:14
  2. MyTableModel macht nicht was es soll
    Von Iroque im Forum Swing, Java2D/3D, SWT, JFace
    Antworten: 12
    Letzter Beitrag: 06.05.08, 14:54
  3. text macht nicht was er soll ...
    Von acidwarrior im Forum Flash Plattform
    Antworten: 4
    Letzter Beitrag: 13.06.06, 13:41
  4. USB macht was es will - nicht was es soll !
    Von Tiefschneetaucher im Forum Microsoft Windows
    Antworten: 10
    Letzter Beitrag: 10.01.06, 18:32
  5. getElementsByName macht nicht was es soll
    Von fager im Forum Javascript & Ajax
    Antworten: 15
    Letzter Beitrag: 26.11.04, 16:47