I'm having a heck of a time getting a map to render properly in IE8 or IE compatibility mode. I've tried examples and demos, I've changed maps multiple times... All features seem to work and look great except IE compatibility mode or antiquated versions of IE. Maps ARE rendering on IE8 or below on the jvectormap website just not for the examples offered.
I've even gone as far as trying to replicate the maps on http://jvectormap.com, linking right to it's JS files. Still nothing.
Thanks so much for your time.
I reviewed the link you gave. The only issue I see is an absence of region border in IE8 or compatibility mode. The problem behind this is inability of VML engine to render borders with fractional width. Setting border as 1 makes the example work as expected.
Related
I'm currently doing some work with D3 and one of these things I'm finding slightly frustrating is the ability to debug stuff in the DOM. My typical browser of choice is Chrome (latestet update to date version) yet when I try to select stuff in the DOM chrome seems to get very confused!
The circle I've selected in the DOM, isn't even contained within the SVG as far as chrome thinks.
Having just checked IE11 seems to have similar issues, however Firefox seems to handle it (unfortunately I'm not a big fan of Firefox). It this a common feature that developers using D3 have found workarounds for? Or is everyone using Firefox? Or do I need to go log some bugs against various browsers?
I think this is a new bug. It worked fine on Chrome as well a couple weeks ago.
I have less distance between the displayed and the actual position. Maybe 10 or 20 pixels. So I can live with it. But it was flawless not long ago.
I've just downloaded the latest Nivo slider 3.2 as I need it on a responsive site and out of the box with no modifications the transitions in ie7 and ie8 don't work.
They simply flick between images - no sliceDown or Fade they just rotate.
I've used it in the past with no problems - I've just view 2.6 in ie7 and ie8 and it's fine.
Does anyone know what can be done to fix it?
I've just checked out their demo too http://nivo.dev7studios.com/responsive-demo/ and the same issue is happening there.
Cheers
Just sharing what worked on my site -- I was using the default demo code, pretty much unedited from the download. It was beautiful and responsive (which I wanted) in all of the browsers I tested, except any version of i.e.. If i.e., it was just a rotation, no effects.
However, when I designated a size dimension for the wrapper div and the image divs, the transitions worked in i.e. also. (height: 350px;) You can specify the dimension in your css/stylesheet or inline -- if that's what it takes.
On my site, I only needed to specify a height dimension; for your site, you might need both height and width, or just width. A little experimentation was all it took.
But, with the height dimension specified, this threw off the display in the other browsers, so the dimension needs to be specified in terms of a "hack" for internet explorer: either a separate stylesheet just for internet explorer users or by using whatever your favorite internet explorer hacking method is: underscore, or \9, and so on. Here's a list of useful internet explorer workarounds, just for reference: internet explorer hacks
I know we hate to recommend hacking, but we all do it :). Would love to find out why this one worked for me, maybe there's a better way without the hack.
(Sorry for my poor English)
Yesterday, I encountered a problem when using #font-face with a really large font-size (200px): one of my div rendered differently in Firefox and Chrome. After doing some research, I learned that it was due to Firefox and Chrome calculated line-height differently, and a specified line-height could solve my problem.
BUT, to my suprise, even if I did nothing, when I start FF in safemode, the problem solves itself! (it renders similar to Chrome) So I wonder that's because I've customized FF too much? I creat a new profile (no addon, disable all plugin, reset all settings to default) but the newly created profile works the same like my old profile, and different with FF in safemode. I don't understand it?
Safe mode, in addition to turning off all add-ons, also turns off the JIT and hardware accelerated rendering.
And if you're on Windows (which I assume is the case given the described behavior), then turning off hardware-accelerated rendering also turns off DirectWrite rendering of text and uses GDI instead.
But DirectWrite and GDI end up with different font metrics for the same text: for one thing DirectWrite can do subpixel glyph positioning, and GDI cannot. So if you turn on safe mode, line heights and various other aspects of text layout can change.
Note that Chrome uses GDI to start with. IE 9 and 10 on the other hand, use DirectWrite, so it's worth testing how your page behaves in those; I'll bet it's similar to Firefox not in safe mode.
I've got a Wordpress site with some CSS3 rules applied to some images that rotate the images and have a hover effect on rollover too. Problems are showing up in Safari & Firefox when you hover on and then off these images and I can't seem to locate any similar issues by people on the Interwebs.
See http://tinyurl.com/3n2eude and hover on and then off the images (the slightly rotated ones):
Member name goes blurry and then back to normal (Firefox)
Member image border becomes jagged (Firefox)
A big black line displays to the side of the member images sometimes when you hover back and forth between two member images (Safari)
If I disable the transform:rotate rules, it's all fine. So seems to be an issue with that rule. Just can't work out how to get around it.
Anybody got some ideas on how I could get around these or what might be causing it?
Thanks for any ideas you might have!
Bit old of a question but that problem is related with rendering on browser (from what I understood). It cannot be fixed on CSS/HTML side. It must be fixed on user side.
Fix: http://www.askvg.com/how-to-enable-direct2d-directwrite-hardware-acceleration-in-mozilla-firefox/
More information about problem: CSS3 rotate - rendering problems in Firefox and Safari
What are the main differences (if any) between the box models of IE8 and Firefox3?
Are they the same now?
What are the other main differences between these two browsers? Can a web developer assume that these two browsers as the same since they (seem to) support the latest web standards?
The Internet Explorer box model has been "fixed" since Internet Explorer 6 so long as your pages are in standard compliants mode.
See: Quirks mode and Internet Explorer box model bug.
Until I learnt about doctype declerations getting IE to work properly was a real PAIN, because IE runs in "quirks mode" by default. So having a standards mode doctype will eliminate a whole bunch of the most painful CSS problems.
I would never assume that any browser renders a page exactly the same.. always test!
Even though they support standards, there are plenty of variations between different browsers and even different versions. FF1 renders differently to FF2 which renders differently to FF3.
You also have to remember that each browser has their own JavaScript engine which again, will cause some scripts to work and other to fail.
You can ofcourse reduce these differences by using CSS and JavaScript frameworks which have been developed to support multiple browsers.
However, you still must test in all browsers. There will always be something that doesn't quite look or behave right.
Things that will always differ between the two (and other browsers) are default values (font sizes in headings, for example). The way they achieve default visuals is often different, as well, such as whether or not they use padding or margin to achieve the indentation in bulleted lists.
Something quite positive that I just noticed is that IE8 finally fixes IE's handling of margin: 0 auto for block elements that you want horizontally centered in their respective parents.