Is there a way, using either CSS or JavaScript, to get rid of the native Apple styling applied to focused DOM elements (e.g. the blue glow) in OS X or iOS)?
I've checked around online and I can't find anything relating to this subject. I'm about ready to give up hope on this, because I'm thinking since it's part of the OS itself (not just in the browsers) that it can't really be overwritten or avoided in any way.
I'm also interested in restyling Apple OS browsers' native scrollbars without using Javascript replacements, but with a solution that will work in all browsers. I'm vagely convinced that it's the same problem (part of the OS itself and thus not able to be styled by the browser) but I just thought I'd check.
Alternatively, I could use the -webkit-scrollbar pseudo elements CSS offers, but that'll only work in Chrome, Safari, and other webkit browsers, right?
Thanks for any help! <3
Using outline:none; on the element in question works great.
For more info, see the question " How to remove the border highlight on an input text element " as posted by the user j08691 in the comments on my question.
Related
I'm trying to style an input[type="button"] and it seems that when I click on the label IE (9 in my case; I don't care for lower versions) doesn't apply the :active style. Everything works beautifully on Chrome and Firefox and also in IE if I click outside of the label. I had no luck in finding any clues to what might be the problem.
A <button> doesn't have this problem, so I guess there's something special about the other button's label, but what? And is there any workaround?
The problem is demonstrated at http://jsfiddle.net/Kmved/1/
Interesting find there. To answer the first question, "why?": unfortunately, the CSS spec leaves the semantics of :active entirely up to the browser vendor:
CSS does not define which elements may be in the above states, or how
the states are entered and left. Scripting may change whether elements
react to user events or not, and different devices and UAs may have
different ways of pointing to, or activating elements.
Now I would consider this a bug in IE (and expect it to be fixed in IE10 perhaps), but the letter of the law says that this is perfectly acceptable and tough luck to you.
To answer the second question (workaround?): well, you said it yourself. Use a <button> instead; as a bonus you get the option of placing any type of content inside the button in addition to simple text.
I ran into a problem that is not supposed to happen (which is why I'm puzzled): on THIS page, the first item of the left side navigation menu has 2 chained classes attached - one for specific formatting as the first item and the other to show the active state. Everything is fine in standard compliant browsers, but the active state is missing in old IE versions, including IE8.
That is especially annoying since IE8 is supposed to support multiple/chained CSS classes (as mentioned in this fine article.)
Can anyone give me a hand with this please? Thank you!
make sure that when in IE, the document mode is "standardds" and not "quirks"
Ok maybe it's not the solution, but at least try to add !important; to your active links.
I'm getting a wierd bug in Safari 5.0.5 for windows. When I apply my styles the down arrow in the select box button disappears. I tried removing classes and it seems multiple classes trigger the bug. Any help would be much appreciated. You can see an example at http://jsfiddle.net/fbsRY/2/
You cannot reliably style select elements using CSS as browsers try to stick to the operating systems defaults. If you MUST style these elements, you'll probably have to find a JS based alternative.
Not a full solution, but I did find more details about the problem at http://www.codingforums.com/showthread.php?t=179464. It seems that it might be a bug related to the Windows Classic Theme. I'm kind of a geek that way. Love my flat gray interface :)
After fiddling around with an issue I am having I have come to this conclusion:
my list Elements are displaying smaller in Safari on my Macbook than they are on Safari on my PC. IE, and Firefox are displaying properly also.
What might be causing this difference? It is hindering my ability to complete this design.
www.christopherbier.com/gbg
Please let me know if there are any css tags that might be causing this.
Here is my previous question that includes my css etc. CSS spacing issues with Safari?
Any help is appreciated.
You might want to consider including css reset stylesheet. You can find a good one here:
YUI CSS Reset
This basically "removes and neutralizes the inconsistent default styling of HTML elements, creating a level playing field across A-grade browsers".
Hopefully that will solve your problem!
My guess is that it may well not be a css tag that's causing the issue, but just a difference in defaults on the two different browser versions. Each version is probably tailored to the OS to some extent, and may look different, which is expected.
Overriding this default behavior should raise a warning flag, because you're changing the overall look and feel, and it may not match well with the OS layout in general. It doesn't mean don't do it, but it does mean that you might want to proceed with caution.
I'm having major rendering issues in Safari with the web application I'm working on. Most of the design is done with divs using absolute positioning. This renders fine on Internet Explorer, Firefox, Chrome, Opera, Netscape, and konqueror. In Safari, it's just a jumbled mess.
Does Safari lack support for absolute positioning of div elements?
What is the best way to trouble shoot and find out what is going on with the safari browser?
UPDATE: I'd like to note I did find the issue, and I would like to thank everyone that gave suggestions. It was the WebKit's "Inspect Element" that gave the most useful information. It appears that their were conflicts with inline styles and styles from the CSS. While safari grabed the styles from the .css file, the rest of the browsers were using the inline styles. i was able to see those conflicts with the information in the tool that was suggested.
The problem may lie somewhere in your JavaScript; one of the most noticeable things about Safari is that it likes to stop executing JavaScript after any errors.
CSS is likely not the issue, since Safari has better standards and CSS support than any other browser out there (alright, I said it.)
Use the built-in Web Inspector in a recent nightly build of WebKit to track down your issues.
1. Safari's support?
Safari is actually a decent browser. If it has its flaws, they aren't any worse than those of any other browser, and they aren't of the class of the old IE browsers, which had very serious problems and lacked even basic support for web standards. To answer you question specifically, yes, it does support absolute positioning.
Safari can certainly render modern X/HTML CSS designs, and since your audience is largely using Safari anyway, you may as well forget the notion of dismissing the browser. It's a good browser, and in any case we're powerless to change it. We simply need to take care of these bugs, whatever they are.
2. How to go about debugging?
Without having a specific example, it's not something anyone can really help you to do. It seems fair to say that you're having some issues controlling css-based layouts. You may have some invalid markup, which in some cases could produce the kind of extreme browser-specific abnormalities you've described.
Start with the basics. Validate your markup and CSS.
Markup Validator
CSS Validator
Make sure you're rendering in standards mode.
Seek out answers to specific questions
If everything validates and you're still having problems, you'll have to track them down one by one. Even if you rebuild the page, piece by piece in Safari in order to see where things begin to unwind, it will be worth it to do. If during this process you really don't understand why a certain behavior exists, you'll at least have a specific question that you can use to poke around for answers. It may be answered already on SO, and if it isn't, you can ask it.