css and ie6 for showing pics in divs (Full Version)

All Forums >> [Web Development] >> Cascading Style Sheets



Message

ThomasMobley -> css and ie6 for showing pics in divs (9/11/2007 18:15:10)

Here's what I've been playing with in my quest for css knowledge. I think it's called a rollover. I display three small images on the right side of the page, and when I hover over them I want a larger size of the same image to display in a div on the left side of the page. I got it to work in ie7, ff, and opera, but can't seem to get it to work in ie6. I've tried all the tricks I've used successfully in menus to no avail. Anyone got a clue?

One thing that seemed odd, to make it work in ie7 i had to include an anchor. The anchor worked in ff and opera as well, but I knew I'd need an anchor for ie6 and didn't want to double the anchor in that case so I took it out, but ie7 quit working then, so I included an if for ie7 to place an anchor in my li.

The url of the html page is http://faggotsinthefire.com/Pictures/hovertest/divtest.html
The original css is at http://faggotsinthefire.com/Pictures/hovertest/my.css
and the ie6 stylesheet is http://faggotsinthefire.com/Pictures/hovertest/ie_menu.css

If anyone could assist I'd appreciate it. Seems like it could be useful with a scrolling div on the right for thumbnails on my pictures pages, but if it doesn't work in ie6 I'd have to make the user use the link and reload and use asp to load the div or resort to that as well as javascript if it's enabled, which would kinda suck. I'd like a css answer to this if someone has one.



Tailslide -> RE: css and ie6 for showing pics in divs (9/12/2007 2:52:30)

IE is well behind the other browsers when it comes to, well pretty much anything except for usage! A good example is how IE6 can only do hover effects when there's a link present unless you employ a little trickery.

You've got a load of conditional comments in there feeding IE7 a link around the images - I'd take out those conditional comments and just leave the link there for all browsers - it won't do any harm and should help IE6 and under too.

You've got another couple of options which you could use here - you could try removing all the links and adding a small file known as whatever:hover which is a small script that basically slaps IE around a bit until it shows hover effects properly. I upload the file to the web server and then add this in the document head of the page that I need the hover effects on:

<!--[if lt IE 7]>
<style type="text/css">
body {behavior: url(scripts/csshover.htc);}
</style>
<![endif]-->

This feeds IE browsers less than IE7 the script which you can get here: http://www.xs4all.nl/~peterned/csshover.html

The other option is to move away from a CSS-only effect and add in a little Javascript. I used to try to avoid Javascript at all costs BUT in some ways it is the correct thing to use in this case as it's a behavioural issue rather than a presentational one (for which you use CSS). I've used a nice script from Dynamic Drive: http://www.dynamicdrive.com/dynamicindex4/thumbnail2.htm Here's my example of it (just for fun) http://www.littleblueplane.com/test/flying1.html

I like this particular script because it's fairly accessible, you can stick captions on there, you can add links to the thumbs or the large images and with JS off it doesn't break badly (I've got a background image on the div where the slideshow appears so that you always see something).



ThomasMobley -> RE: css and ie6 for showing pics in divs (9/12/2007 11:45:32)

Thanks for the assistance Tailslide, but I managed to get it working 100% css. I finally tried putting a second image in a span inside the anchor and was able to move it about, instead of moving the image. Might still be a better way to do it, but this seems to work pretty well.



Page: [1]

Valid CSS!




Forum Software © ASPPlayground.NET Advanced Edition 2.4.5 ANSI
0.078125