[opgelost][css] ie/ff probleempje
Ik zit al een tijdje met het volgende probleem: Ik heb een achtergrond plaatje over mijn body van 1 pixel hoog die ik over de gehele body wil laden. Dit doet ie perfect in Firefox maar in Internet explorer is ie echter niet te zien. Ik hoop dat jullie me even snel kunnen helpen.
Hier mijn code gestript en wel
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
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
html *,
body * {
margin: 0px;
padding: 0px;
}
body {
background: #ffffff url(/images/page_bg.png) repeat-y 50%;
}
#container {
margin: 0 auto;
width: 1000px;
background: #ffffff;
}
#header {
height: 115px;
padding-left: 122px;
position: relative;
background: url(/images/header.png) no-repeat;
}
#left_side {
float:left;
width:86px;
padding-left: 50px;
background-color:transparent;
}
#left_text{
height:501px;
width:86px;
}
[\code]
en hier mijn gestripte html file
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<%= stylesheet_link_tag 'test'%>
</head>
<body>
<div id="container">
<div id="header"></div>
<div id="left_side">
<div id="left_text"></div>
</div>
</div>
</body>
</html>
body * {
margin: 0px;
padding: 0px;
}
body {
background: #ffffff url(/images/page_bg.png) repeat-y 50%;
}
#container {
margin: 0 auto;
width: 1000px;
background: #ffffff;
}
#header {
height: 115px;
padding-left: 122px;
position: relative;
background: url(/images/header.png) no-repeat;
}
#left_side {
float:left;
width:86px;
padding-left: 50px;
background-color:transparent;
}
#left_text{
height:501px;
width:86px;
}
[\code]
en hier mijn gestripte html file
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<%= stylesheet_link_tag 'test'%>
</head>
<body>
<div id="container">
<div id="header"></div>
<div id="left_side">
<div id="left_text"></div>
</div>
</div>
</body>
</html>
Gewijzigd op 01/01/1970 01:00:00 door Michael
Code (php)
1
body {background: url(plaatje.png) left top repeat-y;}
Gewijzigd op 01/01/1970 01:00:00 door Jan Koehoorn
Wat nou als er een gradient in zit :)?
Jacco schreef op 27.05.2008 15:39:
Niet per definitie jan.
Wat nou als er een gradient in zit :)?
Wat nou als er een gradient in zit :)?
Met een bestand van 1 pixel?
Edit: Sorry niet goed gelezen, 1 pixel HOOG, ik dachty gewoon 1 pixel :P
Gewijzigd op 01/01/1970 01:00:00 door Boris Mattijssen
Jan Koehoorn schreef op 27.05.2008 15:38:
Een plaatje van 1 pixel hoog laten herhalen? Dan kun je net zo goed een achtergrondkleur voor je body opgeven. Of is hij breder? Dan gewoon:
Code (php)
1
body {background: url(plaatje.png) left top repeat-y;}
het plaatje bevat een border met een effect daarop. (dus kan het niet opvangen met een css border)
edit: wat zijn jullie snel met reageren :| :D:D ik zal proberen even een printscreen ergens op internet te gooien
Gewijzigd op 01/01/1970 01:00:00 door michael
Jan Koehoorn schreef op 27.05.2008 15:40:
Mijn edit was nog binnen de tijd ;-)
Het feit dat je een edit nodig had valt me al van je tegen :P
firefox:
internet explorer
alvast bedankt
Tyrone schreef op 27.05.2008 15:54:
Ja, het lijkt wel of IE geen CSS kan lezen
het andere css leest ie gewoon (wat ik er uit gestript heb)
en die script tag lijkt een beetje raar, maar dit is Rails ipv PHP. Dit is dus gewoon goed.
Dat wat Jan had gegeven gaf hetzelfde effect
Code (php)
1
background: url(/images/page_bg.png) left top repeat-y;
EDIT:
deze code houd het tegen:
Code (php)
1
2
3
4
2
3
4
#left_text{
height:100px;
width:86px;
}
height:100px;
width:86px;
}
Nu begint de achtergrond vanaf 100px.....
stomme kleine foutjes kosten altijd uren..... *huil*
Gewijzigd op 01/01/1970 01:00:00 door michael
Gebruik dit eens.
Code (php)
1
2
3
2
3
body {
background: #fff url(/images/page_bg.png) repeat-y top center;
}
background: #fff url(/images/page_bg.png) repeat-y top center;
}
Edit: Waar staat je stylesheet trouwens? /stylesheet/ of /css/? Zo ja, dan moet je wel ../images/page_bg.png gebruiken.
Edit 2: html *, body * {} is niet nodig. * {} werkt ook.
Edit 3: Zie dat je het al hebt opgelost. ;)
Gewijzigd op 01/01/1970 01:00:00 door Mitchell
Mitchell schreef op 27.05.2008 16:02:
Vreemd dat je body hem niet helemaal recht naar beneden haalt.
Gebruik dit eens.
Edit: Waar staat je stylesheet trouwens? /stylesheet/ of /css/? Zo ja, dan moet je wel ../images/page_bg.png gebruiken.
Edit 2: html *, body * {} is niet nodig. * {} werkt ook.
Gebruik dit eens.
Code (php)
1
2
3
2
3
body {
background: #fff url(/images/page_bg.png) repeat-y top center;
}
background: #fff url(/images/page_bg.png) repeat-y top center;
}
Edit: Waar staat je stylesheet trouwens? /stylesheet/ of /css/? Zo ja, dan moet je wel ../images/page_bg.png gebruiken.
Edit 2: html *, body * {} is niet nodig. * {} werkt ook.
de stylesheet staat in een hele andere folder. een public rails folder. Dit hoort in bij een Rails applicatie. de header png include ie wel dus dat is het probleem niet.
thanks voor de 2de edit :)
edit: nee het is nog niet opgelost! :-) maar heb wel door dat dat divje het tegenhoud. als ik die height:100px maak dan begint de body achtergrond 100px te laat zeg maar
final edit: Mensen het is opgelost! Heel erg bedankt voor jullie snelle reacties!
Ik mocht kennelijk de container geen vaste breedte geven.... nu maar hopen dat ie het ook met een hoog resolutie goed doet.
bedankt!
Gewijzigd op 01/01/1970 01:00:00 door michael
Nog een vraagje, waarom gebruik je vaste heights?
Edit: Linkje plaatsen? Werk op een notebook met een grote resolutie dus kan het voor je testen. ;]
Gewijzigd op 01/01/1970 01:00:00 door Mitchell
Mitchell schreef op 27.05.2008 16:18:
Volgens mij is je doctype strict hier de oorzaak van, misschien transitional gebruiken?
Nog een vraagje, waarom gebruik je vaste heights?
Edit: Linkje plaatsen? Werk op een notebook met een grote resolutie dus kan het voor je testen. ;]
Nog een vraagje, waarom gebruik je vaste heights?
Edit: Linkje plaatsen? Werk op een notebook met een grote resolutie dus kan het voor je testen. ;]
ik moet duidelijk een width hebben van 1000px.....
transitional werkt niet. Ik heb vaste heights omdat het achtergrond plaatjes zijn. Die heb ik er hier uitgestript omdat het niet van belang was en hij ook de fout zonder doet.
Ik heb zo even snel jammer genoeg geen ruimte ergens online.... Maar waarschijnlijk vanavond wel dus dan zet ik em vanavond online :)
edit: Ok hij is opgelost! En wat een domme fout zeg! heeft niks met internet explorer te maken. Alleen met mij :D
container was namelijk background: #ffffff dus dat overlapt em natuurlijk
Ok dit is een pak van mn hart. Namelijk al 3 uur mee bezig :D
Heel erg bedankt!!!
Gewijzigd op 01/01/1970 01:00:00 door michael