When I set autofocus="autofocus" on an input element, then in Firefox, when the page loads, it displays for a split second without the CSS applied. (E.g. content not centered, heading rendered in default font etc.)
If I remove the autofocus, the page loads fine and displays when it is ready.
Is there a way to get the page to load normally while using the autofocus feature in Firefox?
I have found that by adding some JavaScript in the <head>, the page waits for the style to load before the focus.
I'm not exactly sure why this works, but it does!
Example:
<script type="text/javascript">
// Fix for Firefox autofocus CSS bug
// See: http://stackoverflow.com/questions/18943276/html-5-autofocus-messes-up-css-loading/18945951#18945951
</script>
Related
On my ASP.NET site, <input type="file"> renders like this in IE11 (an oldschool look):
However, I want it to look like this (more modern look):
When trying <input type="file"> in the same IE11 elsewhere, in e.g. JSFiddle, it looks like I want it to (the more modern look).
I tried tracing CSS styles using F12 dev tools, but I cannot see any styles resulting in the oldschool look.
I'm using <!DOCTYPE html>.
My question: What might be causing the oldschool look?
IE11 Renders that way.
If you want to change it you should use CSS, but it usually isn't easy.
What I usually do is to create my own fake component, with an input type text and a button styled the way I want.
I also have a input type file hidden, when I push my styled button I send via javascript a click to hidden input type file. When the file is selected I update my styled input type text with selected file name.
I have a html page and i insert a iframe in this page.
I have a problem with iframe contants. In iframe show a button which have link to go on website anywhere, i want to that button does not show how set in CSS
{display: none}
but how in iframe button no detect any css rule for displaying none.
Help me CSS MASTERS
You must use seamless attribute:
This Boolean attribute indicates that the browser should render the
inline frame in a way that makes it appear to be part of the
containing document, for example by applying CSS styles that apply to
the <iframe> to the contained document before styles specified in that
document, and by opening links in the contained documents in the
parent browsing context (unless another setting prevents this). In
XHTML, attribute minimization is forbidden, and the seamless attribute
must be defined as <iframe seamless="seamless">.
The problem is that browser support is currently negligible. Meanwhile, you can watch Seamless iframes. The future, today!, a slideshow which can give you some ideas of how to implement those functionalities.
When I inspect the element in Chrome, the code is being generated with the correct URL – but the image does not display until I either refresh the page or change an attribute of the styling from Chrome's inspector panel. This bug does not occur in Safari.
I've found that if I remove turbolinks, it works in both browsers. As a side note, I am also using jquery.turbolinks gem.
<div id='show-hero' style='background: url("<%= #roaster.roaster_image_url %>") no-repeat center top;'></div>
Any idea would be greatly appreciated.
I've experienced this same behavior when using inline styles to assign background-image in Rails 4 with Turbolinks enabled.
It's hacky, but my current workaround is to assign the background image with a bit of js/jquery at the bottom of the view, and bind it to a page load event (more info on turbolinks and page load events here: https://stackoverflow.com/a/18770589/1769539 )
Here's an example of what your JS might look like:
<script>
function ready() {
$("#show-hero").css({
"background-image":"url(<%= #roaster.roaster_image_url %>)",
"background-repeat":"no-repeat",
"background-position":"center top"
});
};
$(document).ready(ready);
$(document).on('page:load', ready);
</script>
I'm working on a cross-browser bookmarklet where I need to inject my own style sheet into the page as well as various divs, etc. I've got it working everywhere but IE so am now attempting to debug some of the styling issues there.
I'm adding my css to the document after a user clicks my bookmarklet as follows:
if (document.createStyleSheet){
document.createStyleSheet("http://mydomain.com/css/mystyle.css");
} else {
$('head').append('<link rel="stylesheet" href="http://mydomain.com/css/mystyle.css" type="text/css" />');
}
The file is being fetched and applied to divs, etc. I create on the page, however when I inspect the element in IE 9 Developer Tools it does not show me ANY properties from the stylesheet I added dynamically, only those in the style="{}" attr.
Also, mystyle.css does not show up in the dropdown on the CSS tab, yet it does have a corresponding element in the head and styles in it are being applied to the dom correctly.
Any thoughts on how to force the dev tools to recognize my new sheet? It is infuriating to attempt to debug css w/o being able to manipulate it in-browser directly.
Did you click the refresh button in developer tools? It doesn't refresh the page, it reloads the dom from the current page.
I have some jQuery ajax tabs and within one of the tabs I open a link containing a div, some jQuery and a link to a CSS file, ie
<link type="text/css" rel="stylesheet" href="url_to_css"></link>
<div>
... some code here
</div>
<script type="text/javascript" src="url_to_javascript"></script>
Every browser except IE7 applies the CSS instantly, but IE7 applies it only when the mouse pointer moves.
I fixed it by loading the CSS in the parent div (the one that's loaded before the div that should be loading the css is opened)
I had the same linking problem.
At this moment, I am moving my link tags into the head tag at the moment they are being loaded.
So:
OnLoadingTheNewTab
Fetch all link tags
Put the link tags inside the head tag.
add a reference of $.data(link, 'dynamic', true);
On every change of the tab, you can go through all your link tags in the head and check if they where dynamically loaded. If so, delete them again, because the tab was unloaded.
Seems to work pretty fine for me.