PDA

View Full Version : why wont this work in IE?



jasondavis
Sep 9th, 2007, 06:12 PM
The code below looks great in firefox but does not seem to use the padding part at all in IE, any help please


<style type="text/css">
img {
background: #fff;
padding: 3px;
border: 1px solid #ccc;
}
img:hover {
background: #ccc;
padding: 3px;
border: 1px solid #ccc;
}
</style>
<img src="http://ams01.umicache.com/p/virb.com/crop_90x90/PageImage-123395-587103.jpg" alt="PageImage-123395-587103" />

Jutlander
Sep 9th, 2007, 06:33 PM
IE versions below 7 does not support the :hover pseudo class on anything other than links.

EDIT: forgot to write that it was on links.

abduraooft
Sep 9th, 2007, 06:34 PM
IE won't support the pseudo hover on elements other than <a>
Thus a code like

<style type="text/css">
img {
background: #fff;
padding: 3px;
border: 1px solid #ccc;
display:inline;
}
a:hover {
background: #ccc;
padding: 3px;
border: 1px solid #ccc;
margin-left:-3px;
}
</style>

<a href="#" ><img src="yourimg-url" alt="PageImage-123395-587103" /></a>
may give you the desired effect in IE.
But it may trouble FF,so you have to think about IE's conditional comment.

jasondavis
Sep 9th, 2007, 07:16 PM
thanks for the replies I'm not much of a designer more of a php/mysql guy

can someone help me, I just need a style to show a border around images but have the outside edged be black and the gap from the edge of border to where image starts be white so it looks like a white border with a black stripe around the edge and when you hover over it, the white turn grey

harbingerOTV
Sep 9th, 2007, 07:59 PM
for the hovering you can use:

http://www.xs4all.nl/~peterned/csshover.html

for ie lte 6

for the padding, you probably need a strict doctype. I do the double border thing like your trying all the time, but I also use html strict.

Jutlander
Sep 9th, 2007, 08:03 PM
This works in IE 7 and Firefox and Opera, but not IE 6.

See if I can find a workaround.


<!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></title>
<style type="text/css">
a img {
background: #fff;
border: 1px solid #000;
padding: 4px;
}
a:hover img {
background: #bbb;
}
</style>
</head>

<body>

<a href="#"><img src="test.gif" alt="test"></a>

<br><br>

<a href="#">Link test</a>

</body>
</html>

harbingerOTV
Sep 9th, 2007, 11:43 PM
<!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></title>
<style type="text/css">
a img {
background: #fff;
border: 1px solid #000;
padding: 4px;
}
a:hover img {
background: #bbb;
}
a.img {
font-size: 0px;
}
a.img:hover {
background: #bbb;
}
</style>
</head>

<body>

<a href="#" class="img"><img src="test.jpg" alt="test"></a>

<br><br>

<a href="#">Link test</a>

</body>
</html>


ie 6 now as well

jasondavis
Sep 10th, 2007, 04:08 AM
<style type="text/css">
a img {
background: #fff;
border: 1px solid #ccc;
padding: 4px;
}
a:hover img {
background: #bbb;
}
</style>

<a href="#"><img src="thumb.jpg" alt="test" border="0"></a>

this code works great, only problem is, it add this affect to every image, how can I make it only do it on some images? thanks for the help guys

felgall
Sep 10th, 2007, 04:45 AM
To only affect some images give those images a class and replace the img references in the stylesheet with .classname references.

vexen
Sep 10th, 2007, 05:20 PM
or, if the images are in a particular <div> using an id ( <div id="maincontent">, you could select them using the cascade :

for example, in maincontent :

#maincontent a:hover img