Ness_du_Frat
07-05-2006, 07:49 AM
Hi !
Probably (almost certainly, actually), the problem comes from my code, but I don't understand it, so here I am.
I'm creating a website, and I want to do a navigation bar with 4 items. Each item has its own background on rollover. The navigation bar has a background as well.
First problem : rollover doesn't work on IE. Here is my code :
/* CSS Document */
html, body {
padding:0 0 0 0;
margin:0 0 0 0;
}
#barre {
list-style:none;
background:url(/images/barre.gif) repeat-x;
width:100%;
float:left;
z-index:0;
padding-left:440px;
margin: 0;
}
ul li {
float:left;
}
ul li a {
line-height:128px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:18px;
color:#FFFFFF;
font-style:italic;
text-align:center;
text-decoration:none;
}
ul li a#accueil {
background:none;
display:block;
width:125px;
}
ul li a#accueil:hover {
background:url(/images/accueilbg.gif) no-repeat;
width:125px;
height:132px;
z-index:5;
}
ul li a#services {
background:none;
width:162px;
display:block;
}
ul li a#services:hover {
background:url(/images/servicesbg.gif) no-repeat;
width:162px;
height:132px;
}
(I included only the first 2 items. The next two are coded the same way)
Here is my html :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>V.I.D Very Important Day - Organtisatrice de Mariages et d'Événements</title>
<link href="accueiltest.css" rel="stylesheet" type="text/css" />
</head>
<body>
<ul id="barre">
<li ><a id="accueil"><span class="big">A</span>ccueil</a></li>
<li><a id="services"><span class="big">N</span>os <span class="big">S</span>ervices</a></li>
<li ><a id="galerie"><span class="big">G</span>alerie</a></li>
<li ><a id="contact"><span class="big">C</span>ontact</a></li>
</ul>
</body>
</html>
I know IE doesn't recognize hover on an element that's not a link, but my elements are link, so I don't understand the problem.
Second problem, even more annoying :
I get the stupid horizontal scrollbar on IE and FF, and it's obviously not necessary. I don't want to remove it totally, in case people need it for smaller screen resolutions, but it's really a pain. I tried giving my #barre element a width of 95%, but it didn't change anything. If I put a margin-right : -440px, it works in IE, but not in FF...
Third problem, on my page, I have lots of other stuff, which appear perfectly in FF, but don't show on IE... Weird !!!!
Anyone has a guess ?
Thanks a lot.
If you want to see the stuff online: http://psychomoa.free.fr/test.php
Probably (almost certainly, actually), the problem comes from my code, but I don't understand it, so here I am.
I'm creating a website, and I want to do a navigation bar with 4 items. Each item has its own background on rollover. The navigation bar has a background as well.
First problem : rollover doesn't work on IE. Here is my code :
/* CSS Document */
html, body {
padding:0 0 0 0;
margin:0 0 0 0;
}
#barre {
list-style:none;
background:url(/images/barre.gif) repeat-x;
width:100%;
float:left;
z-index:0;
padding-left:440px;
margin: 0;
}
ul li {
float:left;
}
ul li a {
line-height:128px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:18px;
color:#FFFFFF;
font-style:italic;
text-align:center;
text-decoration:none;
}
ul li a#accueil {
background:none;
display:block;
width:125px;
}
ul li a#accueil:hover {
background:url(/images/accueilbg.gif) no-repeat;
width:125px;
height:132px;
z-index:5;
}
ul li a#services {
background:none;
width:162px;
display:block;
}
ul li a#services:hover {
background:url(/images/servicesbg.gif) no-repeat;
width:162px;
height:132px;
}
(I included only the first 2 items. The next two are coded the same way)
Here is my html :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>V.I.D Very Important Day - Organtisatrice de Mariages et d'Événements</title>
<link href="accueiltest.css" rel="stylesheet" type="text/css" />
</head>
<body>
<ul id="barre">
<li ><a id="accueil"><span class="big">A</span>ccueil</a></li>
<li><a id="services"><span class="big">N</span>os <span class="big">S</span>ervices</a></li>
<li ><a id="galerie"><span class="big">G</span>alerie</a></li>
<li ><a id="contact"><span class="big">C</span>ontact</a></li>
</ul>
</body>
</html>
I know IE doesn't recognize hover on an element that's not a link, but my elements are link, so I don't understand the problem.
Second problem, even more annoying :
I get the stupid horizontal scrollbar on IE and FF, and it's obviously not necessary. I don't want to remove it totally, in case people need it for smaller screen resolutions, but it's really a pain. I tried giving my #barre element a width of 95%, but it didn't change anything. If I put a margin-right : -440px, it works in IE, but not in FF...
Third problem, on my page, I have lots of other stuff, which appear perfectly in FF, but don't show on IE... Weird !!!!
Anyone has a guess ?
Thanks a lot.
If you want to see the stuff online: http://psychomoa.free.fr/test.php