Hi, A page on my site seems to display incorrectly when first viewed using Chrome, but when refreshed it works fine. The page is: http://www.smallfrog.co.uk/resources.htm It works fine with every other browser tested so far (even Safari), anyone know what the problem may be? Many thanks, ebbo
I don't see the problem. Perhaps you are making changes and then trying to view them? In that case, you are seeing what's in your cache. Refreshing updates your cache to the current view.
It's doing it here - If I was to take a wild guess, I would assume that the unclosed HEAD when you are using a XHTML doctype could have something to do with it... while I don't think the fictional/made-up attributes in that buggy flash embed are to blame, They are also something that should be cleaned up. Remember the rule, when looking for causes of rendering errors, first make sure you have valid markup. Peering deeper under the hood, your code isn't TOO bad, but there are some other issues that should be addressed. First is that stupid malfing MM_ javascript nonsense - so, using Dreamweaver are you? Javascript to do CSS' job is pretty much rubbish and a waste of bandwidth, so get that out of there and use a :hover state for those. (probably combining down to using a single image for both states) Next up is your heading orders, which make no sense. Lower order headings should be subsections of the heading before it, and you should not skip over numbers. This means your H3's should be H2's if you are going to keep "resources" as the H1, but I'm not sure that 'useful links' in the sidebar should be treated as a subsection of that h1, meaning the h1 needs to be something else, resources moved down to h2 with 'useful links' promoted to h2. Worse though is your use of lists - Here's a tip, if your list is only going to end up with one item - Don't use a list! Either combine all those separate lists down to one per section, or remove them. Assuming for example you want to keep this section as 'lists': <ul class="yellow"> <li><a href="http://www.google.co.uk/chrome" target="_blank" title="Download Chrome"> Google Chrome Browser</a> </li> </ul> <p class="smalltext">Chrome is a new web browser created by Google and if you havn't tried it already then I would seriously recommend giving it a shot. Chrome's popularity is huge, owed to it's great appearance and functionality.</p> <ul class="blue"> <li><a href="http://www.openoffice.org/" title="Learn more" target="_blank">Open Office</a> </li> </ul> <p class="smalltext">Open Office is an excellent tool for spreadsheets, documents, presentations, and other similar programs to MS Office, however this version is completely free. Open Office is compatible with documents formatted on most versions MS Office.</p> <ul class="red"> <li><a href="http://free.avg.com/gb-en/homepage" title="AVG website" target="_blank"> AVG Free</a> </li> </ul> <p class="smalltext">AVG is a bit of anti-virus software that actually considers the fact that you may be using the computer when it wants to start downloading more updates. The free version is only basic, but it provides all the cover you need for general web-surfing and email.</p> <ul class="green"> <li><a href="http://www.gimp.org/" title="GIMP Website" target="_blank">GIMP</a> </li> </ul> <p class="smalltext">GIMP is a great utility similar to that of photoshop, and can be used for either the simple tasks like touching up old photos, or more involved graphic design. GIMP is compatible with a massive range of formats too.</p> Code (markup): It should probably look like this (assuming the 'utilities' remains a h3) <ul class="yellow"> <li class="yellow"> <h4> <a href="http://www.google.co.uk/chrome" title="Download Chrome" > Google Chrome Browser </a> </h4> <p> Chrome is a new web browser created by Google and if you havn't tried it already then I would seriously recommend giving it a shot. Chrome's popularity is huge, owed to it's great appearance and functionality. </p> </li> <li class="blue"> <h4> <a href="http://www.openoffice.org/" title="Learn more about OpenOffice.Org" > OpenOffice.Org </a> </h4> <p> Open Office is an excellent tool for spreadsheets, documents, presentations, and other similar programs to MS Office, however this version is completely free. Open Office is compatible with documents formatted on most versions MS Office. </p> </li> <li class="red"> <h4> <a href="http://free.avg.com/gb-en/homepage" title="Visit Grisoft's AVG Website" > AVG Free </a> </h4> <p> AVG is a bit of anti-virus software that actually considers the fact that you may be using the computer when it wants to start downloading more updates. The free version is only basic, but it provides all the cover you need for general web-surfing and email. </p> </li> <li class="green"> <h4> <a href="http://www.gimp.org/" title="GIMP Website" > GIMP </a> </h4> <p> GIMP is a great utility similar to that of photoshop, and can be used for either the simple tasks like touching up old photos, or more involved graphic design. GIMP is compatible with a massive range of formats too. </p> </li> </ul> Code (markup): Same goes for the ELEVEN separate unordered lists in your sidebar - they too should only be a single list. Oh, and don't abuse the target attribute like that, that **** was deprecated in strict for a reason, said asshattery existing these days for the sole purpose of PISSING OFF people who understand how to use tabs. Forcing a new window open on the end user giving them no choice just breaks normal navigation and is bad usability. The user wants it to open in a new window, they can choose to do so - don't force it on them like that. That said, you've also got a whole slew of DIV that I'm trying to figure out the purpose of. You may have gone just a little overboard in that department. Bottom line, clean up the validation errors, use a flash embed technique that is actually valid (or get rid of the stupid wasteful flashtard nonsense outright), stop abusing attributes like target for no good reason (or at least provide fallback content so users like myself actually SEE a heading on the page), fix your heading orders, add some media types to your stylesheet, strip out the pointless javascript, rip out that stupid IE8 conditional (you've got NOTHING on the page that should warrant that type of asshattery), consider using a CSS reset - and then you might be able to start thinking about layout issues. ... and since that MM_ nonsense screams "I'm using Dreamweaver or some other adobe software" do yourself a huge favor, pitch that steaming pile of manure in the trash where it belongs, make microwave art from it's disks, and get yourself a normal text editor.
++ haven't done that in a while. Uh, make sure to use an older oven and not the nice new expensive one that you actually cook stuff in : )