When i fix the issues for Mozilla compatibility they work fine on my system, but when i want to check those changes on a different PC using same version of Mozilla, I am getting some UI issues.
Same version of Mozilla are giving different height & widths of same div when checked on different computers.
Screen size is same, screen resolution is same and every thing is working fine when i use Chrome on both the PCs.
Please advice me if i am missing something here that might help me in solving this issue.
The reason for this inconsistencies in things like default line heights, widths margins and font sizes of headings is due to default behaviours of own browser. To resolved this you can use reset or normalize css to have consistent behaviour first. Then give your custom or required css on element.
Please find the links below:
http://meyerweb.com/eric/tools/css/reset/
http://html5doctor.com/html-5-reset-stylesheet/
Related
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.
I'm at a loss as to why my website (violetoeuvre.com) display differently on a PC than on a Mac. It might be plausible if I was using different browsers, but I'm using Chrome in both cases.
I can't figure out why Emma Carmichael and the navigation at the top (Writing, Blog, Contact) is a little above the black on the PC, but bleeds into the white on a Mac (what i want).
Mac:http://imgur.com/ZDRpMDj
PC: http://imgur.com/E5TbV4K
Thanks!
Are the images randomized? They are two different images shown. Is there a chance on is a chance one has a cached version with different CSS / HTML?
How about posting the code for the page - maybe someone will know the intricacies of mac vs pc in chrome with respect to the elements you're using.
I guess issue is with height of black section.
try giving height of black section in %.
That might work!!
Hope it helps.
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.
Good evening everyone.
I am puzzling over the oddity that the jQuery Marquee plugin, which was working fine, suddenly resets itself after showing only four of six entries here: http://site427.mysite4now.net/tazthedog/site1/ (click on the Upcoming Events tab in the lower-right hand corner).
This works correctly in IE and Chrome on a PC, but in Firefox on a Mac and PC it resets after four.
Any ideas why it resets?
Thanks in advance for the help.
Doesn't seem to be a problem for me in Chrome 5. What browser are you seeing this bug in?
Edit:
Ah, I got it in Firefox. Could be any number of things. Looks like it might be an edge detection thing. Or the height they pull from the page isn't the proper height needed for the animation. Chrome displays this properly, so you might want to check the "hitedge" and "height" variables to make sure they are properly assigned and defined. It could also be a timing thing or some sort of event delay with Firefox. Try upgrading to the latest version of jquery 1.4.2 to see if that resolves anything.
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.