I'm under the impression that the user agent stylesheet in browsers such as Safari, Chrome and Firefox is something that is internal to the browser and can't be directly modified (rather a style property needs to be overridden).
I'm also under the impression due to various websites including Mozilla's that the default value of the box-sizing property for Webkit and Mozilla is "content-box."
I tested this on a rather simple dummy page viewed in various browsers.
My problem is that on two pages in our production application the default property is different, and we can't figure out why this is.
One one page we see a box-sizing property of "border-box" in the Web Inspector or console. It's assigned to the CSS selector input:not([type="image"]), textarea.
On the other page there is no mention of the box-sizing property in the Web Inspector or console.
Does anyone know if there's some way to directly affect the box-sizing definition in the user agent stylesheet for a particular page? Maybe there's a library that does this? We're using prototype.js and swfobject.js in the application...
UPDATE: In case I wasn't clear on almost every page in my web application and in every "dummy" page I've tested on the box-sizing property has the default "content-box" value. For some reason one particular page in my web application shows in the web inspector that the user agent stylesheet (the one used by the browser for its defaults) has set that property to "border-box." I can't for the life of me figure out why this is. I'm looking for anything that might cause Firefox to change what its default value for that property is.
Just had this same issue. What was happening in my case was that someone had put a snippet of Javascript code above the <!doctype html>. As a result, when I inspected DOM through firebug, it appeared that the document didn't have a doctype.
When I removed the snippet of JS code such that the doctype declaration was at the very top of the file, the doctype reappeared and fixed the box-sizing problems I was seeing (the same one you had).
See:
Hope this helps.
I had the same issue on chrome which by default added the following user agent style rule:
input:not([type="image"]), textarea {
box-sizing: border-box;
}
After adding the doctype property <!DOCTYPE html> the rule no longer appeared.
No, you can't touch the browser default stylesheet, and yes, browsers do have different rules for box-sizing specifically in respect to form fields. This is for compatibility with old browsers that used to implement form fields entirely with native OS widgets that CSS couldn't style (and so which didn't have ‘border’ or ‘padding’ as such).
Why not just put your box-sizing/-moz-box-sizing/-webkit-box-sizing rule in the site stylesheet? Works for me, I often use this to make inputs with set widths line up across modern browsers. (IE 6–7 don't support it, though, so need some extra help.)
Related
I'm developping a jqm application with spring mobile in the back-end.
Whenever I hit the browser refresh button on my mobile phone the page is completely devastated afterwards. Browsers back-button works properly.
The data are still available due prg pattern (flashAttributes in Spring) after refresh. Only the view is malformed.
Any ideas how to solve this problem?
From jQuery Mobile docs :
The simplest approach when building a jQuery Mobile site is to reference the same set of stylesheets and scripts in the head of every page. If you need to load in specific scripts or styles for a particular page, we recommend binding logic to the pageinit event (details below) to run necessary code when a specific page is created (which can be determined by its id attribute, or a number of other ways). Following this approach will ensure that the code executes if the page is loaded directly or is pulled in and shown via Ajax
So what happens is - in jQuery Mobile, the scripts and styles defined in the head are loaded only once. So, in normal conditions, it works fine, as all the pages will use the scripts loaded from the first page.
But. When you refresh a page in-between, it triggers a page-reload instead of the ajax navigation model thatjqm uses. So all the scripts and styles loaded from the first page will not be included from here on out.
What you need to do is "reference the same set of stylesheets and scripts in the head of every page", so that even if you hit refresh in the middle, the scripts and styles that had been loaded from the head of the first page are loaded again.
I recommend you read the docs from the above link fully to gain a better understanding.
I have a site with all secured content. Everything is loaded using https. I have verified this using fiddler2, the built-in debugger, and the DebugBar plugin. Nothing is loaded using http. Nonetheless, I am still getting the "Do you want to view only the webpage content that was delivered securely?" when I try to load the page in IE8. My users are complaining and I don't have a clue how to fix this. They are not computer administrators and cannot change the security policy for IE on their machines.
I figured out the problem and figured I'd post it here in case anyone else ever comes across this issue. The problem is that IE8 was treating the CSS background property with a relative URL as unsecure. So I had something like this:
.SomeRule
{
background: url('/SomeFolder/SomeImage.png') 95% 50% no-repeat;
}
and I had to change it to this to make the warning go away:
.SomeRule
{
background: url('https://www.SomeSite.com/SomeFolder/SomeImage.png') 95% 50% no-repeat;
}
I had a similar problem with a WordPress site where I recently added SSL. Obviously, something was being loaded with HTTP protocol, but what?
First, I checked the obvious:
I checked embedded page and post images for fully qualified paths using http protocol.
Then I checked links relative to the root as #datadamnation suggested in his solution.
Next I looked in my CSS to see if a background image URL used the http protocol.
I checked my plugins and my plugins CSS.
I checked the content in the sidebar widgets.
I checked the images loaded in the carousel slider.
Finally, I checked the theme's header image. When I looked at it using Firebug, I could see that it was still using http. To correct it, I had to remove the WordPress header image, and then add it back again and save. Refresh the page, and now the mixed content warning message is gone! It would have saved me a couple of hours of trial and error if I had done this first, so maybe you'll read this and save yourself some time.
We use CentOS-6, a RedHat EL6 distro rebuild, and this ships with FireFox-10.0.12 ESR. We recently changed the favicon.ico image on several internal servers. Actually we just provided the corporate favicon to those sites that had none.
Now, the difficulty is this. When a FF user who visited a given url before the favicon was provided now visits that url following the update then the new favicon is not displayed in either their URL address bar or in the tab for that page. Instead they see that dashed box outline indicating that no favicon is present.
However, when a FF user who had never previously visited that same url does so then that FF instance does display the new favicon in both the address bar and tab on that FF browser.
I have looked into this briefly and frankly was astounded at how common this problem appears to be and the absolute lack of any sensible response to the issue even on Mozilla's own support forums. I have tried hacking and picking at the places.sqlite store but even deleting the entire places.sqlite file or emptying the favicon tables and restarting firefox does not solve the problem of displaying a changed favicon the tab and url icon display. All that does is hammer the user's bookmarks.
Now I can, and have, resorted to the trick of adding <link rel="icon" href="favicon.ico"> in the <head></head> block of those urls that use static pages but some are generated dynamically by third-party applications. These urls do not offer a convenient method to make this modification to their output.
Where does FireFox-10 cache the favicon for a newly visited url and how does one remove that reference from the user's profile?
A browser does not necessarily request a fresh copy of the /favicon.ico (or an icon specified by a meta tag) on each visit. Once it has a favicon (or thinks there isn't one), it is often some time before it will request an update (this depends on the particular browser). I have had some success with unbookmarking a site and clearing the browser cache.
I have a question that is similar to this question here:
Prevent scrolling on HTML5 <video> element on iOS
Basically, I've used document.ontouchmove & e.preventDefault() to disable the scrolling on a page destined for the ipad/iphone. No worries, that works great and there's a bunch of fixed elements that play nicely. One of the things that is embedded in the site is the iframe-embed code from Vimeo. My problem comes from the fact that, since the iframe content comes from a different domain and is in a different document, my document.ontouchmove & e.preventDefault() script is ignored within the iframe. The default page scrolling behaviour returns when the iframe is touched, and the page starts acting weird as elements that aren't supposed to move, do.
I don't think there's any way to apply javascript from the parent page through to the contents of the iframe, but does anyone know of a way to prevent all native scrolling as a general effect? (or maybe zero-out the scrolling as it happens?)
I might have to go to a more traditional, non-ajax-y view for this particular page in my site, but that ruins the overall look-and-feel.
The site hasn't gone live yet, so I can't post the address, but I can post code snippits on request.
TIA
I am developing web-application using Google Maps API and ASP.NET Ajax. Here is my JavaScript-code for PageLoad:
map.openInfoWindowHtml(map.getCenter(),'Hello, <b>world</b>!');
First run is successful. But after execution some ASP.NET Ajax-function we have strange effect: In Internet Explorer, Mozilla Firefox and Opera everything is good, but in Google Chrome and Safari text with html-tags is invisible. In other words in Google Chrome we have text: “Hello, !”
I want to make the application that would normally in Google Chrome and Safari too. How can I do it?
Update:
String "Hello, <b>world</b>, <strong>world</strong>, <span style='font-weight: bold;'>World</span>, <a href='http://ya.ru'>Link</a>." transform to "Hello, , , , . " (I examined the DOM). Words really are disappearing.
I observed this strange effect on any Ajax-function with request to server.
Update2:
Many thanks to Koobz for many leading questions. They helped me a more detailed understanding of the problem.
First of all, full description of actions:
Load the page. GMap have several markers with dblclick-event in JavaScript. Dblclick event exec marker.openInfoWindowHtml(/My text/). /My text/ is located in JavaScript of my Page.
I double-click on the marker. I see a infoWindow with a normal formatting
Exec __doPostBack (starndard ASP.NET PostBack)
In server side JavaScript is updated with same
Server return some information with /My text/ to my page
I doouble-click on the marker. I see a infoWindow with a wrong formatting.
An interesting fact, which puts me in embarrassing:
I try set to “Hello, <b>world</b>, <b>test</b>”
Before Ajax function in all browser I have: “Hello, world, <b>test</b>”
After Ajax function in Google Chrome and Safari: "Hello, ,test"
After Ajax function in Mozilla, Opera and IE: “Hello, world, <b>test</b>”
What Chrome and Safari have features that may cause such behavior? Now I can write separately necessary infoWindow-text for each browser. But I would like to find a normal way to solve my problem.
Hit ctrl+shift+j to open up your chrome developer tools.
Set a breakpoint right before the function call that breaks everything.
Attempt to reproduce the bug.
After the break point hits, step through your code until the text disappears.
Set a breakpoint after the text first disappeared.
Repeat this process. Refine your breakpoints until you've narrowed down where the bug is occurring.
It could be any number of things. I have no idea what kind of Ajax things you're doing. Are you dynamically updating content on your page after doing the request? It's possible that this update code is modifying dom elements that it shouldn't be. Tracing through using the methodology above will help nail it if this is the case.
If you're using jQuery, maybe one of your selectors is out of whack and it's eating up content. Chrome is very good and I'm hesitant to believe it's a javascript bug or anything like that.
Validate your HTML. If you're traversing the dom, invalid markup might result in chrome "seeing" a different picture than other browsers. Just look for broken tags and ignore all the other things a validator complains about.
Wild guess: but the way it's stripping out HTML might point to some kind of XSS protection. Is the Ajax script that's returning the new HTML code on another domain than the one the visitor is viewing?
Some info here:
http://groups.google.com/group/chromium-dev/browse_thread/thread/d2931d7b670a1722/d56bdfccfcef677f
Do you see the problem with any html tags in the info window? As an experiment, try:
<span style="font-weight: bold;">World</span>.
I am wondering if there is a unclosed bold tag somewhere in the DOM?
I am messing around with this problem, but I haven't been able to reproduce it. Having a look at what the Ajax function does would be helpful.
Try this:
map.openInfoWindowHtml(map.getCenter(),'Hello, <strong>world</strong>!');
the strong tag is more standards compliant, worth a shot
As others have said, you need to post your code.