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.
Related
For some reason, two icons that show in IE and Chrome do not appear in Firefox and instead gives me some weird icon. I am using a font to display these.
I used firebug to track down exact CSS code for this but it simply shows
.icon-signin:before{
content: "";
}
whereas in IE, it shows
and in Chrome it shows:
I honestly don't understand what's happening here.
In the actual CSS file it has the following line:
.icon-signin:before{content:"\e047";}
All I could gather from google search is that
:before
is outdated and that I should use
::before
Would this fix the solution?
But if that is the case, why is Chrome displaying the icon when it also reads the css code with :before, not ::before ?
In IE8 Document mode IE8 I am using the wp-skeleton theme by simplethemes which uses a variation of superfish. All appears to work well across browsers except for IE8 which appears like this:
you'll need to recode some css for IE8,
besides I don think it's an important matter about IE8, Let the guys have an update of software ;)
IE8 doesn't like overflow:hidden, so you could try removing it. Another thread mentions is located in ie.css: #header_container #nav_container.
I'm having an issue with a WordPress theme project I'm working on (the theme is based on the Roots Theme for WordPress).
I'm having trouble controlling the font color of the main navigation sub-menus: but only in IE8. The font appears to be the same color as the background for the submenu, making it invisible to the user. Oddly, this issue only happens in IE8, and doesn't happen in chrome, firefox, IE7 or IE9.
The site is http://precisionmfgmn.com, to see the error try hovering over the "companies" link on the main navigation.
Here are some details that may be relevant:
I am using cufon font replacement.
Any ideas?
It looks like cufon is using canvas with IE8 and not IE7. IE8 doesn't seem to support it but IE9 does. Here is 2 possible solutions :
- modify the source code of the module, if the browser is IE8 then it should not use canvas
- force the IE7 compatibility view, you can do that by adding
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">
in your template file
The first solution is probably the best but the second is easier.
hmm very odd, Cufon is usually pretty universal with the way it displays, I have used it before and not had a problem. Do you have any style sheets on Wordpress that are browser specific ?, I know they have them on Joomla, but not sure if they have them on Wordpress or not. If there is, one of those may be applying a slightly different style to IE8 that is breaking Cufon somehow, if there is a IE specific stylesheet try renaming it to temp remove it, to see if it makes any difference.
I have just taken a look at it with IE9 in IE8 compatibility mode and cant see a problem with it ?, have you tried clearing your browser cache and reloading the page ?, it might have cached previous changes you have made, so the text is showing an old version.
Can you guys point out what I am doing wrong on with the navigation on this site? It works fine on webkit, but not firefox!
http://datatables.dyndns-web.com/
vs intended
The NAV-tag isn't a block-element by default in current versions of Presto, Trident and Gecko. Only WebKit has a default stylesheet for HTML5-elements included already. You should use a basic-/reset-CSS to format all HTML5-elements.
See: http://html5doctor.com/html-5-reset-stylesheet/
BTW, if someones asking for an image, you should upload an image of the desired result, not one of the broken view…
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. :)