This is a follow-up from a thread I posted earlier in the HTML forum (<!-- m --><a class="postlink" href="http://forums.webdeveloper.com/showthread.php?s=&threadid=21898">http://forums.webdeveloper.com/showthre ... adid=21898</a><!-- m -->).
What I am trying to achieve is:
- a CSS preload;
- a CSS image swap;
- a CSS boxdescription;
Open the attached page in IE and all works just fine. But...
Open the page in Mozilla and...
1. ...the mouseover hardly works at all;
2. ...the images are not aligned properly;
3. ...the images shift down during the mouseover.
Then, try adding the doctype:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
Open the page in Internet Explorer and...
1. ...the set height of the "#textbox" is being ignored;
Open the page in Mozilla and...
1. ...the set height of the "#textbox" is being ignored;
2. ...the images appear 1?times above eachother;
3. ...the images shift down during the mouseover.
I have been playing a little with the "#back" id, which prevents the image from appearing 1?times in Mozilla.
I know of the swap-method using just one image (<!-- m --><a class="postlink" href="http://www.pixy.cz/blogg/clanky/cssnopreloadrollovers/">http://www.pixy.cz/blogg/clanky/cssnopreloadrollovers/</a><!-- m -->).
But in this case I'd rather use two images with an image swap.
Thanks a million for taking a look at it!
Cheers, Jochem
1. change the height of the #textbox and it's height changes.
I can't see a problem here.
2. and 3. These are one and the same problem: cascading styles.
The a:hover style is being used on all the #menu0X a:hover,
but not on #menu0X a:active nor #menu0X a
The font declaration must be applied to #menu0X a:active and #menu0X a
Try this:
a {font:9pt Verdana,Arial; font-weight:normal; color:#0099ff; text-decoration:none;}
a:hover {font:9pt Verdana,Arial; font-weight:normal; color:#0099ff; text-decoration:none;}
a:active {font:9pt Verdana,Arial; font-weight:normal; color:#0099ff; text-decoration:none;}Thanx for your reply Fang!
1. I figured out what I did wrong: I forgot to add px.
2. In NS and Mozilla the images are still repeated when hovered. I added some code, but it does not seem to be of much influence: #back, #forward, ..... {background-position:0px 0px; background-repeat:no-repeat;}.
3. Your solution works, although I don't understand why. Could you please explain?
4. (new) In NS and Mozilla the images are placed in a different position than in IE. Can I solve this?
The Bitmaps are still to be replaced by Gifs.
Cheers, Jochem<style type="text/css">
#void .preload {display:none;}
a span {display:none;}
a {font:9pt Verdana,Arial; font-weight:normal; color:#0099ff; text-decoration:none;}
a:active {font:9pt Verdana,Arial; font-weight:normal; color:#0099ff; text-decoration:none;}
a:hover {font:9pt Verdana,Arial; font-weight:normal; color:#0099ff; text-decoration:none;}
a:hover span {position:absolute; visibility:visible; z-index:1; padding:0px; top:-14px; left:3px; width:300px; height:26px; display:block;}
#textbox {position:absolute; visibility:visible; z-index:1; padding:0px; top:2px; left:10px; width:300px; height:50px; border:1px solid #64646e;}
#imagelinks {position:absolute; visibility:visible; z-index:2; padding:0px; top:43px; left:12px; width:300px; height:13px;}
#back, #forward, #menu1, #menu2, #menu3, #menu4, #menu5, #menu6 {background-position:0px 0px; background-repeat:no-repeat;}
#back a {background-image:url("IMG/HiRes_back_uit.bmp"); width:17px; height:13px; z-index:2; padding:0px;}
#back a:hover {background-image:url("IMG/HiRes_back_aan.bmp");}
#forward a {background-image:url("IMG/HiRes_forward_uit.bmp"); width:17px; height:13px; z-index:2; padding:0px;}
#forward a:hover{background-image:url("IMG/HiRes_forward_aan.bmp");}
#menu01 a {background-image:url("IMG/HiRes_01_uit.bmp"); width:14px; height:13px; z-index:2; padding:0px;}
#menu01 a:hover {background-image:url("IMG/HiRes_01_aan.bmp");}
#menu01 a:active{background-image:url("IMG/HiRes_01_aan.bmp");}
#menu02 a {background-image:url("IMG/HiRes_02_uit.bmp"); width:14px; height:13px; z-index:2; padding:0px;}
#menu02 a:hover {background-image:url("IMG/HiRes_02_aan.bmp");}
#menu02 a:active{background-image:url("IMG/HiRes_02_aan.bmp");}
#menu03 a {background-image:url("IMG/HiRes_03_uit.bmp"); width:14px; height:13px; z-index:2; padding:0px;}
#menu03 a:hover {background-image:url("IMG/HiRes_03_aan.bmp");}
#menu03 a:active{background-image:url("IMG/HiRes_03_aan.bmp");}
#menu04 a {background-image:url("IMG/HiRes_04_uit.bmp"); width:14px; height:13px; z-index:2; padding:0px;}
#menu04 a:hover {background-image:url("IMG/HiRes_04_aan.bmp");}
#menu04 a:active{background-image:url("IMG/HiRes_04_aan.bmp");}
#menu05 a {background-image:url("IMG/HiRes_05_uit.bmp"); width:14px; height:13px; z-index:2; padding:0px;}
#menu05 a:hover {background-image:url("IMG/HiRes_05_aan.bmp");}
#menu05 a:active{background-image:url("IMG/HiRes_05_aan.bmp");}
#menu06 a {background-image:url("IMG/HiRes_06_uit.bmp"); width:14px; height:13px; z-index:2; padding:0px;}
#menu06 a:hover {background-image:url("IMG/HiRes_06_aan.bmp");}
#menu06 a:active{background-image:url("IMG/HiRes_06_aan.bmp");}
</style>1. most browsers have no problem with leaving out the "px", but it is not valid!
2. I don't see this in moz 1.0 and 1.4 Which browser version are you using?
3. The declarations used in a:active are inherited by #menu0X a:active
The font value is applied to #menu01 a:active - hence Cascading Style Sheets.
4. Probably caused by the DTD putting IE into Quirks mode.
Place the following at the top of your page
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
Now see its effect in IE and Mozilla, with and without the above code.
Groetjes Fang2. Mozilla 1.5.
4. The doctype code was is in already. When I leave it out:
- Moz is okay, although images are placed 1 pixel too low, resulting in hiding of the image bottom;
- IE is okay, although images are placed 2 pixels too low.
What is going wrong?
Should I leave the #back, #forward, ..... {background-position:0px 0px; background-repeat:no-repeat;} line in?
Groetjes terug, JochemIf you open the attached zip-file in IE, you'll see the page just as I want it to be. NS and Mozilla however show a different result.
The changes offered by Fang unfortunately turned out not to be of any help, since they eliminate the CSS boxdescription.
So what changes should I make to get the same result with NS and Mozilla?
Remaining question: Should I leave the #back, #forward, ..... {background-position:0px 0px; background-repeat:no-repeat;} line in?
Cheers, JochemChange these lines:
a:hover { text-decoration:none;}
a:hover span {font:14pt Arial; font-weight:bold; color:#0099ff; text-decoration:none;position:absolute; visibility:visible; z-index:2; padding:0px; top:-23px; left:5px; width:280px; height:26px; display:block;}
and all background-image
background-image:url("../IMG/back_uit.gif");
to
background:url("../IMG/back_uit.gif") no-repeat;
remove the line #back, #forward, ...
The #menu01 a is wrong and missing active and hover of sameI am sorry Fang, but...
1. Changing the line a:hover span {position:absolute; visibility:visible; .......} does not make any difference.
2. The line a:hover {font:13pt Arial; font-weight:bold; color:#0099ff; text-decoration:none;} however has to stay in as it was. Otherwise the Boxdescription will not show.
3. Changing background-image:url("../IMG/back_uit.gif"); to background:url("../IMG/back_uit.gif") no-repeat; and removing the line #back, #forward, ... causes all images to disappear.
4. I messed up indeed with #menu1 and #menu2. I fixed it. [01_aan.gif] should be shown by default.
--> As the code is now, all that is left to solve is the fact that the images still repeat in NS and Mozilla. They do not shift anymore.
Cheers, JochemChange all the lines mentioned in 3. and leave the line #back, #forward, ... in the script.It's done!!!
background:url("../IMG/back_uit.gif") no-repeat; is replaced by background:url("../IMG/back_uit.gif"); background-repeat:no-repeat;.
That's all. Fang, bedankt voor je hulp.
Cheers, Jochem
What I am trying to achieve is:
- a CSS preload;
- a CSS image swap;
- a CSS boxdescription;
Open the attached page in IE and all works just fine. But...
Open the page in Mozilla and...
1. ...the mouseover hardly works at all;
2. ...the images are not aligned properly;
3. ...the images shift down during the mouseover.
Then, try adding the doctype:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
Open the page in Internet Explorer and...
1. ...the set height of the "#textbox" is being ignored;
Open the page in Mozilla and...
1. ...the set height of the "#textbox" is being ignored;
2. ...the images appear 1?times above eachother;
3. ...the images shift down during the mouseover.
I have been playing a little with the "#back" id, which prevents the image from appearing 1?times in Mozilla.
I know of the swap-method using just one image (<!-- m --><a class="postlink" href="http://www.pixy.cz/blogg/clanky/cssnopreloadrollovers/">http://www.pixy.cz/blogg/clanky/cssnopreloadrollovers/</a><!-- m -->).
But in this case I'd rather use two images with an image swap.
Thanks a million for taking a look at it!
Cheers, Jochem
1. change the height of the #textbox and it's height changes.I can't see a problem here.
2. and 3. These are one and the same problem: cascading styles.
The a:hover style is being used on all the #menu0X a:hover,
but not on #menu0X a:active nor #menu0X a
The font declaration must be applied to #menu0X a:active and #menu0X a
Try this:
a {font:9pt Verdana,Arial; font-weight:normal; color:#0099ff; text-decoration:none;}
a:hover {font:9pt Verdana,Arial; font-weight:normal; color:#0099ff; text-decoration:none;}
a:active {font:9pt Verdana,Arial; font-weight:normal; color:#0099ff; text-decoration:none;}Thanx for your reply Fang!
1. I figured out what I did wrong: I forgot to add px.
2. In NS and Mozilla the images are still repeated when hovered. I added some code, but it does not seem to be of much influence: #back, #forward, ..... {background-position:0px 0px; background-repeat:no-repeat;}.
3. Your solution works, although I don't understand why. Could you please explain?
4. (new) In NS and Mozilla the images are placed in a different position than in IE. Can I solve this?
The Bitmaps are still to be replaced by Gifs.
Cheers, Jochem
<style type="text/css">#void .preload {display:none;}
a span {display:none;}
a {font:9pt Verdana,Arial; font-weight:normal; color:#0099ff; text-decoration:none;}
a:active {font:9pt Verdana,Arial; font-weight:normal; color:#0099ff; text-decoration:none;}
a:hover {font:9pt Verdana,Arial; font-weight:normal; color:#0099ff; text-decoration:none;}
a:hover span {position:absolute; visibility:visible; z-index:1; padding:0px; top:-14px; left:3px; width:300px; height:26px; display:block;}
#textbox {position:absolute; visibility:visible; z-index:1; padding:0px; top:2px; left:10px; width:300px; height:50px; border:1px solid #64646e;}
#imagelinks {position:absolute; visibility:visible; z-index:2; padding:0px; top:43px; left:12px; width:300px; height:13px;}
#back, #forward, #menu1, #menu2, #menu3, #menu4, #menu5, #menu6 {background-position:0px 0px; background-repeat:no-repeat;}
#back a {background-image:url("IMG/HiRes_back_uit.bmp"); width:17px; height:13px; z-index:2; padding:0px;}
#back a:hover {background-image:url("IMG/HiRes_back_aan.bmp");}
#forward a {background-image:url("IMG/HiRes_forward_uit.bmp"); width:17px; height:13px; z-index:2; padding:0px;}
#forward a:hover{background-image:url("IMG/HiRes_forward_aan.bmp");}
#menu01 a {background-image:url("IMG/HiRes_01_uit.bmp"); width:14px; height:13px; z-index:2; padding:0px;}
#menu01 a:hover {background-image:url("IMG/HiRes_01_aan.bmp");}
#menu01 a:active{background-image:url("IMG/HiRes_01_aan.bmp");}
#menu02 a {background-image:url("IMG/HiRes_02_uit.bmp"); width:14px; height:13px; z-index:2; padding:0px;}
#menu02 a:hover {background-image:url("IMG/HiRes_02_aan.bmp");}
#menu02 a:active{background-image:url("IMG/HiRes_02_aan.bmp");}
#menu03 a {background-image:url("IMG/HiRes_03_uit.bmp"); width:14px; height:13px; z-index:2; padding:0px;}
#menu03 a:hover {background-image:url("IMG/HiRes_03_aan.bmp");}
#menu03 a:active{background-image:url("IMG/HiRes_03_aan.bmp");}
#menu04 a {background-image:url("IMG/HiRes_04_uit.bmp"); width:14px; height:13px; z-index:2; padding:0px;}
#menu04 a:hover {background-image:url("IMG/HiRes_04_aan.bmp");}
#menu04 a:active{background-image:url("IMG/HiRes_04_aan.bmp");}
#menu05 a {background-image:url("IMG/HiRes_05_uit.bmp"); width:14px; height:13px; z-index:2; padding:0px;}
#menu05 a:hover {background-image:url("IMG/HiRes_05_aan.bmp");}
#menu05 a:active{background-image:url("IMG/HiRes_05_aan.bmp");}
#menu06 a {background-image:url("IMG/HiRes_06_uit.bmp"); width:14px; height:13px; z-index:2; padding:0px;}
#menu06 a:hover {background-image:url("IMG/HiRes_06_aan.bmp");}
#menu06 a:active{background-image:url("IMG/HiRes_06_aan.bmp");}
</style>1. most browsers have no problem with leaving out the "px", but it is not valid!
2. I don't see this in moz 1.0 and 1.4 Which browser version are you using?
3. The declarations used in a:active are inherited by #menu0X a:active
The font value is applied to #menu01 a:active - hence Cascading Style Sheets.
4. Probably caused by the DTD putting IE into Quirks mode.
Place the following at the top of your page
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
Now see its effect in IE and Mozilla, with and without the above code.
Groetjes Fang2. Mozilla 1.5.
4. The doctype code was is in already. When I leave it out:
- Moz is okay, although images are placed 1 pixel too low, resulting in hiding of the image bottom;
- IE is okay, although images are placed 2 pixels too low.
What is going wrong?
Should I leave the #back, #forward, ..... {background-position:0px 0px; background-repeat:no-repeat;} line in?
Groetjes terug, Jochem
If you open the attached zip-file in IE, you'll see the page just as I want it to be. NS and Mozilla however show a different result.The changes offered by Fang unfortunately turned out not to be of any help, since they eliminate the CSS boxdescription.
So what changes should I make to get the same result with NS and Mozilla?
Remaining question: Should I leave the #back, #forward, ..... {background-position:0px 0px; background-repeat:no-repeat;} line in?
Cheers, Jochem
Change these lines:a:hover { text-decoration:none;}
a:hover span {font:14pt Arial; font-weight:bold; color:#0099ff; text-decoration:none;position:absolute; visibility:visible; z-index:2; padding:0px; top:-23px; left:5px; width:280px; height:26px; display:block;}
and all background-image
background-image:url("../IMG/back_uit.gif");
to
background:url("../IMG/back_uit.gif") no-repeat;
remove the line #back, #forward, ...
The #menu01 a is wrong and missing active and hover of sameI am sorry Fang, but...
1. Changing the line a:hover span {position:absolute; visibility:visible; .......} does not make any difference.
2. The line a:hover {font:13pt Arial; font-weight:bold; color:#0099ff; text-decoration:none;} however has to stay in as it was. Otherwise the Boxdescription will not show.
3. Changing background-image:url("../IMG/back_uit.gif"); to background:url("../IMG/back_uit.gif") no-repeat; and removing the line #back, #forward, ... causes all images to disappear.
4. I messed up indeed with #menu1 and #menu2. I fixed it. [01_aan.gif] should be shown by default.
--> As the code is now, all that is left to solve is the fact that the images still repeat in NS and Mozilla. They do not shift anymore.
Cheers, Jochem
Change all the lines mentioned in 3. and leave the line #back, #forward, ... in the script.It's done!!!background:url("../IMG/back_uit.gif") no-repeat; is replaced by background:url("../IMG/back_uit.gif"); background-repeat:no-repeat;.
That's all. Fang, bedankt voor je hulp.
Cheers, Jochem