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.
Related
The history auto fill sits on a random place on IE8.
While the same works fine on IE9, IE10, firefox and chrome.
here is a snapshot of the issue.
I have been searching for this from a long time.
Is there any solution for this?
I'd suggest right clicking the item, inspecting the element in your dev tools, finding what the id is of that autofill dropdown. See if there is some css attatched to that item. and then if necessary add some sort of CSS hack. below is a link to some tricks to target IE specifically. IE often requires little style hacks unfortunately. Hopefully the more they implement html5 standards the better this will become.
http://css-tricks.com/how-to-create-an-ie-only-stylesheet/
I've got this project that I'm working on, and it's displaying differently in different browsers (imagine that). The CSS works fine in every browser I've tried (chrome, safari, firefox) except for IE11 (again, imagine that). Here's a picture of the IE version:
Here's what it's supposed to look like:
Now, I've looked through the dev tools on both Chrome and IE, and here's the results.
IE:
Chrome:
So, as you can see in the picture, in IE, the bwizard-steps button::before and bwizard-steps button::after are marked out, yet they are working as intended in Chrome.
Any ideas why this would be? I've looked it up, and IE11 is supposed to support the ::before and ::after tags. Yet it is clearly ignoring them. I've even tried going into compatibility mode for IE, and that just looks even worse.
I have had similar problem.
Solution that worked for me was giving the button overflow: visible;
Working example (IE9+): http://jsfiddle.net/aBfF8/1/
The problem is likely that you have button tags as direct descendants of ul tags. In valid HTML markup, the only direct children of a ul should be li.
You should wrap you buttons in li tags - but then you're going to have to make some CSS changes so that your list items aren't vertical. float: left; on them among other changes to make them appear the way you want.
Edit: I can provide a better-detailed solution of exact improvements you can make if you provide me with the appropriate HTML and CSS (ideally in a jsfiddle)
I'm working on some boxes where I'm forced to using the following css on a div in order to make it look right:
display:table;
It works fine in Firefox + Internet Explorer, but I just noticed that it adds a 1px border/margin/padding in webkit browsers (Safari / Chrome), which moves the box a bit... How can I get rid of this?
I've uploaded a picture example of how it's rendered:
http://imageshack.us/photo/my-images/854/examplez.jpg/
Is there a "simple way" of determining in the stylesheet whether you are using a webkit browser or not? Because then I could just add a "margin-left:-1px".. I know there is a way of determining the browsertype in jQuery, but I think it's kind of overkill for this..
Works in IE8 & Mozilla
select:focus, input:focus,textarea:focus
{
background:#abd533;
font-family:verdana;
}
While using IE7, I observed that input field background color not shown, but it appears in IE8 & Mozilla.
Can anyone please let me know what to do with IE7 or IE6 ?
It is a bug in IE7
See
Basic Selector Support Tests
You can use javascript to detect focus and change the class name.
i would to show you this link. It deals with a lot of browser issues:
http://quirksmode.org is pretty good for listing browser bugs and compatibility.
Taken from my question:
Collection of Browser characteristics
Just want to add this cause this sites helped me a lot.
I think you've encountered one of Internet Explorer's (many) bugs.
For IE6 and 5, this page is quite useful for form control styling: Styling Form Controls
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.