i have a website and use 'FontAwesome' for displayed , but sometimes a broken font and content in css change runtime to an.
for example :
'fa fa-bars' taht in css content is "/f0c9"
but sometimes by refresh form content change to ""
how to resolve this problem.
Related
I just created an Arabic version a website and noticed that Chrome sometimes shows a totally blank page until the window is resized and then everything instantly becomes visible.
Arabic is a RTL language, so the <html> tag has dir="rtl" lang="ar" added to it. This is the only difference between it and the English site.
This is the site. You may have to click the logo a few times in order to see it show blank.
I've noticed this problem too and I searched the internet in English and Arabic but couldn't find the cause of the problem. I found a workaround to fix it though; use the following jQuery script in your rtl-directed webpages:
//Chrome RTL UI Issue Fix
$(document).ready(function(){
$(window).load(function() {
$( "body" ).animate({
scrollTop: 1
});
});
});
All it does is that it scrolls the page by only 1px right after all the page elements have been loaded. You can add a code that scrolls it back if you want.
I fixed this problem and I want to share it with you.I think this problem is only for gc on mac os.
How to fix it?its really easy.
hide you body in your css and then show it when page load and every thing will work.
/*Add this to your css to hide body */
body {
display: none;
}
<!-- Add to your html to js file to show your body again -->
$(window).load(function() {
// When the page has loaded
$("body").show()
});
The link to the page does not work. Is the page available on the futurism site?
I downloaded the futurism.com page and added dir="rtl" lang="ar" to the html tag. I have reloaded the page 50 times. I cannot reproduce the problem.
My copy of the page is running on Apache with Multiviews.
I have added a language directive for Arabic.
I have two copies of the file, futurism.htm.en and futurism.htm.ar
I have set the language in my browser to Arabic [ar].
The Arabic pages is negotiated by Apache.
The page loads without a problem.
I have also created another page with Unicode Arabic letters. It loads and displays the Arabic right-to-left without a problem.
I had the same problem.
Just don't apply direction to the body or html tags.
<html>
<head>
<style>
.rtl {
direction: rtl;
}
</style>
</head>
<body>
<div class="rtl">
<!-- Your Codes Here ... -->
</div>
</body>
</html>
I had a similar problem to yours but my site showed fine until it was manually refreshed on Android phones, after which the page would go blank. This behaviour could also be reproduced in developer tools on Chrome and Opera (both use the Blink engine).
First, I applied a fixed positioning rule to the body,
body { position: fixed; }
Then, I reverted the positioning on page load using jQuery,
jQuery(window).load(function() {
jQuery('body').css('position','static');
});
Wordpress became really annoying when working on RTL, you need to resize or scroll to show content. I think it is only happening on MacOS.
I've noticed that some websites don't have this issue, so comparing the html I noticed that the working websites have many class in the <html>, like: js flexbox flexboxlegacy canvas canvastext webgl no-touch geolocation...
which added by modernizr.js (v2.8.3)
I added this to my page header, and the blank page issue disappeared:
<script src="/js/modernizr.js"></script>
I am not sure what is going on, but may be it will give some starting point to figure out the real cause of the issue.
I have this issue with my Wordpress and I fixed it by adding this javascript code
window.scrollTo(0, 1);
window.scrollTo(0, 0);
Somehow my tumblr theme is overriding the formatting I have done to my texts posts (in html). It has decided to unbold everything that was bolded and make everything the same size, even though there was header text in the post. In tumblr itself you see it just like it was formatted to be seen, but in the tumblr theme (blog) everything appears the same format even though it isn't.
I know that there is a line of code inside of my theme overriding the formatting that has, but I have no clue where to find it or what to add to change it. If someone knows how I can change this I would appreciate the solution.
Maybe this is a little too basic but haven't found anything online about how to go around it.
Thanks in advance!
These images show How it looks in Tumblr and How it looks in the theme.
Use the "Custom CSS". It should override any CSS applied to the theme.
Go to the theme customization page (looks like; "www.tumblr.com/customize/yourBlogName")
Scroll to the bottom of the Customization section in the left. Click the "Advanced Options" now paste your CSS under where it says "ADD CUSTOM CSS".
Example; h2 { font-size: 1.5em; color: #6ca516 }
If that does not work use !important (like; font-size: 1.5em !important;). Change the number in font-size and color as you want.
Note:
It should override any CSS applied because in a Tumblr theme's HTML, {CustomCSS} (where all your "Custom CSS" goes) comes after all the other styles.
If you add your rules just before </style> in the theme's HTML, you will also override the styles applied before.
On one of our websites, we use a font from typotheque.com by importing it as follows:
#import url( "http://fonts.typotheque.com/WF-XXXXX-XXXXX.css" );
The font is displayed correctly on Chrome and the like. In Internet Explorer 11 on Windows 7, the font is rendered, but the width of it is not correct. It seems as if the width of the text is rendered before the font is applied.
As a consequence, the text gets overlapped and the words are not wrapping accurately:
On Chrome, the font width is calculated and the words are wrapped correctly:
Other things we tried:
We followed the instructions here on typotheque.com
We made sure to link the css files prior to the javascript files, as stated here.
Any hints or pushes in the right direction to solve this issue are much appreciated. You can find the website here: http://www.claireundgeorge.ch/fr/
Edit:
Added word-break: break-all; : no change
Removed all the font-awesome-stuff: no change
When you compare what is calculated in FireFox with what is calculated in IE you can see whats the bad boy here.
In IE the padding-bottom property of the h2 is 4px.
When i uncheck this property it looks fine for me.
I cannot upload pictures here due to the stupid reputation limit thing but i hope i descriped it good enough...
I also have typotheque webfont + IE problem. My workaround for now is a bit dirty: I use jquery $(window).load to adjust element padding by 1px, and then IE redraws the font correctly.
I have the "print background colors and images" checked in the print dialogue of my browser. I have tried this in all three major browsers. I can go to any page and it will show the text and cell colors but my own website refuses to show the colors when printing. This is a rails app using bootstrap 2.3.2 and bootswatch for colors. I have a "printable" version of my page with the header:
<%= stylesheet_link_tag 'application', media: 'all' %>
<%= javascript_include_tag 'application' %>
I have tried replacing 'all' with 'screen' (still looks correct when the page load but won't print correctly).
Here is my page as it looks:
Here is the print dialogue:
Here is the PDF produced by "save as PDF":
Here is the dialogue for a page from Stack Overflow in the same browser when I print it:
And here is the pdf produced by the "save as PDF"
I am on OS X 10.10 and am getting the exact same results in every browser. I have tried setting the "all" in the stylesheet link to "print" but then it doesn't have a stylesheet to refer to, so it removes all styling before going to the print dialogue. If you notice it IS using the css styling for my table in the printed PDF. But it strips out any color info. I'm really stumped by this, have searched quite a bit but only find pages telling you to check the "print backgrounds" checkbox, which I have already done. Why isn't the color even making it to the print dialogue?
It looks like Bootstrap contains code that makes the background transparent. Try adding !important to your declarations for your background colors and see if that helps you.
Edit:
For example, if you declare the background for it with:
th{background:#HEX}
then switch it to:
th{background:#HEX !important}
Replacing th with whatever element you are applying the style to, and #HEX with your colors.
Also note that you need to declare it after the Bootstrap declaration.
I'm working on a site at the moment, and an image that is used as the background for a submit button (current the button is normal HTML button, but will be changed to an asp:Button when developed).
Another developer pointed out that this button seems to have a white background. Thinking the image wasn't saved correctly, I opened it up in Fireworks and the PNG image had a transparent background. I exporting the image again, saving it as a PNG-32 image, and overwrit the original image with the new one. The image still appears the same.
Bizarrely, this occurs in Chrome, Firefox and IE 7/8, and the other images on the page don't have white backgrounds either.
Also, I have checked the CSS and there are no styles that contain a white background colour element.
Any one got any ideas?
Many thanks!
Due to the site being built in ASP.NET, changing the button to be an linked image and using JavaScript on it then isn't an option.
However, on the developed ASP.NET site, this issue is also occurring. But I've managed to fix it in ASP.NET by doing the following:
When calling the button, I've typed this out to begin with:
<asp:Button ID="GoBtn" runat="server" CssClass="searchbutton" />
Adding the parameter "BackColor="Transparent" removes the white background from the button. So the tag now reads as:
<asp:Button ID="GoBtn" runat="server" CssClass="searchbutton" BackColor="Transparent" />
This removes the white background in ASP.NET. At a total loss to explain why the button has a white background on it. Although I have read that using a GIF could solve the problem, but I haven't had time to see if this is true or not.
EDIT (24/01/2010)
I found out how to fix this issue in the HTML document, by pure accident!
What you need to do, in the CSS you have to call the following:
background-color: transparent;
border: none;
This removes the grey/white background on the back of the button, and it also removes the border of the button.
try adding
border: none;
to your button style.
I think if you have already tried setting:
submit{background:none;}
and such. Then you should try changing the submit to be just a link with an image instead and calling it via a javascript, I'm thinking it's the button type that does it.
Edit (20th Jan):
I expected that some ASP would solve it (I can't really stand when something like ASP has to interfer with the layout of anything).
If you want to solve this for your HTML version I think you should provide a link or copy it into a fiddle, because it's probably easy to find out what's causing it. My bet is on some inherited style you can't overwrite. Sure you're not using !important or such anywhere in some generic styling?
It's kinda weird :D
check this fiddle out ..You could try to set to that input background the url of your image and just see what happens (if it's public..or you can upload it on imageshack), so we can exclude that there's a prob with that particular image