Scrollbar area is just blue on site in Chrome - php

I recently converted a site created using Intuit's sitebuilder to WordPress (so don't ask about the design/music ;) ).
I'm having a strange issue, and several google searches and stackoverflow searches have returned nothing about it.
I'm using Chrome 16 and on all the pages of this website, I get blue bars instead of normal scrollbars. I have no CSS/scripts for custom scrollbars on the site. I'm guessing it's a weird Chrome css overflow: problem.
Anyone seen it before or have any suggestions?
http://razorsix.andrewsfreeman.com/origins

It's something in your <embed> code. Try removing it and you'll see. Not sure what's causing it though..?
<embed src="http://razorsix.andrewsfreeman.com/wp-content/themes/RazorSix for Wordpress/mp3s/shambala.mp3" autostart="true" loop="true" height="0" width="0">
Seems like the browser "crashes" on it. Maybe a file error in the MP3...

Related

CSS and images not loaded on some devices - wordpress

So I have this Wordpress-site set up:
http://dev10.xmedia.no/
One my computer and on my colleagues computer the site displays normal as it should. On my Android-phone, when in Chrome's Private Surf Mode it works at normal.
But its "screwed up" without images and CSS on the customers computer, on my phone in Chrome's normal mode and when rendering it through Googles speed test its also missing.
I've set up multiple WP-sites the same way on servers with the same settings, so there should be nothing special here. Anyone got a clue why its not loaded correctly on some devices?
The CSS isn't being loaded because it's password protected. If you try to go directly to the stylesheet you'll see what I mean:
http://dev10.xmedia.no/wp-content/themes/fiberteam/assets/styles/style.css
Remove this block and the stylesheets will load properly.
You only load 3 stylesheets.
style.css?ver=1, font awesome, and the video player css.
style.css seems to have very little in it:
.wpml-ls-legacy-list-horizontal{border:1px solid transparent;padding:7px;clear:both}.wpml-ls-legacy-list-horizontal>ul{padding:0;margin:0 !important;list-style-type:none}.wpml-ls-legacy-list-horizontal .wpml-ls-item{padding:0;margin:0;list-style-type:none;display:inline-block}.wpml-ls-legacy-list-horizontal a{display:block;text-decoration:none;padding:5px 10px;line-height:1}.wpml-ls-legacy-list-horizontal a span{vertical-align:middle}.wpml-ls-legacy-list-horizontal .wpml-ls-flag{display:inline;vertical-align:middle;width:18px;height:12px}.wpml-ls-legacy-list-horizontal .wpml-ls-flag+span{margin-left:.4em}.rtl .wpml-ls-legacy-list-horizontal .wpml-ls-flag+span{margin-left:0;margin-right:.4em}.wpml-ls-legacy-list-horizontal.wpml-ls-statics-footer{margin-bottom:30px}.wpml-ls-legacy-list-horizontal.wpml-ls-statics-footer>ul{text-align:center}
So it looks like you just forgot to load the main stylesheet.
UPDATE When I accessed the link to the CSS in your comment, I got a CAPTCHA. Now when I access the site, I see the site as it should look. Could that be your problem?
There is no problem in the code. i have downloaded source code and put in on my local and it is working fine. it seems there is something corrupted on hosting server.

I am getting horizontal scrolling responsive issue in WordPress

I am getting horizontal scrolling issue in iPhone. I developed a website in WordPress. and also it getting problem in mobile phone UC browser how can I fix the problem.
It will be hard to get a proper answer without looking at the site but what I usually do is use the component inspector from Chrome to locate any html elements that are created outside of the 320 px limit you have on iPhones and go from there.
Please provide more information.
However, as a dirty, quick fix, try:
body {
overflow-x:hidden;
}

Bizarre zooming issue in Chrome

I have a very irritating issue on the live site I'm designing for a client. I've dug into the CSS and HTML of the site to no avail. This only occurs in Chrome. The work in progress can be found at live.dancingsheepcoffee.com
Background:
Using Wordpress as CMS, theme designed with Underscores (_s)
Also using 960.gs system to aid layout design
Issue only occurs in Chrome; IE, Firefox, Safari, all display great.
Here's the breakdown:
On a virgin load of the site, the page displays as designed, issue free.
Upon a refresh (or second visit) the page loads "zoomed in" almost 200%, for no apparent reason. Text, navigation, headers, sidebar, and even the tiled background image. Site-wide. The main logo seems to be unaffected.
Zooming out and then back in (i.e., zoom to 90% then back to 100%) 'fixes' the page and displays as designed.
Also following the link to the same page from the menu bar loads the page correctly, however the content "jumps" sizes before displaying the correct content.
Content box remains at 960px wide (except when user toggles zoom, appropriately)
Background image also "zooms" on page load but then displays correctly when resolved above.
And the worst part is, I can't duplicate this on my main work computer, but the issue displays on every other computer. The way the issue works, it sounds like it's something on the client side, as the web server seems to render the page perfect every time, but perhaps the cached version isn't working. A thought to consider.
I greatly appreciate the time considered and help with this issue. I'll provide any applicable code to aide troubleshooting. Thanks again!

Elements unintentionally resize on side refresh

I have a jQuery Mobile application, and on certain pages, such as for example this one: "http://olkensway.se/upplevdinkommun/activities.php?community_id=6&category_id=1", I'm facing a problem. When the page is loaded the first time, it shows correctly, but the problem occurs when I refresh the page (by pressing F5). Try and see for yourselves. The search field re-sizes and becomes much larger than what is supposed to be. This problem occurs both in my desktop browser (Tested with Google Chrome and Internet Explorer) and my mobile browser (Google Chrome as well). Using Google, I haven't found anybody with the same problem yet. I'm new to both jQueryMobile and web design in general. Is this a problem with my PHP, HTML or CSS. Some conflict with jQM? Please tell if I should show more code than what is available by viewing the page's source.
EDIT: It can be worth telling that I have other pages, not using any PHP, where this isn't a problem. So it's likely come conflict there...
When I load the page, the search thing is taking up the entire page. After inspecting the element in chrome, the article element's font size is 200% (.ui-body-c) . When I unchecked that it went to a "normal" size. I'm not sure exactly what you want it to look like, but maybe that's your problem? hopefully that helps

Fancy Box and Jquery Tiny Scroll Bar Prolem

I am working on a page and having problem with the Fancybox close action for the Image gallery in the first button at the bottom, the gallery is closed but overaly is still there. Here is the test link
How ever the same settings are working for the second link "Floor Plan".
Secondly I am using a Tiny Scrollbar plugin for the gallery on the page. The thumbs on the left side have blue scroll bar if they are larger in contents. This scroll bar does not appear in Google Chrome, and sometime don't show up even in other browser if the page loads first time, then I have to refresh the page to show it. Any idea about the problem will be greatly helpful.
Thank you!
First off, I noticed you're suing jQuery 1.3, why?
Here's 1.6:
http://jquery.com/
It isn't that much larger, and its an updated library. That may fix your problem.
If that didn't work, then delete the fancybox.js, re-downlod and put it in again, same with css. Make sure the css is called at the end of your css document.
If that doesn't work, I suggest getting rid of your javascript files one by one until there is only fnaycbo xleft, it's obviously some conflicting code at this point, so you'll have to troubleshoot by trial and error, going through one by one to findout what script is preventing close. I don't have access to your server, so I can't test it.
It's most likely in main.js, so remove that first, and see if fancybox works then!
ETA: Scrollbar fix.
The problem is something is adding a disabled selector, it's javascript. But you could change up tinyscrollbar.js to fix it, or you could go to your css, find the line:
'#scrollbar1 .disable {display:none}
and remove that line entirley, it's causing your scrollbar not to appear in browsers the javascript is (for some reason) disabling in.
In my case I solved with the next modification:
$(document).bind("load", function() { $('#myTinyScrollbar').tinyscrollbar(); });
Well you have an error in console:
d.onClosed is not a function
It could be because:
Your using an old version of jQuery possibly not supported by Fancybox. Try updating to 1.6, though beware legacy plugins or code that could break due to the steep upgrade.
A compression issue. It's possible i.e. the Google Closure could of removed what it saw as "unneeded" code and therefore broke the functionality. Try using uncompressed Fancybox to see if it fixes it, if it does then you know this the issue, rather than your jQuery version.

Categories