[Solved] mouse highlighting inconsistencies between browsers (???)

I have a strange (and maybe dumb ! it seems crazy I never had to handle this before but I didn’t) question for you but a client of mine - I am working on his website, which is Work In Progress - noticed that when you highlight text with the Mouse the highlighting is not very readable.

I checked and it turned out Mac FF 2 and Safari are alright while IE7 PC and FF2 PC are not. Results are not consistent and PC rendering is not very nice.


IE7



FF2 / PC



FF2 / Mac




Safari



Before I do some digging, I thought one of you might have a clue... how do I make sure this is consistent and (it might be very simple) how do I style this with CSS ?
Thanks !

Interesting question David, but I think it depends on the software e.g. IE and FF instead of CSS.. I could be wrong.

My answer to the client exactly !
But I was unsure... It’s somehow re-assuring to see I am not the only one

Maybe there is some unset styles in the CSS which influence this, I am not sure.
I’ll check colors and background colors to make sure.

If you need acces to the web page and check the styles, I’ll PM you a link (since it’s in prod, don’t want to post it here).

David,

My highlighting works the same in FF2/WinXP as it does in IE7, Opera 9.2 which is the same as your IE7 image. Safari 3 is the same as your Safari.

I am unsure as to why there is a difference in your FF2/Win version since I have never seen anything different. I wonder if you are running it on Parallels or on a PC. I would only assume that this is related to the default chrome in FF2 but I have never seen it that way in any PC version of FX.

After checking FF in OSX I can safely assume that highlighting is tied or relates to the OS somehow since the FF in OSX looks the same as Safari on the PC and Mac.

Who knows. I think you may have some real searching to do but I don’t think that you could control it from the HTML or CSS without some JS wizardry that controls the user chrome.

Best of luck.

Jay

No it’s not Parallels but a PC laptop running Windows Vista, and it’s not only FF/Win but also IE7...

It was my understanding this was controlled by the OS and Browser, and that’s what I said to the client but he insist this is an issue thus I have to solve it (or at least understand it)...

I’ll keep you posted !
If anyone has an idea, I’d be glad to hear it

Here is the (voluntarily unlinked) url : (Edit: removed)

The problem seems to be that #contenus has a background image and default background-color: transparent;
Try setting #contenus background-color: #fff; in the stylesheet.

David,

Rachael is right. If you add a background color #fff to the #contenus works as you would like.

I suspected that it was related to background-colors, it confirms my intuition !
I’ll test this tomorrow morning (getting late here in Paris !)

Thanks for your help, I am pretty sure it will solve it

Ok guys the solution indeed works by defining a background-color for #contenus

Thanks again for your help !

Thats cool! I didnt know about that.

Thanks for sharing guys