PDA

View Full Version : <span> Hover not working in IE6


Rob_Che
08-26-2008, 08:43 AM
Look here: http://www.wireroses.co.uk/test.htm . . .

Take a look at the quick links section.
In FF (2/3) and IE7 there is a rollover effect.
What it's meant to do is show a small image between the two rows of boxes... (I have it as a 1,2,3,4 for testing)

In IE 6 the hover effect and span/hover don't show.
Not the most successful menu I've ever created :roll:

So... I don't think that the bg hover works in IE6 but can the <span> effect be made to work ?

Cheers
Rob

domedia
08-26-2008, 01:00 PM
What are you dong to display the box now?

Rob_Che
08-26-2008, 01:51 PM
Here it is... I've been doing some googling and it looks like I may need a color attribute to carry it... ?

#sidebarMenu {
width:166px;
height:158px;
padding-top: 8px ;
margin: 85px 0 0 25px;
position: relative;
}
#sidebarMenu img {
float:left;
margin: 30px 0px 8px 8px;
background:#3f4e4e;
padding:4px;
width:62px;
height:62px;
}
#sidebarMenu a:hover img {
background: white;
}
#sidebarMenu a span {
display:none
}
#sidebarMenu a:hover span {
width: 146px;
height: 34px;
display:inline;
position:absolute;
top:0;
left: 9px;
top: 110px;
padding: 0;
}
.collection_1 {background:url(../images/sidebar-span1.gif) no-repeat top left}
.collection_2 {background:url(../images/sidebar-span2.gif) no-repeat top left}
.collection_3 {background:url(../images/sidebar-span3.gif) no-repeat top left}
.collection_4 {background:url(../images/sidebar-span4.gif) no-repeat top left}

domedia
08-26-2008, 02:16 PM
it's a box that you set width and height on. display block, not inline. Inline is when it's part of the flow of the text. Color has nothing to do with this :)

Not sure if this will work, but it's kinda hard to debug it from here.

In '#sidebarMenu a:hover span' you are defining 'top' twice. This is not an error, the second one just cancels the first one out, but make sure you use the one you want.

Rob_Che
08-26-2008, 02:58 PM
Cheers Domedia,

re; color.
I know it makes no logical sense but after reading this article http://csscreator.com/node/1620 it seemed to be the same problem ?

It's so annoying not being able to test it at home though... (DO NOT get me started on virtual PC :) !)

Rob

domedia
08-26-2008, 04:11 PM
ok, go ahead and try then, but I've never heard about that before.

Why can't we ask you to get a proper testing environment? :-) (you lazy &^$&^%$#)

africano
08-26-2008, 05:21 PM
Nothing to do with your problem but I was just reading some posts and I really like your designs(Ive been to your site ROB...). Some really great work. Is everything your own work? I mean, how do you people do it, do you make everything from scratch for example patterns for backgrounds, some paint splatters that Ive seen you use....or do you start off with an image and modify it? Use photoshop brushes, etc?

Anyways just curious, your work on your website is really impresive hopefully someday ill be able to design like that... Nice work mate.
pointless post I know...:( But just happened to be browsing!:grin:

Rob_Che
08-26-2008, 06:12 PM
ok, go ahead and try then, but I've never heard about that before.

me neither - no harm in trying !

Why can't we ask you to get a proper testing environment? :-) (you lazy &^$&^%$#)

I TRIED ! :) it kept saying that my operating system wasn't supported (16 & 32 bit versions)

...how do you people do it, do you make everything from scratch for example patterns for backgrounds, some paint splatters that Ive seen you use....or do you start off with an image and modify it? Use photoshop brushes, etc?

From scratch if possible.
Never start with a blank page ! It's like writer's block... too daunting, too difficult to make a mark.
I start with an image - maybe a scanned piece of old paper or some found texture or image... You may end up deleting that layer but it gets you started. I'm trying to get some tutorials up for the Photoshop section of the site. Setting up your workspace for web/print etc...

I'm totally self taught though so I may make some errors! :roll: They work for me though! :wink:

Rob_Che
08-26-2008, 06:22 PM
OOH LOOK HERE RE IE VERSIONS! (http://tredosoft.com/Multiple_IE)

domedia
08-26-2008, 06:37 PM
Don't do it Rob.. bad idea.. get a virtual machine.. If you need help setting one up let me know what exactly the problem is, you know how to get a hold of me.. that link is going to screw up your OS eventually.. Many and I have done it :)

Another option is to get a cheap PC, a handmedown and just install the browser there

Corrosive
08-26-2008, 06:52 PM
Don't do it Rob.. bad idea.. get a virtual machine.. If you need help setting one up let me know what exactly the problem is, you know how to get a hold of me.. that link is going to screw up your OS eventually.. Many and I have done it :)

Another option is to get a cheap PC, a handmedown and just install the browser there

Just going to crash this thread a bit more gents. If I wanted to run a browser each for my two machines. Which ones should I run? I have IE6 on my non-internet PC (I am never connecting/sacrificing this to the net btw) and IE7 on my net PC. Shall I just put FF on my net machine and then test the wonder that is IE6 on my other one?

Rob, you truly are a photoshop icon 8-) :wink:

Rob_Che
08-26-2008, 07:05 PM
Don't do it Rob... that link is going to screw up your OS eventually..

Damn it :(

domedia
08-26-2008, 08:01 PM
Just going to crash this thread a bit more gents. If I wanted to run a browser each for my two machines. Which ones should I run? I have IE6 on my non-internet PC (I am never connecting/sacrificing this to the net btw) and IE7 on my net PC. Shall I just put FF on my net machine and then test the wonder that is IE6 on my other one? Yeah, this is what I would do. But serisouly guys.. Microsoft is giving away their Virtual PC for free! You should be *all* over this :) Install Ubuntu as well, and shock DJ with your new skills ;)

d a v e
08-26-2008, 09:04 PM
this is a good alternative too
http://www.my-debugbar.com/wiki/IETester/HomePage

Rob_Che
08-26-2008, 09:36 PM
I have vitual PC installed on my computer *takes a bow*

No idea where IE6 is (yet) - I'm on it though...

Rob_Che
08-27-2008, 11:08 AM
this is a good alternative too
http://www.my-debugbar.com/wiki/IETester/HomePage

This isn't bad actually. I'm using it now...

(once I realise how to work this Virtual thing...)

domedia
08-27-2008, 01:24 PM
I have vitual PC installed on my computer *takes a bow* Great, this is what I initially told you to do first :)

No idea where IE6 is (yet) - I'm on it though... Just follow the instructions. Installing a vitrual mcahine is 1000 times easier than learning Photoshop. ;-)
1. Start Micrososft Virtual PC
2. Choose New virtual machine wizard

Rob_Che
08-27-2008, 09:45 PM
Iremoved the "img" and replaced with simple "a" tags...

From this:

#sidebarMenu img {
float:left;
margin: 30px 0px 8px 8px;
background:#3f4e4e;
padding:4px;
width:62px;
height:62px;
}
#sidebarMenu a:hover img {
background: white;


To this:

#sidebarMenu a {
float:left;
margin: 30px 0px 8px 8px;
background:#3f4e4e;
padding:4px;
width:62px;
height:62px;
}

#sidebarMenu a:hover {
background: white;
}
You dig ?

domedia
08-28-2008, 12:52 PM
Looks good to me :)