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.
Related
I'm really quite new to Joomla and I've encountered a problem. On my homepage the article is showing just fine, but all the other modules (except for the menu bar) disappear when I switch to a smaller screen size. On my other pages the article doesn't even show anymore, just the menu bar. I'm using the purity III template. I have no idea what's going on since the settings in the layout of the template indicate that all modules that are showing on a desktop should also be displayed on a mobile device, and I've found no difference in settings in the articles itself. My site.
Thanks for your help!
It sounds like the responsive design hides them on purpose.
Just from a quick peek at your code using inspect element I can see that the class "slideshow hidden-xs" gets a display:none on smaller screen sizes and all of your main content is wrapped in that element. If all of your content is not supposed to be wrapped in that element (which I'm guessing it's not) you're most likely missing a closing tag on a div or something.
Find the missing closing tag (ie: /div, /a, etc) and it will probably solve your problem.
You can update the latest version of Joomla and check again that some problem is coming or not. I yes then download new theme for your website which is compatible with your theme.
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 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.
I have "Box Model Hack" issue. I found out that in all browsers except Google Chrome. So I searched the solutions and saw that I should put -webkit-box-sizing property in CSS and define it as content-box
I installed CSS3 for VS2010 and restart it, then CSS 3.0 showed up in drop down list on style sheet tool bar in VS2010. I saw new properties coming from CSS3 but I cannot find -webkit-box-sizing
Should I need VS2010 SP1? or is there something missing? Besides, if there is another Box Model Hack solution for Chrome, please tell me.
All -webkit properties are specific to browsers running on the Web Kit Browser Engine and are not part of the official CSS3 specification.
You can simply type in the CSS you require either in your stylesheet or your CSS style code block. I dont think VS will include a menu item for it (and many other proprietry CSS properties).
Having said that, I've just found a CSS 3 Intellisense Schema that includes the items you're wanting.
I am experiencing strange issue with scrolling, After doing some ajax operations on a webpage, which dynamically add & remove contents from the page. Mouse scrolling hangs up (mouse scoll events doesn't work) and pressing UP ARROW key from keyboard solves the problem.
I wonder is there any known issue like that for chrome?
Edit:
I don't have any js errors on the page, I am simply adding contents to div block dynamically
<div id="ContentArea">
<!-- load contents here -->
</div
<script>
loadHtml('/my/target/page', 'ContentArea');
// this contents may vary in size
</script>
Edit:
Similar thing happened to me on StackOverflow when i clicked load (n) new answers while answering some question. (some days ago)
I had similar issues and got them fixed by scrolling to the top/left corner before replacing the content. Just add the following line before you replace anything:
window.scrollTo(0, 0);
I've tested it only with Chromium 9.0.594.0 (67311) on Mac, but I think chances are good that this will work with on other platforms as well.
I've had strange problems with Chrome and scrolling, then I uninstalled the SmoothScroll extension and everything worked.
Try disabling all of your extensions and see if the problem persists (note: disabling does not uninstall them but will help you identify if an extension is causing the problem):
Menu button -> Tools -> Extensions
Then click the Disable link on all of them (and you may want to restart Chrome for good measure)