Virusscanner tips?
Verschillende CSS per browser
Ik moet een site wat vernieuwen en er zit een lelijke lijn in een menu, als ik die aanpas dan ziet het er mooi uit in Chrome, maar weer niet in Firefox en IE, als ik ze voor FF en IE aanpas dan ziet het er weer niet uit in chrome.
Weet iemand hoe je per browser CSS kan aanroepen?
Hopelijk kan het redelijk simpel, zonder JS truuks ofzo.
Als je je website en (relevante) css-code hier plaatst is er wellicht iemand die een oplossing weet die in beide browsers goed werkt.
Ik loop tegen die lijn als als ik margin-left: 1px; zet in Chrome, haal ik dat weg dan is die lijn er in FF en IE.
Om je vraag alsnog te beantwoorden zul je iets krijgen als
Code (php)
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
<!--[if lt IE 7]>
<link rel="stylesheet" href="ie6.css">
<![endif]-->
<!--[if lte IE 7]>
<link rel="stylesheet" href="ie7.css">
<![endif]-->
<!--[if gte IE 8]>
<link rel="stylesheet" href="ie8.css">
<![endif]-->
<link rel="stylesheet" href="ie6.css">
<![endif]-->
<!--[if lte IE 7]>
<link rel="stylesheet" href="ie7.css">
<![endif]-->
<!--[if gte IE 8]>
<link rel="stylesheet" href="ie8.css">
<![endif]-->
"lt, lte, gte, gt stand for "less than", "less than or equal", "greater than or equal", and "greater than", respectively."
Hier een stuk (S)CSS
Als ik in de header en het menu die margin toevoeg dan ziet het er goed uit in FF en IE, haal ik hem weg dan werkt het weer in Chrome.
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
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
#header {
float: left;
width: 980px;
height: 168px;
#link {
float: left;
width: 350px;
height: 168px;
background: url(../../assets/centipede_header_link.jpg) no-repeat;
span {
display: none;
}
}
#normal {
float: left;
width: 630px;
height: 168px;
margin-left:-1px;
border-right:1px solid $light-blue;
background: url(plaatje) $light-blue no-repeat;
}
}
#menu {
float: left;
width: 980px;
height: 50px;
background: $red;
color: $white;
font-weight: bold;
}
#nav {
height:50px;
padding: 0px;
list-style: none;
ul {
}
.left {
border-left: 2px solid $white;
}
.right {
border-right: 2px solid $white;
}
a {
font-size:14px;
text-decoration: none;
text-align: center;
font-weight: bold;
color: $white;
display: block;
width: 100%;
&:hover {
background-color: $blue;
}
&.active {
background-color: $blue;
text-decoration: none;
text-align: center;
font-weight: bold;
color: $white;
display: block;
width: 100%;
height:50px;
}
}
li {
float: left;
line-height: 50px;
width: 198px;
&.topside {
line-height: 50px;
text-align: center;
float: left;
width: 189px;
}
ul {
position: absolute;
left: -999em;
width: 196px;
margin-left: -2px;
padding-right: 2px;
border-left: 2px solid $red;
border-top: 0px;
border-right: 2px solid $red;
border-bottom: 2px solid $red;
padding-bottom: 0px;
background-color: $white;
a{
text-decoration: none;
font-weight: bold;
text-align: left;
color: $dark-blue;
display: block;
padding-left: 40px;
padding-top: 10px;
padding-bottom: 10px;
width: 157px;
line-height: 15px;
height: auto;
&:hover {
background: url(plaatje) no-repeat left;
background-color: $light-blue;
}
}
}
}
}
float: left;
width: 980px;
height: 168px;
#link {
float: left;
width: 350px;
height: 168px;
background: url(../../assets/centipede_header_link.jpg) no-repeat;
span {
display: none;
}
}
#normal {
float: left;
width: 630px;
height: 168px;
margin-left:-1px;
border-right:1px solid $light-blue;
background: url(plaatje) $light-blue no-repeat;
}
}
#menu {
float: left;
width: 980px;
height: 50px;
background: $red;
color: $white;
font-weight: bold;
}
#nav {
height:50px;
padding: 0px;
list-style: none;
ul {
}
.left {
border-left: 2px solid $white;
}
.right {
border-right: 2px solid $white;
}
a {
font-size:14px;
text-decoration: none;
text-align: center;
font-weight: bold;
color: $white;
display: block;
width: 100%;
&:hover {
background-color: $blue;
}
&.active {
background-color: $blue;
text-decoration: none;
text-align: center;
font-weight: bold;
color: $white;
display: block;
width: 100%;
height:50px;
}
}
li {
float: left;
line-height: 50px;
width: 198px;
&.topside {
line-height: 50px;
text-align: center;
float: left;
width: 189px;
}
ul {
position: absolute;
left: -999em;
width: 196px;
margin-left: -2px;
padding-right: 2px;
border-left: 2px solid $red;
border-top: 0px;
border-right: 2px solid $red;
border-bottom: 2px solid $red;
padding-bottom: 0px;
background-color: $white;
a{
text-decoration: none;
font-weight: bold;
text-align: left;
color: $dark-blue;
display: block;
padding-left: 40px;
padding-top: 10px;
padding-bottom: 10px;
width: 157px;
line-height: 15px;
height: auto;
&:hover {
background: url(plaatje) no-repeat left;
background-color: $light-blue;
}
}
}
}
}
Gewijzigd op 23/04/2014 13:09:28 door Snelle Jaap
Volgens mij is er niet zo'n zelfde manier voor FF behalve !IE.
IE is de gene die altijd moeilijk doet, dus deze troep zal alleen daarvoor zijn toegevoegd.
Probeer het gewoon niet te gebruiken ;)
Een online versie zou inderdaad een stuk makkelijker zijn.
Ik weet niet hoe je images gebruikt bij JSfiddle (ja waarschijnlijk uploaden extern en dan een url toevoegen.)
Maar goed er is dus een image met 2 oranje balken (de plekken waar plaatje staat), het is de bedoeling dat die balken mooi uitlijnen met het menu, maar die mist 1px waardoor er een oranje lijn naast het menu en de header image komt.
Gewijzigd op 23/04/2014 14:02:34 door Snelle Jaap
Probeer eens in je css aan het element "html" dit toe te voegen:
padding-left: 1px;
Verander in #container de breedte eens in 980px ipv 981 px.