Hi !!!
So, after my lame attempt at relative positioning earlier today, I completly redid my page, and it works almost fine. Almost.
First problem : CSS rollover image...
On FF and Netscape, everything is fine.
On Opera, the rollover image displays correctly, but it causes a flicker of the image.
On IE, the rollover image never displays, it shows a blank square, and it flickers.
I did some research on Google and in this forum, but I couldn't find a solution to my problem...
Second problem :
WIth Opera 8, I have a very small positioning issue... The images are 10px too low, and I don't know how to fix it without interfering with Firefox and Netscape. This problem is well-known in IE, so I found a hack, but I couldn't find anything for Opera 8. Maybe it's my mistake ???
Thanks a lot for your help !!!
The page is here : <!-- m --><a class="postlink" href="http://enfantsdelo.free.fr/booktestie.php">http://enfantsdelo.free.fr/booktestie.php</a><!-- m -->
The rollover is on the bookmark.
EDIT : the Opera problem is fixed. I added a margin-top :10px; , and curiously, it didn't affect FF, and it even solved the IE positioning problem. That's what I call luck !
Anyway, I'm still getting crazy with my flickers on rollover and my blank squares...
More info (even crazier), I get some random parts of my background instead of the rollover image on IE... I HATE this browser.
SECOND EDIT : I apologize, I'm a real pain today. Actually, after trying the "normal rollover" for two hours, I finally decided to do the one which merges the two images and shifts the image... sorry for that.
Still, if anybody is willing to check my previous code, I would be glad to see what I did wrong...
/* CSS Document */
html, body {
padding:0px;
margin:0px;
}
.blank {
display:block;
width:100%;
height:100%;
}
body {
background:#999999;
text-align:justify;
font-family:Arial, Helvetica, sans-serif;
font-size:10px;
color:#333333;
}
#background {
position:relative;
width:100%;
height:650px;
}
#container {
display:block;
width:1000px;
height:auto;
position:relative;
margin-left:auto;
margin-right:auto;
}
#book {
background-image:url(book/book.jpg);
background-repeat:no-repeat;
display:block;
position:relative;
left:0px;
width:950px;
height:575px;
z-index:2;
}
#bookmark {
position:absolute;
top:-1px;
left:225px;
width:173px;
z-index:1;
margin-top:10px;
}
#bookmark li, #bookmark2 li, #bookmark3 li {
list-style:none;
list-style-type:none;
background-repeat:no-repeat;
}
#bookmark li a, #bookmark2 li a, #bookmark3 li a {
display:block;
text-indent:-100em;
z-index:0;
overflow:hidden;
}
li #zarkan {
height:145px;
background-image:url(book/zarkan1.jpg);
}
li a#zarkan:hover {
background-image:url(book/zarkan2.jpg);
display:block;
}
li #news {
background-image:url(book/news1.jpg);
height:70px;
}
li a#news:hover {
background-image:url(book/news2.jpg);
display:block;
}
li #histoire {
background-image:url(book/histoire1.jpg);
height:38px;
}
li a#histoire:hover {
background-image:url(book/histoire2.jpg);
display:block;
}
li #perso {
background-image:url(book/persos1.jpg);
height:47px;
}
li a#perso:hover {
background-image:url(book/persos2.jpg);
display:block;
}
#bookmark2 {
position:absolute;
top:298px;
left:216px;
width:166px;
z-index:1;
margin-top:10px;
}
li #album {
height:41px;
background-image:url(book/album1.jpg);
}
li a#album:hover {
background-image:url(book/album2.jpg);
display:block;
}
li #chat {
height:41px;
background-image:url(book/chat1.jpg);
}
li a#chat:hover {
background-image:url(book/chat2.jpg);
display:block;
}
#bookmark3 {
position:absolute;
top:379px;
left:205px;
width:169px;
z-index:1;
margin-top:10px;
}
li #bonus {
height:43px;
background-image:url(book/bonus1.jpg);
}
li a#bonus:hover {
background-image:url(book/bonus2.jpg);
display:block;
}
li #divers {
height:43px;
background-image:url(book/divers1.jpg);
}
li a#divers:hover {
background-image:url(book/divers2.jpg);
display:block;
}
li #liens {
height:40px;
background-image:url(book/liens1.jpg);
}
li a#liens:hover {
background-image:url(book/liens2.jpg);
display:block;
}
li #gribouilli {
height:51px;
background-image:url(book/gribouilli.jpg);
}
#contact {
position:absolute;
text-indent:-100em;
left:55px;
top:400px;
width:175px;
height:165px;
display:block;
}
#couv {
width:129px;
height:140px;
background-image:url(book/lyencouv.jpg);
background-position:center;
background-repeat:no-repeat;
left:105px;
top:37px;
position:absolute;
display:block;
z-index:3;
}
#sommaire {
width:155px;
height:200px;
left:90px;
top:175px;
position:absolute;
display:block;
z-index:4;
overflow:hidden;
}
/* Hides from IE5-mac \*/
* html #sommaire {top: 185px;}
/* End hide from IE5-mac */
#sommaire h1 {
color:#993300;
font-size:20px;
font-weight:bold;
text-align:center;
}
#sommaire p {
color:#cccccc;
font-size:12px;
text-align:justify;
}
#sommaire p.auteur {
color:#cccccc;
font-size:11px;
font-family:Verdana, Arial, Helvetica, sans-serif;
text-align:right;
font-style:italic;
}
#content {
position:absolute;
left:485px;
top:60px;
display:block;
width:350px;
height:480px;
overflow:auto;
z-index:50;
}
#content p {
text-align:justify;
font-family:Arial, Helvetica, sans-serif;
font-size:10px;
color:#333333;
padding-left:15px;
padding-right:15px;
padding-bottom:5px;
padding-top:5px;
}Here is my html...
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<link href=http://www.webdeveloper.com/forum/archive/index.php/"bookie.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="background">
<div id="container">
<div id="book">
<ul id="bookmark">
<li><a id="zarkan" href=http://www.webdeveloper.com/forum/archive/index.php/"bla.php">Zarkan</a></li>
<li><a id="news" href=http://www.webdeveloper.com/forum/archive/index.php/"contact.php">News</a></li>
<li><a id="histoire" href=http://www.webdeveloper.com/forum/archive/index.php/"chat.php">Histoire</a></li>
<li><a id="perso" href=http://www.webdeveloper.com/forum/archive/index.php/"contact.php">Personnages</a></li>
</ul>
<ul id="bookmark2">
<li><a id="album" href=http://www.webdeveloper.com/forum/archive/index.php/"contact.php">Galerie</a></li>
<li><a id="chat" href=http://www.webdeveloper.com/forum/archive/index.php/"contact.php">Tagboard</a></li>
</ul>
<ul id="bookmark3">
<li><a id="bonus" href=http://www.webdeveloper.com/forum/archive/index.php/"contact.php">Bonus</a></li>
<li><a id="divers" href=http://www.webdeveloper.com/forum/archive/index.php/"contact.php">Divers</a></li>
<li><a id="liens" href=http://www.webdeveloper.com/forum/archive/index.php/"contact.php">Liens</a></li>
<li><a id="gribouilli" href=http://www.webdeveloper.com/forum/archive/index.php/"blasdg">Gribouilli</a></li>
</ul>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"contact.php" class="blank" id="contact">Contact</a>
<div id="couv"></div>
<div id="sommaire">
<h1>News :</h1>
<p>" Parce qu'on ne pourra jamais empêcher un écrivain de blablater... "</p>
<p class="auteur">(Ness)</p>
</div>
<!--
<div id="postits">
<div id="admin"><a href=http://www.webdeveloper.com/forum/archive/index.php/"ldkgj" class="blank"></a></div>
<div id="archives"><a href=http://www.webdeveloper.com/forum/archive/index.php/"ldfgsydfgdf" class="blank"></a></div>
<div id="xbl"><a href=http://www.webdeveloper.com/forum/archive/index.php/"lxbl" class="blank"></a></div>
<div id="rss"><a href=http://www.webdeveloper.com/forum/archive/index.php/"rss" class="blank"></a></div>
</div>
Fin des bidules -->
<div id="content">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce ut lectus. Proin nec turpis mollis lectus consectetuer pulvinar. Nam vestibulum elit at libero. Etiam ante mauris, iaculis non, sollicitudin mattis, interdum vitae, nisl. Sed vel felis eu ante lobortis egestas. Donec sit amet nisl. Suspendisse fermentum dictum quam. Donec mi mauris, molestie id, mollis eu, lobortis et, est. In at turpis nec arcu imperdiet luctus. Donec tortor nisl, convallis vitae, faucibus at, consequat vitae, nunc. Cras a neque vel nisl interdum pharetra. Curabitur cursus accumsan ipsum. Morbi egestas, lacus ac ornare blandit, risus odio cursus nunc, vitae eleifend tellus felis ut lacus.</p>
</div>
</div>
</div>
</body>
</html>
So, after my lame attempt at relative positioning earlier today, I completly redid my page, and it works almost fine. Almost.
First problem : CSS rollover image...
On FF and Netscape, everything is fine.
On Opera, the rollover image displays correctly, but it causes a flicker of the image.
On IE, the rollover image never displays, it shows a blank square, and it flickers.
I did some research on Google and in this forum, but I couldn't find a solution to my problem...
Second problem :
WIth Opera 8, I have a very small positioning issue... The images are 10px too low, and I don't know how to fix it without interfering with Firefox and Netscape. This problem is well-known in IE, so I found a hack, but I couldn't find anything for Opera 8. Maybe it's my mistake ???
Thanks a lot for your help !!!
The page is here : <!-- m --><a class="postlink" href="http://enfantsdelo.free.fr/booktestie.php">http://enfantsdelo.free.fr/booktestie.php</a><!-- m -->
The rollover is on the bookmark.
EDIT : the Opera problem is fixed. I added a margin-top :10px; , and curiously, it didn't affect FF, and it even solved the IE positioning problem. That's what I call luck !
Anyway, I'm still getting crazy with my flickers on rollover and my blank squares...
More info (even crazier), I get some random parts of my background instead of the rollover image on IE... I HATE this browser.
SECOND EDIT : I apologize, I'm a real pain today. Actually, after trying the "normal rollover" for two hours, I finally decided to do the one which merges the two images and shifts the image... sorry for that.
Still, if anybody is willing to check my previous code, I would be glad to see what I did wrong...
/* CSS Document */
html, body {
padding:0px;
margin:0px;
}
.blank {
display:block;
width:100%;
height:100%;
}
body {
background:#999999;
text-align:justify;
font-family:Arial, Helvetica, sans-serif;
font-size:10px;
color:#333333;
}
#background {
position:relative;
width:100%;
height:650px;
}
#container {
display:block;
width:1000px;
height:auto;
position:relative;
margin-left:auto;
margin-right:auto;
}
#book {
background-image:url(book/book.jpg);
background-repeat:no-repeat;
display:block;
position:relative;
left:0px;
width:950px;
height:575px;
z-index:2;
}
#bookmark {
position:absolute;
top:-1px;
left:225px;
width:173px;
z-index:1;
margin-top:10px;
}
#bookmark li, #bookmark2 li, #bookmark3 li {
list-style:none;
list-style-type:none;
background-repeat:no-repeat;
}
#bookmark li a, #bookmark2 li a, #bookmark3 li a {
display:block;
text-indent:-100em;
z-index:0;
overflow:hidden;
}
li #zarkan {
height:145px;
background-image:url(book/zarkan1.jpg);
}
li a#zarkan:hover {
background-image:url(book/zarkan2.jpg);
display:block;
}
li #news {
background-image:url(book/news1.jpg);
height:70px;
}
li a#news:hover {
background-image:url(book/news2.jpg);
display:block;
}
li #histoire {
background-image:url(book/histoire1.jpg);
height:38px;
}
li a#histoire:hover {
background-image:url(book/histoire2.jpg);
display:block;
}
li #perso {
background-image:url(book/persos1.jpg);
height:47px;
}
li a#perso:hover {
background-image:url(book/persos2.jpg);
display:block;
}
#bookmark2 {
position:absolute;
top:298px;
left:216px;
width:166px;
z-index:1;
margin-top:10px;
}
li #album {
height:41px;
background-image:url(book/album1.jpg);
}
li a#album:hover {
background-image:url(book/album2.jpg);
display:block;
}
li #chat {
height:41px;
background-image:url(book/chat1.jpg);
}
li a#chat:hover {
background-image:url(book/chat2.jpg);
display:block;
}
#bookmark3 {
position:absolute;
top:379px;
left:205px;
width:169px;
z-index:1;
margin-top:10px;
}
li #bonus {
height:43px;
background-image:url(book/bonus1.jpg);
}
li a#bonus:hover {
background-image:url(book/bonus2.jpg);
display:block;
}
li #divers {
height:43px;
background-image:url(book/divers1.jpg);
}
li a#divers:hover {
background-image:url(book/divers2.jpg);
display:block;
}
li #liens {
height:40px;
background-image:url(book/liens1.jpg);
}
li a#liens:hover {
background-image:url(book/liens2.jpg);
display:block;
}
li #gribouilli {
height:51px;
background-image:url(book/gribouilli.jpg);
}
#contact {
position:absolute;
text-indent:-100em;
left:55px;
top:400px;
width:175px;
height:165px;
display:block;
}
#couv {
width:129px;
height:140px;
background-image:url(book/lyencouv.jpg);
background-position:center;
background-repeat:no-repeat;
left:105px;
top:37px;
position:absolute;
display:block;
z-index:3;
}
#sommaire {
width:155px;
height:200px;
left:90px;
top:175px;
position:absolute;
display:block;
z-index:4;
overflow:hidden;
}
/* Hides from IE5-mac \*/
* html #sommaire {top: 185px;}
/* End hide from IE5-mac */
#sommaire h1 {
color:#993300;
font-size:20px;
font-weight:bold;
text-align:center;
}
#sommaire p {
color:#cccccc;
font-size:12px;
text-align:justify;
}
#sommaire p.auteur {
color:#cccccc;
font-size:11px;
font-family:Verdana, Arial, Helvetica, sans-serif;
text-align:right;
font-style:italic;
}
#content {
position:absolute;
left:485px;
top:60px;
display:block;
width:350px;
height:480px;
overflow:auto;
z-index:50;
}
#content p {
text-align:justify;
font-family:Arial, Helvetica, sans-serif;
font-size:10px;
color:#333333;
padding-left:15px;
padding-right:15px;
padding-bottom:5px;
padding-top:5px;
}Here is my html...
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<link href=http://www.webdeveloper.com/forum/archive/index.php/"bookie.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="background">
<div id="container">
<div id="book">
<ul id="bookmark">
<li><a id="zarkan" href=http://www.webdeveloper.com/forum/archive/index.php/"bla.php">Zarkan</a></li>
<li><a id="news" href=http://www.webdeveloper.com/forum/archive/index.php/"contact.php">News</a></li>
<li><a id="histoire" href=http://www.webdeveloper.com/forum/archive/index.php/"chat.php">Histoire</a></li>
<li><a id="perso" href=http://www.webdeveloper.com/forum/archive/index.php/"contact.php">Personnages</a></li>
</ul>
<ul id="bookmark2">
<li><a id="album" href=http://www.webdeveloper.com/forum/archive/index.php/"contact.php">Galerie</a></li>
<li><a id="chat" href=http://www.webdeveloper.com/forum/archive/index.php/"contact.php">Tagboard</a></li>
</ul>
<ul id="bookmark3">
<li><a id="bonus" href=http://www.webdeveloper.com/forum/archive/index.php/"contact.php">Bonus</a></li>
<li><a id="divers" href=http://www.webdeveloper.com/forum/archive/index.php/"contact.php">Divers</a></li>
<li><a id="liens" href=http://www.webdeveloper.com/forum/archive/index.php/"contact.php">Liens</a></li>
<li><a id="gribouilli" href=http://www.webdeveloper.com/forum/archive/index.php/"blasdg">Gribouilli</a></li>
</ul>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"contact.php" class="blank" id="contact">Contact</a>
<div id="couv"></div>
<div id="sommaire">
<h1>News :</h1>
<p>" Parce qu'on ne pourra jamais empêcher un écrivain de blablater... "</p>
<p class="auteur">(Ness)</p>
</div>
<!--
<div id="postits">
<div id="admin"><a href=http://www.webdeveloper.com/forum/archive/index.php/"ldkgj" class="blank"></a></div>
<div id="archives"><a href=http://www.webdeveloper.com/forum/archive/index.php/"ldfgsydfgdf" class="blank"></a></div>
<div id="xbl"><a href=http://www.webdeveloper.com/forum/archive/index.php/"lxbl" class="blank"></a></div>
<div id="rss"><a href=http://www.webdeveloper.com/forum/archive/index.php/"rss" class="blank"></a></div>
</div>
Fin des bidules -->
<div id="content">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce ut lectus. Proin nec turpis mollis lectus consectetuer pulvinar. Nam vestibulum elit at libero. Etiam ante mauris, iaculis non, sollicitudin mattis, interdum vitae, nisl. Sed vel felis eu ante lobortis egestas. Donec sit amet nisl. Suspendisse fermentum dictum quam. Donec mi mauris, molestie id, mollis eu, lobortis et, est. In at turpis nec arcu imperdiet luctus. Donec tortor nisl, convallis vitae, faucibus at, consequat vitae, nunc. Cras a neque vel nisl interdum pharetra. Curabitur cursus accumsan ipsum. Morbi egestas, lacus ac ornare blandit, risus odio cursus nunc, vitae eleifend tellus felis ut lacus.</p>
</div>
</div>
</div>
</body>
</html>