I'm trying to put an icon inside a button element and I'm getting strange positioning but in Firefox 4. Check out this demo http://jsfiddle.net/j6q2e/3/
It works as expected in Chrome and IE but in Firefox the icon is completely off the reservation. Is that a known bug? Is there a way to fix that?
(I don't want to use <a> because it's a submit button for a form and I want to keep it that way. I also would like to avoid using background-image style because the icon is in a CSS sprite image and to use as background-image I'd have to save it as a separate PNG.)
Just a quick update to get this thing "answered"...
So yeah, this is a bug in Firefox, and still is as of version 5. Chrome, IE9 and Opera all correctly position the icon inside the button.
There is another SO thread dealing with it and here's the Mozilla bug.
You should be able to keep it as a sprite and use it as a background image, just adjust the space around that image to allow for the size of your button. You might want to also consider diagonal sprites to help solve your problem.
Related
On succession of a previous question I tried to find out if the next thing is possible:
Take you have a render, like a soccer player with a transparant background. You add this render to your html & css. The transparant parts are now part of the image 'box'; you can't click on links under the image transparant parts, but you can see them.
Is it possible to make these links clickable? Thus having the image as highest z-index, but still have the links clickable and working.
(the links have a lower z-index because their background then stops under the image, giving a nicer design)
(Or said otherwise: have a .png image with a transparant background not shown as a box, but as only the colored pixels. Preferable only in html/css)
I think it is not possible, to be honest. If you do not yet understand my question, maybe my previous will help you:
need help fixing the link's clickable area
You can use pointer-events to make an event (click in this case) bubble through to the layer below.
No, it's not possible from what I'm aware of. However you can do similar things to what you want that may be useful:
Turn an area into a link using <map>
Use pointer-events:none so that clicks are ignored on the top element
IE 10 provides the non-standard msElementsFromPoint method that allows you to "peek below" an element; you can do that inside the click handler and determine if the click point overlaps an anchor. If it does, triggering that element's click event would do what needs to be done.
Unfortunately I am not aware of similar functionality for other browsers or earlier versions of IE.
Chrome Version 16.0.912.75 m running on Vista.
I'm trying to apply an rgba background colour to a disabled select element, with the opacity at 0.2.
It works fine in Firefox and Opera, but Chrome ignores the opacity, and just shows flat colour.
I've already tried adding -webkit-appearance: none. This fixes the alpha value, but removes the button part fo the select element from view.
Does anyone know how how to have a background with an alpha value, and not hide the button part of select?
http://jsfiddle.net/EMSmZ/9/ <== I've edited this to confirm that rgba is otherwise working for background colour, but not for select. The two boxes have different background transparencies in Chrome, but the selects don't.
Still nothing, submitted a bug report: http://code.google.com/p/chromium/issues/detail?id=110437
I hate to break this to you, but styling form elements with CSS is just a bag of hurt. There's a reason everyone uses Javascript replacement techniques to change the look and feel of form elements.. (except text and text area essentially)
not working as is in chrome 16.0.912.75 m on XP.
IF you give the disabled 'opacity:.2; it changes the opacity of the whole element.
Not sure what effect you are trying to achieve, maybe show some context to help offer a solution.
I ran into the same problem developing a form for a client. The workaround I ended up using was to set the background-color to a lighter version (#faebe7) of whatever base I color I wanted to use, in this case red, rather than using rgba(255,0,0,0.4).
I'm trying to make a custom checkbox, so I made something like that : http://jsfiddle.net/wQdUn/2/
The problem is that, on WebKit based browsers, the checkbox is toggled only when clicking on the content of the <span>, not on the box itself, while in Firefox I get the behavior I expect.
So I have two questions:
Which one is the right behavior (i.e. the one conform to specifications)?
How do I get the result I want in both browsers (and others...)?
Thanks.
Not sure about the first question, but if you make the span an inline block too, it'll work as you expect in WebKit browsers. See http://jsfiddle.net/wQdUn/5
For those who come to this topic form google:
Safari 6.0.4(8536.29.13) still got this problem, you need to set inline-block on pseudo-element to make click work.
Chrome switched to Blink as it's rendering engine, so this problem didn't happen on chrome any more(26.0.1410.65).
I use a screenshot tool like SnagIt and this tool is able to make a screenshot of a specific element inside a website. I tried this feature with firefox, safari and ie, all runs fine. When I use the mouse pointer to aim an element, SnagIt shows a red box around the hovered element in the browser. For example, this tool knows the exact coordinates of a div or img element.
What is the technique behind this feature? Is there a common way for every browser? I've already used Spy++ to get the window handles, unfortunately this isn't the resolution.
I'm in a project in which I need this feature for different browsers.
Thank you very much,
Mark
If you want to know the x,y coordinates of any element in javascript, Then I suggest you use jquery [http://jquery.com] on your page and use its offset function.
I am using Drew Diller’s DD_belatedPNG solution to fix the common problem of showing png images in IE6 browser and it works fine for visible PNGs.
Currently i have a hidden JQuery Dialog that has some PNGs inside it, when user clicks on a link the dialog appears, and the PNGs inside that dialog appear not fixed in IE6. Is there a way to fix the hidden PNGs too in IE6 ?
Thanks ,
Looks like you can call DD_belatedPNG.fix() again after you load the dialog.
If you're not tied to DD_Belated png, you could try replacing it with http://jquery.andreaseberhard.de/pngFix/ (also jquery), which you can call on specific elements if required.
Are those images by change being left aligned with a float: left or an align="left"?
If so you may need to add position: relative to the css of the images. I had to do this recently to get images to show under IE6.
I found the info here: http://www.webcredible.co.uk/user-friendly-resources/css/internet-explorer.shtml
Hopefully this helps and good luck!