I built this site a couple of years back and but am now in the process of moving it to a new server.
However. I've noticed there is a split second of unstyled content show on page load when viewed in Firefox (3.5.7)?
And on checking in IE8, a less frequent and slightly more raggged effect also happens but only prior to caching?
The url is: http://www.rhubarbrentals.co.uk
If anyone can suggest how to fix this I would be grateful.
you can use jQuery for this
$(document).ready(function() {
$('#flash').hide();
});
where #flash is the div that contains your unstyled content. check this link for more details
putting the
<script src="Scripts/swfobject_modified.js" type="text/javascript"></script>
at the bottom of the page (right above </body>) might help some.
Related
I've got a very strange bug in chrome recently that is when you load the page first time, or in incognito mode that none of the background images show.
when you then F5 the page, the background images all load in.
When you inspect the css it shows the image url in the css panel, however when you mouse over the url it doesn't display a tool tip with a preview of the image.
Neither when you check the downloaded resources are there even any mention of the background-images downloading.
you then refresh the page and it works fine, tool-tip of the css url even shows a preview.
The bug only randomly happens on first load occasionally, no way to guarantee to reproduce this.
Also its worth to note, it you untick then retick the background-image property on chrome it then downloads and displays the image.
I've got a piece of jquery that solves the issue but as you can see its hardly very elegant!
$('*').each(function(){
var bg = $(this).css('background-image');
$(this).css('background-image', 'none');
$(this).css('background-image', bg);
});
this happens on every instance of windows in multiple versions of chrome.
any ideas would be great! thankyou!
you might be able to see it happen on http://ensa.ac.uk
here is a video demonstration # http://youtu.be/oLTyhk5rXgE
Just to note.
The problem had been solved.
The issue was that the browser downloads all the css background images last. So if you refresh the page before its finished downloading the images, when the page loads again it loads from the cache. but because the images did not fully download they dont show correctly.
First of all, fix these:
backg1round-color: #c7dfe3;
backg1round-color: rgba(255,255,255,0.67);
If images is a subfolder then use
url('images/logo-bg2.jpg');
instead of
url('/images/logo-bg2.jpg');
in main.css
Try this instead. Not tested though;
$('*').each(function(){
var bg = $(this).css('background');
$(this).css('background', 'none');
$(this).css('background', bg);
});
And make relevant changes (ie, background-image to background) in your CSS also.
OR try;
$('*').each(function(){
var bg = $(this).css('background-image');
$(this).css('background-image', 'none');
$(this).css('background-image','url(bg)'); // or try url("bg") i am confused :P
});
From some search and research I came to a conclution;
The way I would tackle this is with classes. Have a separate CSS classes for each of the states, then simply use jQuery to change the class. This would ensure that all of the images are actually downloaded and available when you set the class -- which is where I think Chrome is failing (probably all WebKit browsers would do this)
Change css class as:
#nav
{
background-image: url(../images/logo-bg2.jpg);
height: 180px;
}
Owen,
I still see this problem on the application that I'm working on. I know this is also a hacky solution, but it's a little less hacky than the jquery solution that you had posted. I simply threw a version number based on time after the css include and it
e.g.
" rel="stylesheet" type="text/css" />
I know that this causes the css to never be cached, but I have not found any other solution.
It doesn't always happen so it makes me think it happens when the browser doesn't have the css cached. What happens is the page loads and you see the entire page without any css and then it "pops" in styled. The css files are hosted off a different domain and they're all in the header of the document. Any thoughts?
Browser around the source I noticed that we have google optimizer code on some pages. Could this cause this to happen?
There might be many reasons, behind this, but as you described:
Your CSS are not included in inside the <head>
Is this perhaps a flash of unstyled content.
I am having problems with my webpage. On all browsers the div aligns perfectly. However, on all versions of Internet Explorer the Div shows out of line. Here is an image of the difference:
Here is the page so that you can view the source:
Contact Page
I would really love the help, IE has done this to me several times. I would love to learn what to do in these types of situations. I read somewhere about an IE specific CSS file that would fix this but I did not fully understand what needed to be changed in this new CSS file. All help appreciated.
-Noah
Try fixing the issues presented by the W3 validator. http://validator.w3.org/check?uri=http%3A%2F%2Fkynikosdesign.com%2Fcontact.php&charset=%28detect+automatically%29&doctype=Inline&group=0&verbose=1
You can add this and it should work (at least it did just through in-browser modifications)
after your normal css
<!--[if IE]>
<style type="text/css">
#mainbox{padding-left:0;}
#servicesright{float:left;}
</style>
<![endif]-->
That aside, you're also missing some closing tags it would seem and probably the reason for the weirdness.
Issues I detected on your page structure so far (which are causing the display issue):
#main-container should not have width
you are using table for your form layout which is a big mistake (it's pushing the whole content together down)
as a workaround removing width in (1) and width=100% in (2) will fix your problem butI highly recommend to follow good practices for your page layout. (i.e. using div instead of table).
No idea why this is happening... this is what it looks like in firefox:
And this is what it looks like in Safari:
A quick inspection with firebug for safari shows that its not picking up any style sheets except transmenu.css (for the menu - which isnt' even being used). I can't find ANY reason why this would happen.
Any ideas?
website: http://tradartsteam.co.uk
Thanks
#Thomas Clayson: Remove the extra </script> on Ln. 35 of your source-code.
Edit: It's two lines after <script type="text/javascript" src="/_common/js/mootools-1.2-more.js"></script>
Update:
#Thomas Clayson: The only way I could get the page to display just fine was to comment out the entire <script> element with $.noConflict(); inside until before <script language="javascript" type="text/javascript" src="/js/swfobject.js"></script>. Even just $.noConflict(); on its own breaks the page again. I'll do some more digging and update my answer again (unless someone else can find the solution before me).
Super Massive Update: #Thomas Clayson: After going a little batty that I couldn't see/find the problem, I set about making the document compliant for its DOCTYPE using the W3 Validator...that eventually and finally led me to the offending code hidden deep within the events of $('#calendar').fullCalendar!
<!--[if gte mso 9]><xml> <w:WordDocument> <w:View>Normal</w:View> <w:Zoom>0</w:Zoom> <w:PunctuationKerning /> <w:ValidateAgainstSchemas /> <w:SaveIfXMLInvalid>false</w:SaveIfXMLInvalid> <w:IgnoreMixedContent>false</w:IgnoreMixedContent> <w:AlwaysShowPl...
Not only is it horrible, proprietary MS Word nonsense, it got truncated and well...it severely messed with your site in some unexpected (at least by me) ways. Ah, even though your comment below pointing out what I should have felt in my bones having had to deal with this very issue far too many times before myself came a little late, your question has ultimately given me valuable experience so +1 for that. ;-)
Safaris web inspector shows errors. Ignore the favicon, but I suppose it might have something to do with that.
In fact, just having looked more closely at your source code, I found a great number of mismatched opening and closing tags, especially within the abbreviated text strings in your jQuery javascript (the ones ending on "...") - whatever you did to parse those even cut some of the tags in half.
I don't know how Firefox tolerates this (quite amazing, actually), but you might want to check your document syntax from top to bottom and make sure your code is correct. I'm quite sure Safari is not the only browser bound to have problems with this page.
Link to your stylesheet before your scripts (even better - put your scripts at the bottom of the page.)
I'm not sure exactly what the problem is but you do have an awful lot of javascript and the errors look to be interfering with the page load.
So I'm attempting to figure out where my cross-compatibility issue is - From what I can tell, Firefox and Safari have been working great, however Internet Explorer (surprise?) has been giving me tons of issues. Take a look at the site below:
https://secure.promptpass.com/index.php?clinic=1
For some reason, the background image is over-extending itself on the top and bottom (if you open the website, you will immediately understand what I mean).
Beyond that, in the Select box next to the "Select a Time" label, to the right there is always a box filled with ":45 pm".
The last remaining issue is that the entire content of this on many versions of Internet Explorer, all of the content is shifted to the left - based on the CSS, everything should be centered
Again, I've poured over this (and I'm sure these are simple things that I have overlooked) however at this point, I'm at a loss as to what this issue would be.
Thanks for any and all help.
First, move this elsewhere:
<!-- Google Website Optimizer Control Script -->
<script>
function utmx_section(){}function utmx(){}
(function(){var k='2883663228',d=document,l=d.location,c=d.cookie;function f(n){
if(c){var i=c.indexOf(n+'=');if(i>-1){var j=c.indexOf(';',i);return c.substring(i+n.
length+1,j<0?c.length:j)}}}var x=f('__utmx'),xx=f('__utmxx'),h=l.hash;
d.write('<sc'+'ript src="'+
'http'+(l.protocol=='https:'?'s://ssl':'://www')+'.google-analytics.com'
+'/siteopt.js?v=1&utmxkey='+k+'&utmx='+(x?x:'')+'&utmxx='+(xx?xx:'')+'&utmxtime='
+new Date().valueOf()+(h?'&utmxhash='+escape(h.substr(1)):'')+
'" type="text/javascript" charset="utf-8"></sc'+'ript>')})();
</script>
<!-- End of Google Website Optimizer Control Script -->
It makes the page render in quirks mode as opposed to standards mode so IE is rendering it in super-retarded mode and in this, margin:0 auto doesn't work in IE quirks. The doctype will make it render in standards mode.