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/test-first-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/test-fourth-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.
<!-- COLORS menu rollovers - ROW 1-->
#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.
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/test-first-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/test-fourth-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.
<!-- COLORS menu rollovers - ROW 1-->
#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.