CSS goed in FF fout in IE
Na een lange tijd even stil te hebben gezeten, ben ik toch weer aan de slag gegaan aan mijn portofolio. Hier kwam dit eruit:
klikje
Nu heb ik deze gesliced, in html en css gezet en ziet hij er goed uit in FF. De fout zit hem in de header. Hier zit een menu in die ik horizontaal geplaatst heb doormiddel van de Ul en li in css.
Zoals jullie kunnen zien ontstaat er een ruimte onder de header terwijl ik deze een vaste hoogte heb gegeven. Dit probleem doet zich alleen voor in IE en ik neem dus aan dat daar ook het probleem ligt.
De code:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<div id="header">
<ul>
<li>
<a href="#" onMouseOver="ImageName.src='home1.png'" onMouseOut="ImageName.src='home.png'">
<img src="home.png" name="ImageName" border="0"/>
</a>
</li>
<li>
<a href="#" onMouseOver="ImageName1.src='about1.png'" onMouseOut="ImageName1.src='about.png'">
<img src="about.png" name="ImageName1" border="0"/>
</a>
</li>
<li>
<a href="#" onMouseOver="ImageName2.src='contact1.png'" onMouseOut="ImageName2.src='contact.png'">
<img src="contact.png" name="ImageName2" border="0"/>
</a>
</li>
</ul>
</div>
<ul>
<li>
<a href="#" onMouseOver="ImageName.src='home1.png'" onMouseOut="ImageName.src='home.png'">
<img src="home.png" name="ImageName" border="0"/>
</a>
</li>
<li>
<a href="#" onMouseOver="ImageName1.src='about1.png'" onMouseOut="ImageName1.src='about.png'">
<img src="about.png" name="ImageName1" border="0"/>
</a>
</li>
<li>
<a href="#" onMouseOver="ImageName2.src='contact1.png'" onMouseOut="ImageName2.src='contact.png'">
<img src="contact.png" name="ImageName2" border="0"/>
</a>
</li>
</ul>
</div>
de bijhorende css:
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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
#header {
background-image: url("header.png");
text-align: right;
margin-top: 0px;
margin-bottom: 0px;
padding: 0px 0px 0px 0px;
height: 59px;
}
#header ul li a {
padding: 0px;
margin: 0;
TEXT-DECORATION: none;
}
#header ul,
#header ul li {
list-style-type: none;
display: inline;
padding: 0;
margin: 0;
}
background-image: url("header.png");
text-align: right;
margin-top: 0px;
margin-bottom: 0px;
padding: 0px 0px 0px 0px;
height: 59px;
}
#header ul li a {
padding: 0px;
margin: 0;
TEXT-DECORATION: none;
}
#header ul,
#header ul li {
list-style-type: none;
display: inline;
padding: 0;
margin: 0;
}
bvd,
Nivek
p.s. Dit is trouwens geen revieuw aangezien hij nog lang niet klaar is ect.
Gewijzigd op 01/01/1970 01:00:00 door Kevin Tuns
Hier zie je onder de header/menu nog een klein stukje van het menu herhaald worden terwijl ik de hoogte toch echt een waarde heb gegeven.
Ik hoopd dat er niet veel mensen meer met IE6 zullen zijn, maar toch wil ik wel dat de website voor hun er ook netjes uitziet.
Ik heb wel enkele hacks die je kan gebruiken PM maar
Harmen schreef op 15.12.2007 17:07:
Och, wat zijn we weer behulpzaam....
@TS: Ik zie het zosnel niet. (Maar ik kijk ook erg snel.)
Harmen schreef op 15.12.2007 17:07:
Misschien niet nee, maar het ziet er wel lelijk uit als een achtergrond zich opeens herhaald op een plaats waar het niet bedoeld is.
ik zal even een screenshot uploaden zodat jullie het probleem zien.
klikje
Gewijzigd op 01/01/1970 01:00:00 door Kevin Tuns
Code (php)
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
#menu {
background-color:#3E72A4;
color:white;
float:left;
margin-top:0px;
padding:0px;
width:200px;
}
background-color:#3E72A4;
color:white;
float:left;
margin-top:0px;
padding:0px;
width:200px;
}
En #right voor dit:
Code (php)
1
2
3
4
5
6
7
2
3
4
5
6
7
#right {
background-color:#FFFFFF;
float:right;
height:100%;
margin-top:0px;
width:601px;
}
background-color:#FFFFFF;
float:right;
height:100%;
margin-top:0px;
width:601px;
}
Als die ene kleine witte lijn wegvalt kan je dan eventueel in #header nog het volgende bij zetten:
Code (php)
1
border-bottom:1px solid white;
Jeej schreef op 15.12.2007 20:34:
Ik gooi het hier gewoon effe op een gok (dus ik hoop dat dit niet een of andere ie bug is).Verander #menu eens in dit:
En #right voor dit:
Als die ene kleine witte lijn wegvalt kan je dan eventueel in #header nog het volgende bij zetten:
Code (php)
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
#menu {
background-color:#3E72A4;
color:white;
float:left;
margin-top:0px;
padding:0px;
width:200px;
}
background-color:#3E72A4;
color:white;
float:left;
margin-top:0px;
padding:0px;
width:200px;
}
En #right voor dit:
Code (php)
1
2
3
4
5
6
7
2
3
4
5
6
7
#right {
background-color:#FFFFFF;
float:right;
height:100%;
margin-top:0px;
width:601px;
}
background-color:#FFFFFF;
float:right;
height:100%;
margin-top:0px;
width:601px;
}
Als die ene kleine witte lijn wegvalt kan je dan eventueel in #header nog het volgende bij zetten:
Code (php)
1
border-bottom:1px solid white;
Nee, sorry geen resultaat.. Ik denk dat ik het er maar bij moet laten aangezien ik de fout niet zie.
... Ik denk dat ik het heb gevonden, maar ik wil het niet zo oplossen... Als ik alle ruimte die ik openlaat in de header weglaat dan ziet mijn code er niet uit, maar dan is de fout weg... Ik wil dit niet doen omdat ik wil dat mijn code leesbaar blijft dus het moet op een andere manier kunnen.