background-image rollover problem ie6

[ukstoner]

hey all,
im currently trying to get to grips with pure css layouts, im not doing too bad, but im having problems with browser compatability. this is my current project http://www.robotnic.co.uk/ ive got the rollovers working on ie7 and firefox on both mac an pc but not in ie6 this is my code:

Code: Select all

 
#left a{
 margin-bottom: 6px;
 display: block;
 padding: 18px;
 background-image: url(../img/button_bg1.jpg);
 color: #0f0;
 text-decoration: none;
 width: 100%;
}
html>body #left a {
 width: 214px;
}
#left a:hover{
 background-position: -274px;
}

i would appreciate it if anybody could shed some light on this, also, is there an integrated development environment that allows you to test browser compatability as you go. I dont have ie6 installed so its difficult to test? alternatively, does anybody have any work flow tips on working with multiple browsers? do you just install every browser?? what about ie, can back level versions co-exist on the same computer?? also, i have to post test pages online so friends with macs can test them and send me screen shots, which is not ideal. is there a work around??

thanks in advance

ukstoner

[Aso]

Multiple IE allows you to install IE 6 (and optionally IE <6, though I would only recommend you need 6) whilst IE 7 is on your system.

Try removing;

Code: Select all

html>body

to solve your issues.

[ukstoner]

cheers - that multipleIE was exactly what i was looking for, foremore it has enabled me to fix my rollover problem:

Code: Select all

 
#left li{
 margin: 0px;
 margin-bottom: 6px; 
}
#left a{
 display: block;
 padding: 18px;
 background-image: url(../img/button_bg1.jpg);
 color: #0f0;
 text-decoration: none;
 width: 214px;
}
#left a:hover{
 background-position: -274px; 
}

i moved the margin-bottom attribute to the LI rather than the A and changed the width of the A to a px measurment rather than a percentage it works fine now! it has also enabled the stylesheet to work with both Firefox and IE back to ver6 without subsitution. I wasnt quite sure what you were suggesting i did with html>body!? also what was the reasoning in not installing anything less than ie6 - i took your advice...

[moojoo]

Multiple IE's is good. Got IE 5.5 - 8 with IE 7 standalone on m Parallels install and IE 5.5, IE 6 default and IE 7 Standalone on my boot camp install. Works well, saves loads of headache. Although IE 8 is a turd atm and should generally be avoided for at least the next 6 months.

as for your problem try this

Code: Select all

#left a{
 margin-bottom: 6px;
 display: block;
 padding: 18px;
 background: url(../img/button_bg1.jpg)no-repeat 0px 0px;
 color: #0f0;
 text-decoration: none;
 width: 100%;
}
html>body #left a {
 width: 214px;
}
#left a:hover{
 background: url(../img/button_bg1.jpg) no-repeat 0 -274px;
}

You can specify the background position in the background call itself e.g. left top, right center, etc etc.. And yes numerical values work as well.

[Aso]

Originally Posted by ukstoner

I wasnt quite sure what you were suggesting i did with html>body!?

html>body is an IE6 bypass hack that allows you to style elements for other (modern) browsers. This is why I suggested removing it, since IE6 was currently ignoring;

Code: Select all

html>body #left a {
 width: 214px;
}

Originally Posted by ukstoner

also what was the reasoning in not installing anything less than ie6 - i took your advice...

It's a shared belief (and personal opinion) that IE<6 have had their day, with an (extremely) small user base. And with the launch of IE8 in anticipation, soon will be the same for IE6 (hopefully ).

[ukstoner]

after installing Multiple IE would i be right in saying that my ver7 is set to stand alone? have you any idea what to expect when windows decides to upgrade me to ver8??

[moojoo]

My experience IE 8 broke my stand alones, so I rolled back to 7. IE 8 is far from ready and should be labled as alpha not beta. I would stick with 7 or even 6 as default and use the standalones for what versions you need. I install 5.5, 6, 7 just in case a client etc requires IE 5 compatability.

IE 8 is still lacking a lot of its "promised" features and should be avoided for a while.

http://www.mevans76.com/blog/ie-8-first-look