In IE werkt alles prima maar in Chrome en andere browsers komen de DIVS niet goed te staan.
Ik moet een site voor school maken en doe deze over Oh Oh Cherso, in IE doet hij het prima maar in Chrome/Firefox/Safari enz. staan de DIVS niet onder elkaar....
In IE (zoals het hoort):
In bv Chrome (verkeerd):
Mijn CSS is:
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
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
/*
StyleSheet voor Oh Oh Cherso site
*/
body {
margin: 10px;
background: url(http://www.billybobs-mailing.nl/cherso/images/background.png);
color: #999999;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
text-align: center;
}
div.container {
width: 700;
padding: 15px 10px 15px 10px;
min-height: 1px;
text-align: left;
margin: 0px auto;
background-image: url('http://www.billybobs-mailing.nl/cherso/images/container.png');
}
h1 {
color: #000000;
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
font-weight: bold;
text-decoration: underline;
}
h2 {
color: #032F81;
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
text-align: center;
font-weight: bold;
font-style: italic;
text-decoration: underline;
}
a:link{
background-color: #transparent;
color: #FFFFFF;
text-decoration: none;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
}
a:visited{
background-color: transparent;
color: #FFFFFF;
text-decoration: underline;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
}
a:hover{
background-color: #CCCCCC;
color: #000000;
text-decoration: underline;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
font-style: italic;
}
a:active{
background-color: transparent;
color: #FFFFFF;
text-decoration: underline;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
}
div.content {
width: 680;
padding: 0px 5px 0px 5px;
margin: 0px auto;
text-align: left;
float: center;
}
div.bar {
width: 700;
height: 24;
padding: 4px 4px 4px 4px;
margin: 0px auto;
background-image: url('http://www.billybobs-mailing.nl/cherso/images/bar.png');
}
div.header {
width: 700;
height: 160;
margin: 0px auto;
background-image: url('http://www.billybobs-mailing.nl/cherso/images/header.png');
}
div.footer {
width: 700;
height: 27;
padding: 5px 5px 5px 5px;
margin: 0px auto;
background-image: url('http://www.billybobs-mailing.nl/cherso/images/footer.gif');
}
StyleSheet voor Oh Oh Cherso site
*/
body {
margin: 10px;
background: url(http://www.billybobs-mailing.nl/cherso/images/background.png);
color: #999999;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
text-align: center;
}
div.container {
width: 700;
padding: 15px 10px 15px 10px;
min-height: 1px;
text-align: left;
margin: 0px auto;
background-image: url('http://www.billybobs-mailing.nl/cherso/images/container.png');
}
h1 {
color: #000000;
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
font-weight: bold;
text-decoration: underline;
}
h2 {
color: #032F81;
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
text-align: center;
font-weight: bold;
font-style: italic;
text-decoration: underline;
}
a:link{
background-color: #transparent;
color: #FFFFFF;
text-decoration: none;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
}
a:visited{
background-color: transparent;
color: #FFFFFF;
text-decoration: underline;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
}
a:hover{
background-color: #CCCCCC;
color: #000000;
text-decoration: underline;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
font-style: italic;
}
a:active{
background-color: transparent;
color: #FFFFFF;
text-decoration: underline;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
}
div.content {
width: 680;
padding: 0px 5px 0px 5px;
margin: 0px auto;
text-align: left;
float: center;
}
div.bar {
width: 700;
height: 24;
padding: 4px 4px 4px 4px;
margin: 0px auto;
background-image: url('http://www.billybobs-mailing.nl/cherso/images/bar.png');
}
div.header {
width: 700;
height: 160;
margin: 0px auto;
background-image: url('http://www.billybobs-mailing.nl/cherso/images/header.png');
}
div.footer {
width: 700;
height: 27;
padding: 5px 5px 5px 5px;
margin: 0px auto;
background-image: url('http://www.billybobs-mailing.nl/cherso/images/footer.gif');
}
Weten jullie waar dit verschil aan kan liggen en hoe ik dit kan oplossen?
BVD
En een linkje naar de site is ook wel makkelijk: http://www.billybobs-mailing.nl/cherso/.
Wat zeer vervelend is dat je een achtergrond muziekje hebt. Wel je die er heel snel uithalen? Dit zorgt ervoor dat bijna iedereen meteen weg is.
Verder mis je een doctype. Hierdoor gaat IE in de qruiks mode. Dit betekend dat hij zich gedraagt als IE6. Als je dus een doctype erboven zet heb je meteen ook die fout in IE.
Nog wat andere fouten:
- Gebruik geen center tag. Deze is al een museum stuk.
- Gebruik id's in plaats van classes. Classes kunnen meerdere keren voorkomen, en ids maar 1 keer. ID worden belangrijker geacht dan classes in CSS.
- Gebruik geen inline CSS
- Br is <br> in HTML en <br /> in XHTML, combinaties zijn niet mogelijk.
- Haal ook nog even die andere CSS fouten en HTML fouten eruit.
Gewijzigd op 03/01/2011 18:00:26 door Wouter J
- Wat betreft de achtergrond muziek; die moet blijven... Ik krijg een hoger cijfer als ik laat zien dat ik dit kan, ik weet dat het "vervelend" is.
- Als ik geen center tags gebruik, hoe kan ik dan wel een tekst in het midden zetten?
Voor de rest heel erg bedankt!!
Timo Kleinhout:
- Als ik geen center tags gebruik, hoe kan ik dan wel een tekst in het midden zetten?
Via margin: 0 auto; en een width. Zie mijn voorbeeld:
http://waldio.110mb.com/css/centeren.html (de verticaal en verticaal+horizontaal centeren kan nog beter)
Toevoeging op 03/01/2011 18:25:57:
Wouter J op 03/01/2011 17:59:36:
En een linkje naar de site is ook wel makkelijk: http://www.billybobs-mailing.nl/cherso/.
W3C Validator
HTML 16 Errors, 6 warning(s)
CSS Fouten (16)
- SanThe - op 03/01/2011 18:20:16:
W3C Validator
HTML 16 Errors, 6 warning(s)
CSS Fouten (16)
Wouter J op 03/01/2011 17:59:36:
En een linkje naar de site is ook wel makkelijk: http://www.billybobs-mailing.nl/cherso/.
W3C Validator
HTML 16 Errors, 6 warning(s)
CSS Fouten (16)
Zojuist nog gechecked.
Toevoeging op 03/01/2011 18:46:45:
Ik heb een heel aantal Errors weggewerkt, maar hij heeft als error aan dat ik geen <html> mag doen?!?! dit snap ik niet...
http://validator.w3.org/check?uri=http://informatica.bc-enschede.nl/tkleinhout/index.html&charset=(detect+automatically)&doctype=Inline&ss=1&outline=1&group=0&No200=1&verbose=1&st=1&user-agent=W3C_Validator/1.1
Toevoeging op 03/01/2011 18:51:19:
Timo Kleinhout op 03/01/2011 18:32:08:
Ik heb een heel aantal Errors weggewerkt, maar hij heeft als error aan dat ik geen <html> mag doen?!?! dit snap ik niet...
http://validator.w3.org/check?uri=http://informatica.bc-enschede.nl/tkleinhout/index.html&charset=(detect+automatically)&doctype=Inline&ss=1&outline=1&group=0&No200=1&verbose=1&st=1&user-agent=W3C_Validator/1.1
http://validator.w3.org/check?uri=http://informatica.bc-enschede.nl/tkleinhout/index.html&charset=(detect+automatically)&doctype=Inline&ss=1&outline=1&group=0&No200=1&verbose=1&st=1&user-agent=W3C_Validator/1.1
Het is nu verholpen, HTML is goed en CSS is ook goed, maar nu is het ook bij IE scheef...
Toevoeging op 03/01/2011 19:07:00:
Ik heb even een nieuwe account gemaakt omdat ik een nieuw email adres heb ;-)
Weet iemand hoe ik alles netjes onder elkaar in één vloeiende lijn krijg?
