IE9 border issue (a kind of gradient on top and bottom) - css

I've updated my IE to IE9 and I've noticed the borders everywhere are not been rendered as well. I don't really not how to explain it.
Using Chrome, Firefox, Opera or Safari on this page - http://www.w3schools.com/css/css_border.asp - I can see the borders very well, but on IE9 I see those as the image.
http://i.stack.imgur.com/Tr24r.png
I've been researching a little about it, but seems no one else has a similar problem :( Any idea why this could be happening? On other PC's (friends, office) I don't see this problem on IE9, may be something wrong in my settings?
Window 7
Internet Explorer 9.0.8112.16421
Thanks in advance,
Regards.

Go to Settings (Gear icon) -> Internet Options -> Advanced tab. The first item in the list will be the checkbox entitled Use software rendering. Check (or un-check, if it is already checked) it, restart IE and see if there is any difference.
If it helps, try updating your graphics card driver and re-enabling hardware acceleration in IE.

Related

Anyone know why my Chrome browser's background-color acts up like this?

I'm using rgba colors, but after switching to HEX the problem still persists. I never had this issue a few weeks ago, and just noticed it. All opacities on rgba colors are set to 1 (100%), so they should appear. I assume it's a new chrome bug?
The left screenshot is Safari where it works and the right is Chrome.
safari vs chrome link
Same to me. I found a fix! Aparently there is a bug with webkit with the backface of a div element. This code will help
-webkit-backface-visibility: hidden;
You can found more info in w3schools.com -> here
Chrome appears to have some rendering bugs. Especially after GPU Driver Updates or Chrome Updates. A friend of mine had them for months.
You could try tuo update your drivers but theres no guarantee it helps.
Same happens to me. I tried to download Chrome beta. The weird rectangles do not appear there but the background color still does not act as it is supposed to. You can take a look at my page - the blue background color magically changes itself as soon as the whole landing page disappears.

Can anyone explain this firefox issue?

Here is the site: http://lju-silenter.rhcloud.com . If you load the site on chrome and then click on the yellow section, then the section completely fills the entire screen, however in firefox, there appears to be some problem with margins. I've looked through firebug, I can't seem to find what is causing the issue. Here are two images just to clarify what's going on:
Chrome version:
Firefox version:
Any insight into the issue would be really helpful. Thanks!
By navigating to #three, the browser may scroll to bring that element into view, even if you have overflow:hidden. It appears IE and Firefox do this, while Chrome does not.
You should change the ID of the target element to something like id="box-three", then make sure you adjust selectors accordingly to add that prefix.

I have a graphic not lining up properly in IE 8 and IE 9 on a custom Wordpress Theme

I'm hoping someone can help me with a little glitch in IE8 and IE9 with a graphic background not lining up.
If you view this link in IE8 or IE9, you'll notice the "step" in the background. http://sager.hiringhook.com/
I'm working with a custom theme created specifically for this site. Everything looks good in Chrome and Firefox, IE is just being a thorn in my side.
If anyone has a simple fix, please share..before I lose my hair.
I looked for the step you mentioned but didn't see any difference in the site from Chrome to IE8. The logo shifts down along with the featured photo in compatibility mode but nothing else seems to change across browsers. Do you have a screenshot of what you see in IE? I would love to replicate and help you solve the issue.

Link Text wrong color(s) in Firefox

Ok, weirdest thing....
Working at home and opened html document in Firefox 3.6 and my link text is wrong colors and looks multi-colored.
Any ideas?
Looks fine in IE, Chrome, Opera and Firefox 3.6 on my work machine.
I mean the difference is shockingly bad.
In this graphic the numbers in parenthesis should be simple light gray (#999) and the link text should be blue (#034ea2). But as you can see its all gone odd, green and yellow and forget the hover states... I am using percentage sizes on the text via CSS - but that shouldn't do this, should it?
This machine does differ from my normal work machine, but I don't think it's a windows setting as the colors look fine in other browsers.
This seems like an old IE problem - so it's freakin me out that good ole FF is doing it to me.
Any ideas?
Windows Cleartype was the problem. Must have been reset on my home machine by any number of Windows updates I've had in the last week. Thanks Joshusman! Sometimes the simplest things are the hardest fixes to find.
Try turning off ClearType in Windows, in case this is some weird subpixel rendering problem.
What you probably need is CSS Pseudo Classes

css rollover buttons- great in safari,and firefox/ ie but not chrome?

i've been trying out a bit of code posted to make image rollover buttons using only css,
this seems to work fine.
local testing showed no problems, IE, Firefox, safari all ok. even chrome displays as intended on the local version.
Once i move to a hosted test, IE, Firefox and Safari all display as intended but chrome offsets all the buttons right about 8-10 pixels.
here's the test page
http://www.fierysurprise.pwp.blueyonder.co.uk/bga/bgd.html
can anyone enlighten me as to what's happening?
site built in Kompozer
I assume you're referring to the squares under the "architectural design..." phrase.
I can't recreate this problem in Chrome v5.0.375.125.
What version of chrome are you using? Chrome tends to doggedly cache resources. Have you tried a cache refresh?
What version of Chrome are you using? I looked at your site in Chrome 5 and can't seem to tell a difference between any of the browsers you've mentioned.

Resources