justa messenger
06-05-2009, 02:30 PM
Hi, first of all i'm a bit new to this, but Compleet noob. pls be kind :)
Ok, so my issue is i have a type of image gallery made with spans.
I have the span tags enclosed by the <a href> tag. Spans are floating.
The reason for this is that I want to have the border change colors on hover,
wherever the pointer might be located in the span.
It works great in firefox and IE8, but i just discovered this morning, much to my dismay,
that it doesn't work in IE7 or below. of course it was the person i'm making the web
page for that pointed this out, go figure. The problem is that eventhough IE shows
that it is a link, when clicking on the image, nothing happens. text works find,
the area around image and text works fine, just not the image.
I tried searching google for a couple hours and could not find a fix that didn't involve
javascript. I'm trying to avoid JS as much as possible, and so far all has gone well.
Ok down to the nitty gritty.
I stripped down the html so that it just shows one of the spans, so if you drop the code
into notepad and save as htm you can play with it. css link is complete to my hosted css file.
honestly im not sure why im using that doc-type, i don't completely unerstand the mechanics,
i just thought for no sound reason at all that it would be better than html doc type.
xhtml 1.0 validates and css validates as 2.1.
<?xml version="1.1" encoding="utf-8"?>
<!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" xml:lang="en">
<head>
<title>Bella Luna Gifts for the Soul - Wands</title>
<link rel="stylesheet" type="text/css" media="screen" href="http://www.bellalunagifts.net/main.css" />
<!--[if IE]>
<style type="text/css" media="screen">
body {
behavior: url(csshover.htc);
font-size: 100%;}
#menu ul {text-align:left;}
#menu ul li {float: left; width: 100%;}
#menu ul li a {height: 1%;}
#menu a, #menu h2 {
font: bold 12px/16px arial, "lucida console", sans-serif; padding: 3px 2px;}
</style>
<![endif]-->
</head>
<body>
<div id="page-container">
<div id="content">
<a href="http://www.bellalunagifts.net/rose_quartz_healing_wand.htm">
<span class="thumbnailleft"><img class="image" src="products/tn/rose_quartz_healing_wand.gif"
alt="Rose Quartz Healing Wand" width="150" /><br/><br/>Rose Quartz Healing Wand<br /></span></a>
</div>
</div>
</body>
</html>
If you just wanna glance at the css affecting the span and image, here it is.
.thumbnail {
float: left;
width: 150px;
height: 210px;
margin: 0 20px 15px 0px;
padding: 5px;
text-align: center;
border-style: ridge;
border-color: #3333FF;
text-decoration:none;
}
a {text-decoration: none;color: #000000;}
a:link .image {border-style: none;}
a:active .image {border-style: none;}
a:hover .thumbnailleft {
border-color: #00CCFF;}
a:hover .thumbnail {
border-color: #00CCFF;}
a:visited {text-decoration: none;color: #000000;}
a:visited .image {border-style: none;}
and i dont know why my docs are .htm instead of html.....long time ago i had a reason
that may or may not have been valid but i should probably change to .html, yeah?
well the link to the page im working on is
http://www.bellalunagifts.net/wands.htm
this is the last immediate piece of foundation code that i need to figure out to start rolling
out the rest of the website. this is the first time i've posted for help, i really do try to
figure out stuff on my own, but am ready to throw my head through the screen right now.
and hell, if i'm goin about this in a silly way, pls tell me. i always welcome criticism.
any help would be much much appreciated. i'm gonna keep trying to figure this out, but
i'm hoping that one of you already knows what i'm doing wrong. i know my css code is probably
redundant in places, but for now i'm just working on getting things to work.
thx in advance for any reply.
Ok, so my issue is i have a type of image gallery made with spans.
I have the span tags enclosed by the <a href> tag. Spans are floating.
The reason for this is that I want to have the border change colors on hover,
wherever the pointer might be located in the span.
It works great in firefox and IE8, but i just discovered this morning, much to my dismay,
that it doesn't work in IE7 or below. of course it was the person i'm making the web
page for that pointed this out, go figure. The problem is that eventhough IE shows
that it is a link, when clicking on the image, nothing happens. text works find,
the area around image and text works fine, just not the image.
I tried searching google for a couple hours and could not find a fix that didn't involve
javascript. I'm trying to avoid JS as much as possible, and so far all has gone well.
Ok down to the nitty gritty.
I stripped down the html so that it just shows one of the spans, so if you drop the code
into notepad and save as htm you can play with it. css link is complete to my hosted css file.
honestly im not sure why im using that doc-type, i don't completely unerstand the mechanics,
i just thought for no sound reason at all that it would be better than html doc type.
xhtml 1.0 validates and css validates as 2.1.
<?xml version="1.1" encoding="utf-8"?>
<!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" xml:lang="en">
<head>
<title>Bella Luna Gifts for the Soul - Wands</title>
<link rel="stylesheet" type="text/css" media="screen" href="http://www.bellalunagifts.net/main.css" />
<!--[if IE]>
<style type="text/css" media="screen">
body {
behavior: url(csshover.htc);
font-size: 100%;}
#menu ul {text-align:left;}
#menu ul li {float: left; width: 100%;}
#menu ul li a {height: 1%;}
#menu a, #menu h2 {
font: bold 12px/16px arial, "lucida console", sans-serif; padding: 3px 2px;}
</style>
<![endif]-->
</head>
<body>
<div id="page-container">
<div id="content">
<a href="http://www.bellalunagifts.net/rose_quartz_healing_wand.htm">
<span class="thumbnailleft"><img class="image" src="products/tn/rose_quartz_healing_wand.gif"
alt="Rose Quartz Healing Wand" width="150" /><br/><br/>Rose Quartz Healing Wand<br /></span></a>
</div>
</div>
</body>
</html>
If you just wanna glance at the css affecting the span and image, here it is.
.thumbnail {
float: left;
width: 150px;
height: 210px;
margin: 0 20px 15px 0px;
padding: 5px;
text-align: center;
border-style: ridge;
border-color: #3333FF;
text-decoration:none;
}
a {text-decoration: none;color: #000000;}
a:link .image {border-style: none;}
a:active .image {border-style: none;}
a:hover .thumbnailleft {
border-color: #00CCFF;}
a:hover .thumbnail {
border-color: #00CCFF;}
a:visited {text-decoration: none;color: #000000;}
a:visited .image {border-style: none;}
and i dont know why my docs are .htm instead of html.....long time ago i had a reason
that may or may not have been valid but i should probably change to .html, yeah?
well the link to the page im working on is
http://www.bellalunagifts.net/wands.htm
this is the last immediate piece of foundation code that i need to figure out to start rolling
out the rest of the website. this is the first time i've posted for help, i really do try to
figure out stuff on my own, but am ready to throw my head through the screen right now.
and hell, if i'm goin about this in a silly way, pls tell me. i always welcome criticism.
any help would be much much appreciated. i'm gonna keep trying to figure this out, but
i'm hoping that one of you already knows what i'm doing wrong. i know my css code is probably
redundant in places, but for now i'm just working on getting things to work.
thx in advance for any reply.