We have a client who is using IE7 and for some reason drop-down boxes and text-area area fields are not displaying correctly. The arrow for the drop-down box does not appear and the right border of the text-area box does not display.
Works in IE 8/9, Chrome, FF. See image attached
Does anyone know what is causing this and how I can fix?
This is a html/php app
You didn't include the markup so we can only guess. There is no way to know for sure. I would inspect the textboxes in Firebug or something similar and see if they're inheriting styles that you aren't aware of.
Related
I have a very inconsistent issue with iOS Safari on iOS 10.2/10.2.1 (at least). On many iPhone 7,6,4 it works without an issue but on at least 2 iPhone 7 I had this issue.
I have a position: fixed; bottom: 0; input element on my page. If the placeholder is e.g. Name, Safari will offer to autofill it with a contact name in the suggestion box above the keyboard.
The problem is that on some devices, this suggestion box of the keyboard will overlap the input element at the bottom of the page:
The suggestion bar was expanded when the keyboard opened and was not manipulated afterwards by collapsing/expanding it.
On many tested devices this does not happen, only on a few of them.
Only the suggestion bar seems to be the issue. The normal input switch bar does not exhibit the problem. When I change the placeholder to something else, Safari won't try to autofill it and everything seems fine:
(Except for the small white gap at the bottom but I could live with that)
Does someone know why this might be happening on some devices? And maybe even how I could go about fixing this?
(Side note regarding a possible workaround: As I said it seems like Safari parses the placeholder to decide when and what to offer as autofill. When I change it to something else it won't show up. Simply disabling it for that one field like that would be finde but the same thing happens on an "Email" field and there is no smart alternative word to use as a placeholder.)
For whatever it is worth, I just had this issue and resolved it by switching out the <input> element for a <textarea> element. Everything is working as expected -- I am not seeing the autofill suggestion anymore.
When trying to apply a "stripy" border-image to a text input field it breaks in Mozilla Firefox under certain parameters.
Take a look at this jsfiddle: http://jsfiddle.net/sxpL9zw1
As you can see the page renders a simple text field with a black stripy border around it. This fiddle actually works just fine in any browser I've tried.
However, things get really weird when I run the exact same markup on my host or on localhost: http://test.tonybogdanov.com/border-image-mozilla-issue/
Here's what I see when I open the URL with the latest Mozilla Firefox (35.0):
As you can see the left and right borders render properly, but the top and bottom ones are somehow "solid" looking. I've also tested this in IE10, Chrome, Opera and Safari on Windows and they all show the border just fine, except Firefox.
Furthermore, when I increase the border-width above 9px the issue disappears, which also happens when I remove the width property.
Any ideas what might be causing this or why can't I reproduce it in a jsfiddle?
P.S. I also tried this by drag-and-dropping the HTML file in Firefox (to rule out any host-related issues) and it still fails. Here's a zip to try it yourself: http://test.tonybogdanov.com/border-image-mozilla-issue/files.zip
Welcome to one of the most counter-intuitive bits of CSS.
You can use this tool: http://border-image.com/ with your image and work out what the correct offsets and border sizes should be. (You can preview the border around the CSS text at the bottom)
Good luck
I have a search element widget on the home page of my site. Inside the widget there are different tabs which represent search criteria. The issue is for those inner search tabs look different in Chrome and Safari.
I am attaching the screenshots for both the Chrome and Safari versions.
Chrome version (preferred version)
Safari version (would like to see it like it looks in Chrome)
I tried playing around with it but all my hacks did was break it and make it worse. Can this be changed in Safari at all. There isnt much to the html, css code so I dont really know why it screws up in Safari.
Here is the public link for the site:
http://kw-kw-sb-test-site.cs16.force.com/KWRI_Master_site
Any help and suggestion will be appreciated.
Thanks.
Does each one of the search criteria shift downward when selected? The image that replaces the text of the criteria might be set to vertical-align: bottom or some other type of affect on the image.
I am trying to make a combobox in html and CSS, in which every item is on a separate line, and each line lights up blue when you mouse over it, like on Google. That much is easy. I have a div with links(a) in, and each link uses display:block in CSS to fill the whole div. Then I added a dotted outline to theone being hovered over, and that's where things went strange.
Here's the jsFiddle.
You can see it working if you hover over the top link, but the others don't seem to show the outline... The second one down is just visible at the bottom, but the others aren't there at all.
Any help would be appreciated.
EDIT: I'm in IE8 on Windows XP
http://www.w3schools.com/cssref/pr_outline.asp
"Note: IE8 supports the outline property only if a !DOCTYPE is specified."
If you're testing this in IE9, using Compatibility Mode, make sure that your Document Mode matches Internet Explorer 8 standards, not Quirks. If I switch mine to Quirks mode, the outline disappears.
Weird problem. I don't know if anyone can shed some light on this? I have a checkbox inside a div. It works fine in IE but not Firefox. I have to click the space around the checkbox that is occupied by the div (sort of like a label) for the checkbox to tick on and off. Directly clicking the checkbox does not show it as ticked on or off, even though in firebug it is showing that it is in a checked state and an unchecked state.
Only in FF does this happen.....
I think this is a bug in firebug. Disabling firebug will stop this behaviour happening.
I had a similar strange thing happening with radio buttons. Disabling firebug fixed it.