I've found a very strange thing.
I was complaining about it before, but nobody sees old questions here.
Here's an example.
It works perfectly in Opera only... In Firefox, Chorme, Safari and IE8 there's a border around this button... And I have no idea WHY? How to delete the border?
Thanks.
Thats because you have set a type of image and not defined an image url... you have set the background image using CSS.
Change your element to a span or such and this will fix the issue, also add cursor to be a pointer in css too, this will give the user the idea to click it.
then use an onclick event for the submit.
As others have noted, you have defined an "image"-style button but not provided a source URL, resulting in a broken image.
The simplest solution is to change type="image" to type="button", which removes the broken image icon and border.
Related
take look at this:
http://www.templatemonster.com/demo/35403.html
In this template you can click on the image under the man's forearm even over the forearm itself.
The hand is not a part of images. It is three div pieces that has a png image as background.
How is it possible?
How Can I do the same thing (have a div that contains a linked image and have another div on it but the underlying link be clickable)?
Is it cross-browser?
Thanks
You could just add pointer-events:none in your stylesheet to the element you're trying to click through
Example here: http://robertnyman.com/css3/pointer-events/pointer-events.html
Check the checkbox to see how the grey box is able to be clicked through.
it's made with
pointer-events:none;
it don't works in IE and Opera, but that is in this case not really a problem. It just don't work over the arm itself.
In modern browsers you can use the pointer-events css3 property. Here is a famous question about this : Click through a DIV to underlying elements
I had to change the button color of an html select (combobox), but since it is not posible to add an image directly to the button of a select, what I did was setting an image behind the combobox, and then making the combobox transparent "filter:alpha(opacity=0);" in iexplore and "opacity:0;" in firefox.
This way, you do not see the select, instead, you see the image (what is like a select, but with other color, and since the select is on top of the image (greater z-index) when you click, you are clicking the select. And when it shows the options, yes, you can see them.
The problem is that I need it to work in Firefox, Chrome AND IEXPLORE.
There is no problem with Firefox and Chrome, but the text of the options in Iexplore, appears without the antialias it gets in the other browsers. All the text of the page is antialiased, so I need this to be also antialiased.
I have seen how to make it, but it works if the text is inside a div, a H1 but not if it is in the options of a select.
For example:
http://www.useragentman.com/blog/2010/09/02/how-to-make-cleartype-font-face-fonts-and-css-visual-filters-play-nicely-together/
But it does not work in a select :(
Thanks in advance!!
I seem to remember IE doesn't let you color the background on an <option> only on the entire <select>. The hack you describe requires a background color and chroma so maybe try setting them on the select element.
Alternatively there are javascript solutions that implement select using non-native elements. By avoiding the rendering of a native select you avoid triggering bugs that are unique to IE's implementation of form elements (which uses native system objects). There are too many implementations to list so just search for 'custom javascript dropdown'.
So I've got a standard dropdown menu in my HTML. I've also got the background colored, and I have a background image that I want to use as a button.
But there's a problem, because I can't get the default button to disappear in Firefox. Even though I can get the button to disappear in Webkit using -webkit-appearance:none; I can't get it to go away in Firefox.
Here's an example: http://jsfiddle.net/wG7UB/
And I'd prefer not to revert to a heavily styled unordered list if at all possible. Thanks!
What do you exactly want to do?I'm not sure i understand fully what exactly you're trying to do
if you want to make it disappear then you can use "{display: none}"
or you can use "-moz-appearance" property if there is any.
Here I go answering my own question... I just wrapped my select tag with a div, and used a pseudo element to cover up the button. Slightly hackish, and I don't like using the pointless div, but I guess it works okay. Then I set the CSS of the pseudo element to pointer-events:none; so that it would allow clicks through the image.
Example: http://jsfiddle.net/howlermiller/nchUt/1/
You can see the issue here:
http://referrals.users34.interdns.co.uk/
It works in all other browsers, it is using a custom font that is being generated by PHP (Base64 encoded). There is no javascript included on that page and the text seems to be just changing colour. However, not all the text with that custom font is disappearing, only the body text and the text above the table (Well, most of it). The navigation and grey text stays the same.
I am using the reset CSS:
http://meyerweb.com/eric/tools/css/reset/
I have tried Googling but couldn't find anything.
If anyone could help that would be great as I have absolutely no idea what is happening!
UPDATE: Happens in IE8 too.
Regards,
Connor
the culprit is color: transparent from div:focus in style.css (line 59)
when you click the text, IE is giving the focus to the div you click on which makes the text transparent per the style above.
you can remove that style or set the color explicitly for the elements that disappear.
Now I know this issue is over-talked about but I cannot seem to find a question that addresses this little gem directly so here goes...
In Opera and IE when a form has focus the default submit input gets some sort of highlight. Like outline is when you have tab focused onto an element.
However, unlike the tab one (dotted lines inside or around which to me is nice and user friendly and so WANT it for my users) this one has some bizarre designs...
Firefox has its own problems but at least you can customise it. It reserves the space for the "highlight"/"border" or whatever you want to call it which means that your input will be bulker than any other browser. - why can't it do what it does for the anchors and have the highlight around the blasted thing?
Opera is odd in itself (Opera 10) since it makes the outline "highlight" whatever black. Now this isn't an issue UNLESS YOU HAVE A BLACK BACKGROUND... and it replaces the original border which is just palmface worthy... what were they thinking.
IE is like Firefox but no known way to customise it..
Now for the question: Is there a way to set the bloody colour in Opera for this focus event (which would solve that issue) or to have it in firefox without having to bloat the design in every other browser or a way to make IE conform at all.
Many thanks in advance
I tried and tried but I don't think this is possible.
button:active{background-color:#f00;}
button:hover{background-color:#0f0;}
That should allow you to control the visual interaction of a button. To target a specific button provide an id value in your HTML on the button tag.
try doing
<input type='submit' autocomplete='off' style='outline:none;'/>
this worked for me in text fields - I'm not sure if it carries over to submit or button elements but it's worth a try.
Kinda hackish, but definitely works..
<input type='submit' onfocus="blur()" />