I'm using TinyMCE but the images for the icons don't show up in Internet Explorer. I've checked the discussion here, but I'm already doing the necessary code right.
In firebug when I'm using firefox, I can check the CSS and I do see that the image (img/icons.gif) is loading, so it must be loading in IE as well, but the toolbar is still blank. If I roll over the toolbar, I get the right tooltips and can figure out which button it is, which means the buttons in the advacned are working. I think the problem is in CSS.
I'm using the latest jQuery version of TinyMCE, and running IE9. When I try it in compatibility view of IE9, it does show up the icons.
Is there any specific CSS that needs to be tweaked for IE9?
Are you using a responsive layout? If so, try this:
.mceEditor img {
max-width: none;
}
In my case the reason was the blocking of download of fonts in the IE-Security-Settings. (IE -> Internet Options -> tab 'security' ) Here the screenshot of the settings in a German IE:
If you cannot change the security settings, You can find a proposal here in TinyMce UserGroup to use a skin that does not use fonts. You can download the skin 'lightgraynofonts' here. Extract the zip-file into a directory /tinymce/skins/lightgraynofonts and initialize the tinymce editor like this:
tinyMCE.init({
selector: ideditor,
theme: "modern",
skin: "lightgraynofonts",** ...
Related
I have simple xpage with dynamic views. I can switch between them via Navigator that I added from Extension Library. Everything works OK, but the problem is with the CSS. To the navigator I have 1 style sheet attached, which contains the following:
.lotusSelected{background-color:none;}
And this is where it gets interesting- whenever I open the xpage in Chrome web browser, try to open any of the navigator elements and look at the code via Chrome devkit (or whatever it is when you press F12) it shows that the code above now is:
.lotusSelected{background-color:red;}
...So it pretty much changes my CSS. I don't understand why this is happening. Also, it does not happen in Internet Explorer. Can anyone explain me why this occurs and how do I fix it?
Maybe your css style is being overwritten by another one (i.e. from OneUI)
Check if it appears with strikethrough style below in your css debugger.
In that case, you can add !important in your style:
.lotusSelected{background-color:none !important;}
(FYI: this is a css anti-pattern :P )
If you want the background-color to be nothing then use transparent instead of none.
I'm having an issue with a dropdown menu in IE8. Everything looks OK on Firefox and Chrome but not in IE8, more precisely the text from the dropdown menu doesn't show up. What am I missing?
This is the website: http://stuffforyourdog.com/maxabiz/collegeadvisors/index.html
The problem is due to the use of Cufon plugin. I copied your html/css in jsfiddle and it works on all IE/Chrome/FF. http://jsfiddle.net/t6sqV/ I suggest dropping cufon, and use a service like Typekit instead: https://typekit.com/ . You can also use http://www.fontsquirrel.com/ to download fonts ready to be used using only CSS.
ps: be careful. hover on non link elements does not work for IE6.
I've been editing CSS using Firebug in Firefox, but recently noticed that Chrome is rendering my pages much quicker (with scrolling, interactive elements etc) and wanted to switch to it.
I found Chrome shows the computed CSS and what attributes are overruled in the stack and I can alter them one-by-one but what I liked about Firebug was that I could just edit the entire stylesheet in a real-time text editor. Is this same feature somewhere in the Chrome developer panel, or is there a Chrome extension that lets me alter the stylesheets this way?
In current versions of Chrome (I'm running 16) you don't need any external add-ons.
Right click anywhere in your page, choose inspect element, then in the window that shows up click the Resources tab, then in the left panel select the stylesheet you want to edit. To begin editing you need to first double click, over the css text.
Try StyleBot. It can also save edited CSS.
You can edit any property or create a new property by double click on an entry or empty space in Elements panel's styles pane. There is no way to edit entire css file just as text at the moment.
I use live.js! As you edit your css file it shows you the results realtime in your browser without having to refresh. http://livejs.com/
I've spend countless hours testing almost every Chome extension i could find (including stylebot) to mimic the live CSS editing of Firebug in Firefox. None to date have that same workflow. Live.js is the closest.
Have you tried the Web Developer Toolbar extension's CSS->Edit CSS tool?
https://chrome.google.com/extensions/detail/bfbameneiokkgbdmiekhjnmfkcnldhhm
Web Developer Toolbar for Chrome > CSS > Edit CSS
there's a semi-working firebug extension but it's not exactly perfect yet.
User Firebug Lite. It's also available as an extension to Chrome.
You are looking for this - Live Stylesheets
I wrote the LiveCSSEditor 4 years ago for exactly this reason. FireBug in Firefox would let me free-hand write CSS into the page, but nothing else in Chrome would.
I still use it today and have yet to find a better solution. It may work for you as well. :)
Is there a firefox addon or is there a way to use firebug such that you can select some text on the website and it will tell you what styles are being used for that bit of text?
At the moment if I select a bit of text that is styled using css imported from elsewhere I would have to go digging manually to find out what style is being used. Is there an easier way?
Both FireBug and Web Developer addons can be used for this.
Just right click it in Firebug, choose HTML, and in the right pane, select Style>Show User Agent CSS. This will show a list of CSS rules that are being applied on the selected element.
Would you be aware of any tools(preferably free) or browser plugins that would allow me to easily determine the styling properties of an element on the web page.
For example it could be a tool that would import all the styling information from the css files associated with the page and presented it as an in-line styling.
Eventually some sort of browser plugin that would alow me to select an element and then would dispaly the styling information.
Safari and Chrome have a built in Web Inspector, right click and select Inspect Element. Firefox has the Firebug plugin. IE has IE Dev Toolbar.
Firebug will do that, at least in Firefox.
Your best bet here is the "Web Developer Toolbar" extension for FireFix. With this extension you can enable the "Show CSS Information", clicking on an element opens a window with all appliciable CSS styles.
You can also view all CSS and do many other very helpful things with it.
Check the web development helper by Nikhil Kothari for IE
And Firebug in Firefox
Hope this help
If it's just the colour you are after in Firefox, you can use ColorZilla, which lets you eyedrop any colour off the viewport (including the chrome!)
for web development (overall graphics) the plugin WebDeveloper for firefox.
Light and powerfull