tutorials.de Buch-Aktion 05/2012
ERLEDIGT
JA
ANTWORTEN
2
ZUGRIFFE
167
EMPFEHLEN
  • An Twitter übertragen
  • An Facebook übertragen
AUF DIESES THEMA
ANTWORTEN
  1. 03.08.10 09:51 #1
    aminox aminox ist offline Mitglied
    Registriert seit
    Jul 2010
    Beiträge
    15
    Hallo,

    ich habe heute folgende Spezialität:
    Ein Menü wird über LI-Elemente gelöst, soweit kein Thema. Die LI-Elemente bekommen eine hover Backgroundfarbe, so dass sie eine Linie schließen.
    Es klappt in allen Browsern. FF3.6.8 (Win), IE8, Safari (mac). Allerdings habe ich eine unterschiedliche Darstellung im FF3.6.8 (Mac) und auf dem iPhone.
    Da verrutschen die Hintergrundlinien oder die LI-Elemente.

    Kann mir jemand verraten, woran es liegt?
    Im Anhang befinden sich zwei Screens. Einmal wie es sein sollte, und einmal wie es stellenweise ist.

    CSS:
    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
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161

    .navigation {
    width:                  100%;
    height:                 auto;
    position:               relative;
    background-color:       #FFF;
    padding-top:            10px;
    padding-bottom:         15px;
}
 
.navigation_back_line_element1 {
    position:               absolute;
    top:                    140px;
    width:                  100%;
    height:                 13px;
    background-color:       #29a9e1;
}
 
.navigation_back_line_element2 {
    position:               absolute;
    top:                    163px;
    width:                  100%;
    height:                 13px;
    background-color:       #72be44;
}
 
.navigation_back_line_element3 {
    position:               absolute;
    top:                    186px;
    width:                  100%;
    height:                 13px;
    background-color:       #f6921e;
}
 
.navigation_back_line_element4 {
    position:               absolute;
    top:                    209px;
    width:                  100%;
    height:                 13px;
    background-color:       #d82989;
}
 
.navigation_back_line_element5 {
    position:               absolute;
    top:                    232px;
    width:                  100%;
    height:                 13px;
    background-color:       #6850a0;
}
 
.navigation ul {
    list-style:             none;
}
 
.navigation ul li {
    margin-top:             10px;
    width:                  760px;
    padding-left:           40px;
    font-size:              11px;
}
 
.navigation ul li a {
    text-decoration:        none;
}
 
.navigation ul li a:hover {
    color:                  #FFF;
}
 
.navigation ul li .element1 {
    color:                  #29a9e1;
}
 
.navigation ul .li1:hover {
    background-color:       #29a9e1;
    color:                  #FFF;
}
 
.navigation ul .li1Selected {
    background-color:       #29a9e1;
    color:                  #FFF;
}
 
.navigation ul li .aSelected {
    color:                  #FFF;
}
 
.navigation ul .li1:hover .element1 {
    color:                  #FFF;
}
 
.navigation ul li .element2 {
    color:                  #72be44;
}
 
.navigation ul .li2:hover {
    background-color:       #72be44;
    color:                  #FFF;
}
 
.navigation ul .li2Selected {
    background-color:       #72be44;
    color:                  #FFF;
}
 
.navigation ul .li2:hover .element2 {
    color:                  #FFF;
}
 
.navigation ul li .element3 {
    color:                  #f6921e;
}
 
.navigation ul .li3:hover {
    background-color:       #f6921e;
    color:                  #FFF;
}
 
.navigation ul .li3Selected {
    background-color:       #f6921e;
    color:                  #FFF;
}
 
.navigation ul .li3:hover .element3 {
    color:                  #FFF;
}
 
.navigation ul li .element4 {
    color:                  #d82989;
}
 
.navigation ul .li4:hover {
    background-color:       #d82989;
    color:                  #FFF;
}
 
.navigation ul .li4Selected {
    background-color:       #d82989;
    color:                  #FFF;
}
 
.navigation ul .li4:hover .element4 {
    color:                  #FFF;
}
 
.navigation ul li .element5 {
    color:                  #6850a0;
}
 
.navigation ul .li5:hover {
    background-color:       #6850a0;
    color:                  #FFF;
}
 
.navigation ul .li5Selected {
    background-color:       #6850a0;
    color:                  #FFF;
}
 
.navigation ul .li5:hover .element5 {
    color:                  #FFF;
}
    Miniaturansicht angehängter Grafiken Miniaturansicht angehängter Grafiken Unterschiedliche Darstellung?-bild1.png   Unterschiedliche Darstellung?-bild2.png  

    Geändert von aminox (03.08.10 um 09:54 Uhr)
     
    Zitieren Zitieren
  2. 04.08.10 04:29 #2
    Avatar von Sven Mintel
    Sven Mintel Sven Mintel ist offline Mitglied
    Registriert seit
    Aug 2003
    Beiträge
    18.238
    Blog-Einträge
    6
    Moin,

    ich würde mal folgendes vermuten:
    Du hast den <li> ja ein margin-top gegeben, jedoch kein margin-bottom, überlässt dies also den Standard-Werten des Clienten, welche bei den Problem-Browsern evtl. anders sind, als bei den anderen, was diese Verschiebung verursachen könnte.

    Also: lege auch margin-bottom für die <li> fest, optimalerweise auch Werte für padding-top und padding-bottom, evtl. sogar line-height, musst halt schauen, was Wirkung zeigt.
     
    Zitieren Zitieren
  3. 05.08.10 10:08 #3
    aminox aminox ist offline Mitglied
    Registriert seit
    Jul 2010
    Beiträge
    15
    Jo das wars wohl Danke!
     
    Zitieren Zitieren
« Auto-Expandable Box | Schattengrafik an eine größen-dynamische Box anbringen »

Ähnliche Themen

  1. Unterschiedliche Darstellung bei Chrome Mac und Win
    Von Sprint im Forum CSS
    Antworten: 6
    Letzter Beitrag: 14.07.10, 12:06
  2. Unterschiedliche Darstellung IE5.5/6/7 vs. FF3/IE8
    Von cocoon im Forum CSS
    Antworten: 6
    Letzter Beitrag: 12.06.09, 23:48
  3. Unterschiedliche Darstellung wieso?
    Von rethus im Forum CSS
    Antworten: 2
    Letzter Beitrag: 09.10.08, 18:16
  4. unterschiedliche Browser Darstellung
    Von renard im Forum HTML & XHTML
    Antworten: 3
    Letzter Beitrag: 21.04.05, 22:30
  5. unterschiedliche Darstellung
    Von Sascha im Forum Photoshop
    Antworten: 18
    Letzter Beitrag: 01.08.01, 19:37