I am helping a client with an eCommerce site (runs on ProStores from eBay).
The issue is that the site's base stylesheet is breaking (being disabled) when the page is translated with the Google Translate widget. This only happens in Firefox. Chrome, IE(6-9), Opera and Safari are all fine.
Translate in FF was working prior to some changes we made recently: mostly graphical, some additions to the stylesheet. I had to tip-toe around their templates which were built with tables, outdated code etc. so I am overwhelmed when trying to troubleshoot this.
Here is a link to the site: http://www.myfantasticbags.com
(open in FF and use google translate in the header area to see the issue)
Thanks in advance!
I had the same problem and much frustration with this.
The problem I was having was that it was translating my website's font-resizers - From 'large' to 'grande' etc. which was throwing off the font-resize element and entire site.
Try adding a class="notranslate" to any elements you think may be translating and throwing off your stylesheet.
Hope this helps!
Korey
Add class="skiptranslate" to the head tag.
If you also have a link to a print preview style sheet, so your visitors can see how pages will print, try this: Putting the link to your external stylesheet inside a div with class="notranslate", may not only fix the translation in Firefox but also when flipping back and forth between your print preview and default CSS in all browsers. I know that divs in the head tags are atypical, but I don't see any problem arise from that.
Related
I have an issue with Ves Contentslider of VenusTheme as it dose not load properly on backend. It still works fine on front end but we cannot do any configuration as it's control panel does not load the content. This is pretty weird as we have not changed any thing in our site recently. Please have a look at the screen shot below to have better understanding. Thank you in advance.
Screen shot
I just fixed this issue and thanks to the Venus Theme team for the quick and accurate suggestion. I did compress the js&css files and it stop the website rendering the js&css codes properly. That is why the configaration panel did not load on the admin site. So, I just need to go to the back end and navigate to Configuration/Advanced/Developers/JavaScript Settings(CSS Settings) and chose No option for the Merge JavaScript Files(Merge CSS Files). Then everything work perfectly again. This is good to know when we consider compress our CSS and JavaScript files. Cheers
I am building a site in Joomla (unfortunately) for a client. I have installed a template that uses Bootstrap as its basis, with some integration with Joomla, called H5BPTB. The problem I'm having is that when I visit the homepage on a small screen, and toggle the responsive navbar, it works fine, however after logging in, the navbar will open once, then close, but then no longer responds unless I refresh the page.
I read a few references elsewhere on stackoverflow to this being a problem with missing CSS transitions in the .collapse class in Bootstrap CSS. I checked and they are not missing. I also read another answer that suggested that it was a problem with some other Javascript overriding support.transition in the Bootstrap JS. I also can't find a reference to that in any other JS file. Is there anything else this could be?
Also I should add that the navbar works perfectly well in IE, but not in Firefox or Chrome.
Here is the site: http://avantgardeinternational.eu
I'd recommend just trying to update your Bootstrap files in the theme. They're both on version 2.1.1 and as far as I've seen looking around some people have had similar problems with earlier Bootstrap version.
The files you're looking to change are:
http://avantgardeinternational.eu/templates/h5bptb/css/bootstrap.min.css
http://avantgardeinternational.eu/templates/h5bptb/css/bootstrap-responsive.min.css
http://avantgardeinternational.eu/templates/h5bptb/js/libs/bootstrap/bootstrap.min.js
If that doesn't work, I'd try just looking around and making sure that some scripts aren't conflicting, that could just mean disabling all but the Bootstrap JS. Then seeing if it works fine.
http://twitter.github.com/bootstrap/
Edit: Just attempted this, changing the CSS messed with the styles a bit, and it still didn't work. I don't think it loaded the JS into the page properly though, I'll try that now...
Edit 2: So after giving this a shot, I've concluded there is only one explanation now... I've observed the difference between the page when you're logged in and logged out. When you log in there are various other bits of JS that load into the page.
One of these must be overriding Bootstraps collapse methods, thus stopping it from working. There are a few extra scripts that load when you're logged in and some more styles. It might be working trying to remove these and then trying it again.
Im experiencing a very weird bug in IE8. A bunch of elements arn't shown on the page although with the developer tools I can see they are in the html and arn't being hidden with CSS. Refreshing the page fixes this.
This site is on a local environment and I cant put it online. Ive never heard of a bug like this so does anyone have any ideas for things to look into? Thanks
Id forgotten to validate the code. I hadnt realised (due to lots of whitespace) but some divs were placed before the opening doctype was specified. Hopefully fixing this will make the issue go away. Thanks
I have searched and searched, but didn't find what I was looking for, so sorry if it's already there. I did a photo blog for a friend and used to implement jQuery Jazyload (http://www.appelsiini.net/projects/lazyload) to load all the pictures along the way, however, it doesn't work in all browsers anymore and he stopped developing it. I heard of http://www.sebastianoarmelibattana.com/projects/jail/, but it will need a lot of extra text and code when you have 500-1,000 pictures on one site. Also I want to be able to load the images lets say 1000px, before they appear in the window.
Do anyone have suggestions/solution or else, to get the problem fixed?
You can view his site here: www.theblackguido.com (NSFW)
Thank you in advance.
Kristian
It is the part of automatically removing image src which does not work anymore. Version 1.5 released Dec 23, 2009 provided alternative where you must alter HTML and store image url in original attribute. I renamed it recently to data-originalto be HTML5 friendly. I also updated to documentation which better explains how to use it.
But yes. The way Lazy Load used to work is not possible anymore. Before you could just drop in the JavaScript and it handled everything automagically. Due to changes in new browsers you now must alter the HTML.
PS. Lazy Load is not dead. It was just orphan for a while.
I'm running into an issue with IE8 developer tools where they Style information is not displaying in the pane when I select an element. It is definitely page specific as I can switch to another page and the styles will appear for that page when I select an element.
Strangely, if I add an inline style to an element, the inline element will display in the style pane. The page finds the CSS files just fine since the page is rendering with the styles.
Anyone else encounter such a problem? If it helps, the page I'm developing is a Joomla template. I'm currently doing the process-of-elimination by deleting half the code, then the other half to identify the culprit code but I'd thought I'd throw this out to see if anyone else knows. Thanks everyone.
I saw others mention similar problems in other forums and the common issue has to do with a link tag to an external stylesheet. In my case, it was a Google Fonts Directory link.
<link href='http://fonts.googleapis.com/css?family=Josefin+Sans+Std+Light' rel='stylesheet' type='text/css' />
Removing the link temporarily allowed to style information to display.
I had a similar issue when a stylesheet had an include statement for another stylesheet that did not exist.
Try refreshing the Developer Tools' DOM cache - 4th button in the toolbar, the hotkey's F5. If the element's styles change after the Dev Tools window is opened, the actual DOM and the reported one can differ.
I ran into the same issue and found that developer tools was freaking out on my Typekit JS in the head. There was nothing wrong with it. Developer tools was just being finicky. Imagine that. I commented it out and viola, it worked again.
Another buddy of mine said he had seen developer tools freak out when an HTML tag wasn't closed properly so that might be another thing to look for.