My customer is telling me there are black outlines around the elliptical links on this page
http://animactions.ca/volet_entreprise.php
when using Internet Explorer. None of my pc's show this and i'm not sure how to fix this.
Thanks
It seems to be the outline of the coordinates area, set your CSS there as folows:
p.style2,
p.style2:focus,
p.style2:active,
p.style2:hover {outline:none; border:0;}
Should take care of it, but if not you may try:
p.style2 map,
p.style2 map:focus,
p.style2 map:active,
p.style2 map:hover {outline:none; border:0;}
Hope it helps...
Btw: I've tested that link on FF, IE 7 & 8, Safari, Chrome and Opera Over Windows, and FF over Linux and it was all ok... my guess is that you're client has an old browser's version that needs to be updated
It's probably because you're using 24-bit .png background images with alpha transparency and your client must be using IE6 (which doesn't natively support this). If this is the case then you need to implement a PNG transparency script. Here are a few:
http://www.twinhelix.com/css/iepngfix/
http://www.dillerdesign.com/experiment/DD_belatedPNG/
http://jquery.khurshid.com/ifixpng.php
Some browsers show a border around images inside <a> elements, though off my head it's a blue border rather than a black one. Try border: none instead of outline: none.
EDIT I can't reproduce it either.
Related
background: linear-gradient(7deg, currentColor 50%, transparent 50%)
The color of the element is
As soon as you inspect the element in IE it reveals that the specificity war is won.
.. But now comes the super strange part .. as soon as you inspect it the color flashes to the correct color .. Best test this in IE11 for yourself – The site is live at www.cubesports.de.
The wrong color only occurs on the absolute positioned .deviders
The issue occurs in EDGE aswell, but my browserstack somehow always reloads the page when I want hit "inspect element", so I can't tell if the strange crazy "fix" occurs here aswell.
What is going on here?
You can use the Gradient Generator: http://www.colorzilla.com/gradient-editor/
With it, that issue can be solved in IE ;)
This has been a reported and known bug with these browsers see here.
Your best solution at present unfortunately is to avoid its use if you are looking to fully support IE 10 + as well as Edge.
I have an SVG icon and a corresponding PNG icon.
My goal is to load SVG icon when the browser supports it and PNG icon when the browser doesn't support SVG(IE8, IE9-quirks) using SVG Fallback.
I also have a restriction that I should use only sprites.
I have built the sprites individually, no problems on that front.
Now I do the following.
for a span with class 'abc',
span.abc {
background: url(sprite.png) bg-posn-x bg-posn-y;
background: rgba(0,0,0,0) url(sprite.svg) bg-posn-x bg-posn-y;
width: npx;
height: npx;
}
The trick is that browsers that don't support rgba fall back to the previous background delcaration.
This works perfectly in standards, but not ie8, ie9 quirks.
Unfortunately, I should not convert my page to standards.
Did anyone face this issue previously/ know how to solve it?
I would suggest using something like Modernizer to do feature detection to get around this, relying on browser fallback can be a pain in the butt sometimes. Check here: http://modernizr.com/docs/
It will add classes to the body like "no-rgba" so you will know when to do a work around.
I have a bit of a problem with text color in chrome.
i am using a class in CSS:
.game_info{font-size:3; font-weight:bold; color:#000000;}
as you can see, i want the text color to be black. this works well for FF and IE, but in chrome i get a different color.
this is the HTML code:
<a class="game_info">
Achilles is an awsome online adventure game. Fight your enemies using spears, cutting heads of enemey and scaring them!
Very Bloody game! there are Survival mode and Normal Mode. ENJOY !</a>
you can view the page is http://www.sababagamesonline.com/Achilles.php
Yoni
change the class a.game_info{}
I'm seeing black text in FF and Chrome on the site you linked. Have you tried clearing your browser cache?
Using:
Windows XP SP 3
FF 3.6.13
Chrome 8.0.552.237
IE 7.0.5730.13
Black is applied in all browsers when inspecting the CSS applied using webtools. Hex colour finder is also showing black rendered in my browsers. Do have specific browser versions you are using? How are you determining the colours shown are different?
devmau5
building a website for a touch PC and need to know how to make the cursor disappear completely in opera.
Any suggestions?
You could try the following CSS rule:
cursor: none;
That's likeliest unlikely to be supported, as it was introduced in CSS3, and has not yet reached wide adoption.
If that's not supported in Opera, you could try:
cursor: url('/path/to/empty/image.format');
That should set the cursor to appear as that image, which could be a blank/transparent 1x1 image.
EDIT: It looks like neither of these options is supported yet in Opera (though both are valid CSS3.) . Pending another idea, my above examples won't work in Opera.
Quirks Mode has an excellent grid where you can test out the support for each property: http://www.quirksmode.org/css/cursor.html Just mouseover each column name to see how it renders in Opera.
Has anybody else encountered this. Whenever the images are intially loaded by the browser it only shows the last-half of the image. Then when I mouse over anywhere in the green section it immediately displays the rest of the image.
What you're seeing here is a <div> with a background-image and a <img> located within said <div>.
I'm encountering this issue using Safari 3.2.3 for Windows and my colleagues have seen this using the Mac version. None of the other browsers I have tested this in seem to show the same bug. I've tested in IE8, IE7, IE6, FF3, Chrome, and Opera.
Let me know if you've heard of any fixes. Thanks.
Safari Image Bug http://www.pixelwhiskey.com/images/safari_image_bug.jpg
Try using PNGs instead if GIFS
I've seen issues similar to this with IE rendering solved by setting height: 1% to the affected div or to an element nested within it. I've never seen it in Safari though.
Inspect all of the elements near the image in Firebug (yes, I know the problem is in Safari) and make sure none of them has the wrong size for any reason, and none of them has excessive padding that encroaches the image you're not seeing correctly. Also, try setting overflow: visible; on the style for various elements in the vicinity; I've seen mouseover flickers in the past, but nothing that couldn't be overcome with CSS.