css menu probleem in ie
ik heb een css menu die werkt momenteel in chrome en mozilla. maar niet in internet explorer.
hierbij de css van het menu:
Code (php)
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
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
/*body {
font-family: Arial;
font-size: 14px;
text-shadow:0 1px 1px rgba(255,255,255,0.4);
color:#262626;
margin:0;
padding:0;
background:#141414;
}*/
.wrapper {
width:100%;
height:80px;
background:#464646;
background:-webkit-gradient(linear,left top,left bottom,from(rgb(168,168,168)),to(rgb(69,69,69)));
background:-moz-linear-gradient(top,rgb(168,168,168),rgb(69,69,69));
border-top:2px solid #939393;
position:relative;
margin-bottom:30px;
}
.title_right {
position:absolute;
right:20px;
top:10px;
font-size:18px;
text-transform:uppercase;
}
.title_left {
position:absolute;
left:25px;
top:-5px;
font-size:18px;
text-transform:uppercase;
}
.fl {
float:left;
}
.container {
width:960px;
margin:0 auto;
}
.menu {
height:80px;
border-left:1px solid rgba(0,0,0,0.3);
border-right:1px solid rgba(255,255,255,0.3);
float:left;
}
a {
text-decoration:none;
color:#363636;
text-transform:uppercase;
font-size:15px;
font-weight:bold;
}
ul {
margin:0;
padding:0;
}
ul.menu li {
list-style:none;
float:left;
height:79px;
text-align:center;
background:-webkit-gradient(radial,50% 100%,10,50% 50%,90,from(rgba(31,169,244,1)),to(rgba(0,28,78,1)));
background:-moz-radial-gradient(center 80px 45deg,circle cover,rgba(31,169,244,1) 0%,rgba(0,28,78,1) 100%);
}
ul li a {
display:block;
padding:0 20px;
border-left:1px solid rgba(255,255,255,0.1);
border-right:1px solid rgba(0,0,0,0.1);
text-align:center;
line-height:79px;
background:-webkit-gradient(linear,left top,left bottom,from(rgb(168,168,168)),to(rgb(69,69,69)));
background:-moz-linear-gradient(top,rgb(168,168,168),rgb(69,69,69));
-webkit-transition-property:background;
-webkit-transition-duration:700ms;
-moz-transition-property:background;
-moz-transition-duration:700ms;
}
ul li a:hover {
background:transparent none;
}
ul[rel=sam1] li a {
background:#606060;
}
ul[rel=sam1] li a:hover {
background:transparent none;
}
ul li.active a {
background:-webkit-gradient(radial,50% 100%,10,50% 50%,90,from(rgba(31,169,244,1)),to(rgba(0,28,78,1)));
background:-moz-radial-gradient(center 80px 45deg,circle cover,rgba(31,169,244,1) 0%,rgba(0,28,78,1) 100%);
}
.t {
text-decoration:none;
color:#363636;
text-transform:uppercase;
font-size:15px;
font-weight:bold;
}
font-family: Arial;
font-size: 14px;
text-shadow:0 1px 1px rgba(255,255,255,0.4);
color:#262626;
margin:0;
padding:0;
background:#141414;
}*/
.wrapper {
width:100%;
height:80px;
background:#464646;
background:-webkit-gradient(linear,left top,left bottom,from(rgb(168,168,168)),to(rgb(69,69,69)));
background:-moz-linear-gradient(top,rgb(168,168,168),rgb(69,69,69));
border-top:2px solid #939393;
position:relative;
margin-bottom:30px;
}
.title_right {
position:absolute;
right:20px;
top:10px;
font-size:18px;
text-transform:uppercase;
}
.title_left {
position:absolute;
left:25px;
top:-5px;
font-size:18px;
text-transform:uppercase;
}
.fl {
float:left;
}
.container {
width:960px;
margin:0 auto;
}
.menu {
height:80px;
border-left:1px solid rgba(0,0,0,0.3);
border-right:1px solid rgba(255,255,255,0.3);
float:left;
}
a {
text-decoration:none;
color:#363636;
text-transform:uppercase;
font-size:15px;
font-weight:bold;
}
ul {
margin:0;
padding:0;
}
ul.menu li {
list-style:none;
float:left;
height:79px;
text-align:center;
background:-webkit-gradient(radial,50% 100%,10,50% 50%,90,from(rgba(31,169,244,1)),to(rgba(0,28,78,1)));
background:-moz-radial-gradient(center 80px 45deg,circle cover,rgba(31,169,244,1) 0%,rgba(0,28,78,1) 100%);
}
ul li a {
display:block;
padding:0 20px;
border-left:1px solid rgba(255,255,255,0.1);
border-right:1px solid rgba(0,0,0,0.1);
text-align:center;
line-height:79px;
background:-webkit-gradient(linear,left top,left bottom,from(rgb(168,168,168)),to(rgb(69,69,69)));
background:-moz-linear-gradient(top,rgb(168,168,168),rgb(69,69,69));
-webkit-transition-property:background;
-webkit-transition-duration:700ms;
-moz-transition-property:background;
-moz-transition-duration:700ms;
}
ul li a:hover {
background:transparent none;
}
ul[rel=sam1] li a {
background:#606060;
}
ul[rel=sam1] li a:hover {
background:transparent none;
}
ul li.active a {
background:-webkit-gradient(radial,50% 100%,10,50% 50%,90,from(rgba(31,169,244,1)),to(rgba(0,28,78,1)));
background:-moz-radial-gradient(center 80px 45deg,circle cover,rgba(31,169,244,1) 0%,rgba(0,28,78,1) 100%);
}
.t {
text-decoration:none;
color:#363636;
text-transform:uppercase;
font-size:15px;
font-weight:bold;
}
wat hij doet:
hij toont de namen van de link,
ende hoofdlijntjes
wat ie niet doet:
uitlijnen op de goede plek
achtergrond kleur toepassen
werkend voorbeeld op www.widm-dehavik.nl (als je hem in chrome of firefox opzoekt dan krijg je hoe het moet.als je in ie kijkt zie je wat ik met de fouten bedoel
Even een opzet zoals een basis html pagina is opgemaakt:
Code (php)
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>Webshop</title>
</head>
<body>
<!-- hier de divjes e.d. --->
</body>
</html>
<head>
<meta charset="utf-8">
<title>Webshop</title>
</head>
<body>
<!-- hier de divjes e.d. --->
</body>
</html>
Dat gaven we in je andere topic ook aan maar je doet er niets mee....
maargoed als je niet wilt helpen dan weten we dat. PHPHULP staat tochheelduidelijk in de naam HULP ik heb een css probleempje in internet explorer. maar niemand die met een oplossing komt om die gebruikers tegemoet te kunnen komen
Je bent alleen veel te eigenwijs om iets aan te nemen.
Zorg nou eens eerst dat je code op orde is, anders kunnen we totaal geen goede hulp geven.
Maar goed, jij zit met een probleem wij niet.
Quote:
erwordt niet eens kenbaar gemaakt wat er fout kan zijn aan deze css code voor mijn cssmenu wat getoond
Dat heb ik nou al in 2 topics verteld: ZORG VOOR JUISTE HTML OPMAAK
Dan pas kun je gaan debuggen aan andere problemen.
Gewijzigd op 03/03/2013 15:30:05 door Bart V B
En zoals Bart V al zegt, fix je HTML. Divjes horen niet boven je HTML tag. En reageer aub normaal man, Bart probeert je te helpen. Als je iets wilt leren luister dan naar anderen.
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>Webshop</title>
</head>
<body>
<?php
// Hier kun je best PHP neerzetten...
echo 'Lorem ipsum dolor sit amet';
?>
</body>
</html>
<head>
<meta charset="utf-8">
<title>Webshop</title>
</head>
<body>
<?php
// Hier kun je best PHP neerzetten...
echo 'Lorem ipsum dolor sit amet';
?>
</body>
</html>
Christiaan de kleine op 03/03/2013 15:15:41:
omdat ik mijn menu in een php function heb staan. en ik geen php tags in mijn html deel neerzet!!!
maargoed als je niet wilt helpen dan weten we dat. PHPHULP staat tochheelduidelijk in de naam HULP ik heb een css probleempje in internet explorer. maar niemand die met een oplossing komt om die gebruikers tegemoet te kunnen komen
maargoed als je niet wilt helpen dan weten we dat. PHPHULP staat tochheelduidelijk in de naam HULP ik heb een css probleempje in internet explorer. maar niemand die met een oplossing komt om die gebruikers tegemoet te kunnen komen
CSS is min of meer een uitbreiding op HTML. De basis, je HTML dus, moet dan ook in orde zijn. Je kan in je CSS prutsen wat je wilt, maar als je HTML-code rammelt, zal je pagina er toch anders uitzien dan de bedoeling is.
Ik heb het daarnet even getest, en als je HTML wél in orde is, ziet je pagina er in IE anders uit (lees: het lijkt meer op wat andere browsers laten zien). Zorg er dus eerst eens voor dat je correcte HTML genereert voor je verder gaat zoeken in je CSS!
En zoals in een eerdere reactie al gezegd, IE heeft nog geen volledige ondersteuning van CSS, dus het zou zomaar kunnen dat je site er in IE nooit helemaal hetzelfde uit komt te zien als in andere browsers. Met name gradiënten worden niet ondersteund. Wil je dat toch in IE doen, dan kun je het best gaan werken met images.
Toevoeging op 03/03/2013 16:24:38:
Let trouwens op dat wanneer je je HTML gecorrigeerd hebt, je pagina er ook in andere browsers anders uit zal komen te zien. Dat komt, doordat dan de <!doctype> bovenaan staat, en dat forceert de browser om in strict mode te gaan werken in plaats van in quirks mode, waar je pagina zo te zien erg van afhankelijk is. Dat betekent dat je dus met een foute basis bent begonnen en nu extra werk moet gaan verzetten om de boel goed werkend te krijgen.
Gewijzigd op 03/03/2013 16:29:43 door Willem vp
maar waarom zou je geen php code in de html zetten het is een php bestand dus jij zet eigenlijk html in php daar is niks mis mee want de php code wort uitgevoerd voordat de client deze te zien kan krijgen en krijgt dus alleen maar html code die jij "echo"t in je bestand dus kan prima of je moet de rest van de pagina ook "echo"en dan heb je alleen maar php daar zou ik mee beginnen.
Gewijzigd op 04/03/2013 10:22:20 door Joey Drieling
Joey Drieling op 04/03/2013 10:18:58:
En als je php en html combineert is phtml de juiste extensie.
.phtml was vziw de standaard extensie voor PHP 2.x-programma's. Sinds PHP3 wordt voornamelijk gebruik gemaakt van .php (eventueel met een versienummer erachter)
Oplossing met images vind ik zelf veen optie. Dit omdat mijn menu zo nu en dan wisselt. Dan moet ik voor iedere optie een nieuwe image maken, en daarbij komend vind ik persoonlijk een image menu niet O mooi als een CSS menu
Toevoeging op 04/03/2013 14:05:22:
Even komend op de CSS. Dit is van een tutorial site waar deze gewoon word aanve oden om te gebruiken. Maar wat msoet ik aanpassen of erbij zetten in de CSS code om het menu te positioneren in ie. Daarbij rekening houdend dat in chrome en Firefox e.d. geen wijzigigdn mogen komen.
Oplossing met images vind ik zelf veen optie. Dit omdat mijn menu zo nu en dan wisselt. Dan moet ik voor iedere optie een nieuwe image maken, en daarbij komend vind ik persoonlijk een image menu niet O mooi als een CSS menu
Toevoeging op 04/03/2013 14:10:04:
Even komend op de CSS. Dit is van een tutorial site waar deze gewoon word aanve oden om te gebruiken. Maar wat msoet ik aanpassen of erbij zetten in de CSS code om het menu te positioneren in ie. Daarbij rekening houdend dat in chrome en Firefox e.d. geen wijzigigdn mogen komen.
Oplossing met images vind ik zelf veen optie. Dit omdat mijn menu zo nu en dan wisselt. Dan moet ik voor iedere optie een nieuwe image maken, en daarbij komend vind ik persoonlijk een image menu niet O mooi als een CSS menu
Quote:
En als je php en html combineert is phtml de juiste extensie.
Het is misschien wat offtopic, maar die extentie maakt niet uit.
Ken er bij die hebben er plp van gemaakt, en zo nog wat erotischer.
Met een beetje apache voodoo kom je al een heel eind. :)
Toevoeging op 04/03/2013 14:53:26:
Ps het menu lijnt ook niet goed uit in mijn Chrome en Firefox.
