css image rollovers

**questions** · 07-30-2008, 03:11 AM

Hi,

Moving from another thread.
I'm trying to make a rollover using css where you see one part of the image (the top of it) normally and then another part of it (the bottom of it) when hovering over it. This is to avoid javascript.

Something really strange is happening. The "first" in the css series of items is not showing up, no matter where in the html table I put it. Meaning, one item in a list needs to be "sacrificed." This is really weird.

TEST IN FIRST CELL
http://www.freewebs.com/testpractic/...irst-cell.html
See how in the first cell the image is not showing up.
The image is the first in the css series here:
http://www.freewebs.com/testpractic/web2.css

TEST in FOURTH CELL
http://www.freewebs.com/testpractic/...urth-cell.html
Now if I move that "id" tag to the fourth cell, the image doesn't show up.
Again, in the css page it is the first in the series.

Here is the css list I'm talking about and in red is this image that disappears no matter where one puts it on the html page.



#colorsr1c1 {
display: block;
width: 200px;
height: 53px;
background: url(colors-acuarele.jpg);
text-decoration: none;
}
#colorsr1c1:hover {
background-position: bottom;
}

#colorsr1c2 {
display: block;
width: 89px;
height: 24px;
background: url(menu-colors.gif);
text-decoration: none;
}
#colorsr1c2:hover {
background-position: bottom;
}

#colorsr1c3 {
display: block;
width: 88px;
height: 24px;
background: url(menu-shapes.gif);
text-decoration: none;
}
#colorsr1c3:hover {
background-position: bottom;
}

#colorsr1c4 {
display: block;
width: 85px;
height: 24px;
background: url(menu-words.gif);
text-decoration: none;
}
#colorsr1c4:hover {
background-position: bottom;
}

#colorsr1c5 {
display: block;
width: 200px;
height: 53px;
background: url(colors-acuarele.jpg);
text-decoration: none;
}
#colorsr1c5:hover {
background-position: bottom;
}

Is this somehow crazy?
Whatever I put in that series first didn't show up.

**questions** · 07-30-2008, 03:15 AM

OK. I figured it out... but strange.
When I take this out of the css file, which proceeds the id that disappears, it all works...



I'm not sure why, though, I thought that didn't affect anything...

THANKS.

**TheJoshMan** · 07-30-2008, 03:26 AM

haha, wow... that's one of those "DOH!" type of goofs. Sorry I didn't catch that before, the reason that wouldn't work is because that is an "HTML Comment" you cannot have an HTML comment in an external CSS file due to the fact that CSS is not the same as HTML and will not recognize it as a "comment".

I guess I didn't pick up on it because I was taking your CSS and putting it directly into the page when I tested it.

To use a comment in CSS it should be done like this:

Code:

/* This is a CSS Comment */

**questions** · 07-30-2008, 05:43 AM

Thanks so much! Stupid things like this can be so time draining...

Do you know the answer to either of these:

1. Quotes or no quotes (CSS) - they both work and I've seen both "published":
a. background: url(colors-acuarele.jpg);
b. background: url("colors-acuarele.jpg");

2. How to insert this in the page. I tried putting <p></p> around it but it didn't help. I get errors because can't have this just floating? The location of where it should fall is in CSS.

HTML
<a href="colors.html" id="menu1">COLORS</a>

CSS
#menu1 {
position: absolute;
left: 50%;
margin-left: -411px;
top: 500px;
display: block;
width: 88px;
height: 24px;
background-image: url(menu-colors.gif);
}
#menu1:hover {
background-position: bottom;
}

W3 VALIDATOR ERROR
document type does not allow element "A" here; missing one of "P", "H1", "H2", "H3", "H4", "H5", "H6", "PRE", "DIV", "ADDRESS" start-tag.

**TheJoshMan** · 07-30-2008, 08:16 PM

To answer your first question, the proper way to define a background image in CSS is by using "single quotes" inside the parenthesis. See below:

Code:

background:url('image.jpg');

Secondly, the reason you are getting that error in the validator is because you are using the wrong doctype in the "head" of your page. To read up on doctypes and which ones are proper for the code you are using, follow the link below.

http://www.w3schools.com/tags/tag_DOCTYPE.asp

**questions** · 08-02-2008, 08:44 PM

Thanks on this.

Code:

background:url('image.jpg');

I've seen either no quotes or double " type quotes only... and they both worked out fine... but, I just checked here and you are correct:
http://www.w3schools.com/css/tryit.a...ckground-image

Then on this one, this is what I've got in the heading because someone here really advanced recommended it over Xhtml.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

All I can say is that I've put the images into a table now and it's fine.

THANKS!

Originally Posted by Nyne Lyvez

To answer your first question, the proper way to define a background image in CSS is by using "single quotes" inside the parenthesis. See below:

Code:

background:url('image.jpg');

Secondly, the reason you are getting that error in the validator is because you are using the wrong doctype in the "head" of your page. To read up on doctypes and which ones are proper for the code you are using, follow the link below.

http://www.w3schools.com/tags/tag_DOCTYPE.asp

**TheJoshMan** · 08-02-2008, 09:16 PM

Ok, the reason you are STILL getting errors with the validator is because you are using a "strict html 4.01" tag, but you have 2 XHTML meta tags in your source code.

Below I will highlight which items you need to change, and below that I will show you what to change them to so that you will validate with that doctype...

What to change:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="web.css" />

Change those two items to:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="web.css">

Do that and you SHOULD validate as valid HTML 4.01 strict