IE cross-compatibility issue. My website, www.zerozaku.com, is compatible with Chrome and Firefox, but IE has an issue with my Mini-Chat overflowing out of the box. Could anyone help?
P.S. I've only tested it on IE8, Firefox, Chrome
Seems to be something about the position:relative throughout those elements.
Remove position:relative from the hb_container class on those inner divs and see if you can work from there. This will at least make the messages stay within the container, but the images still seem to have an issue.
Well, one issue is that when I load it in IE8 it goes into IE7 Standards mode . . . this can be due to your choice of !DOCTYPE. When I switch it to IE8 mode, the bug seems to go away, so I suspect it's due to one of the many CSS bugs in IE7.
Another perhaps unrelated issue is that IE reports a JavaScript error in line 45 of default.js . . . I believe this is due to an extraneous comma on line 44
Related
I have a problem with some divs on Safari, the margins are completely messed up.
The weird part is that it works perfectly fine on Chrome & Firefox. If I implement a fix made especially for Safari, it gets messed up on the others.
Help ?
Thanks !
The problem is caused by a missing left declaration. Add this to your CSS:
#pull_link {
left: 50%;
}
You may have a small error/errors in your code that is tripping you up (e.g. perhaps you are missing a closing tag that would cause container collapse and then your clear fix is not working). Check safari developer tools against chrome developer. You should be able to locate the problem that way. Sometimes one browser will function with an error another will not. Without more information it is hard to be conclusive here. Have you tried w3c validating the html http://validator.w3.org/ ? You can catch missing syntax that way also.
All,
I basically have two identical pages from a coding perspective. The first page is:
http://tinyurl.com/7rv59q3
The second page is:
http://tinyurl.com/7a7zyp8
However, in the second one IE adds extra spacing between the image and the other text. Does anyone have any idea why it would do this? In Chrome, Safari, FF it displays perfectly fine.
I can't inspect elements in IE because it isn't there so I'm not sure what is wrong. Any suggestions will be appreciated.
Thanks
Older versions of internet explorer do not correctly ignore whitespace (spaces, tabs, newlines, etc) when rendering pages. Your second example has a number of tabs after the image, which causes older versions of IE (or IE9 in compatibility mode) to put extra space after the image.
This page is being rendered incorrectly by IE 9 (and probably older versions too). The right menu is floating to the bottom of the page. Firefox, Chrome and Safari are rendering it correctly. Other pages in the blog are also being rendered fine by all browsers. I already tried to fire IE 9 Developer Tools (F12) and reduce the width of some divs (such as #main and .columns-inner)... no lucky with this approach, even with extra space the right menu is still rendered at the bottom. So I figure that the problem is in the Blogger auto-generated tags / css for the page content (which I am able to modify). Any CSS gurus out there can point what is wrong?
Cheers,
You have this line in your <head>, which is causing IE9 to render the page in IE7 mode:
<META content=IE=EmulateIE7 http-equiv=X-UA-Compatible>
If you remove this, it renders fine in IE8 and IE9. It still renders poorly in IE7, though.
Edit:
In response to your comment, I am able to replicate the issue with the background no longer being opaque. After some investigation, there is a particular script file being loaded:
http://www.blogger.com/static/v1/jsbin/938506610-ieretrofit.js
If you remove the <meta content='IE=EmulateIE7' http-equiv='X-UA-Compatible'/> on line 4 of the source, and you remove the ieretrofit.js file from line 1471 of the source, the page should render correctly in IE9.
Since the ieretrofit.js file appears to be generated by Google, you might want to ask them about it. If you would like to disable it JUST for IE9, and allow it to continue for IE8 and below, you should take a closer look at line 1471 of the source. Here is a snippet (it's quite long, this starts around character #2275):
'\74!--[if IE]\76\74script
The !--[if IE] there is part of an IE conditional comment. You can change that snippet like so, and it will still target IE8 and below, without affecting IE9:
'\74!--[if lte IE 8]\76\74script
Let me know if you have any further issues!
The page has 104 validation errors — I’d start by fixing those if I were you.
Almost certainly it is because the page is invalid. Also, I really would think about starting again with this page as it is overly complex markup.
Guys. Figured it out (with great help from andyb and Paul D.)
The validator pointed to some unpaired </div> tags that I removed. Now it is working flawless.
i am making a menu for my school assignment and it needs to work in both IE and firefox.
I am done the menu and it works perfectly in firefox, but i am having trouble getting it to display properly in IE
A part can be found over here: http://tutudragon3.info/ie-trying.php
When i click the home image in firefox, a dropdown sort of thing pops-up with 2 images with text "d" and "d". In firefox, there is no space between those dropdown images, but when i try it in IE, I see a small blank space between them.
how could i fix this (delete that space) please. I tried many different things but it didn't work.
Using IE8 by the way.
Before worrying about any specific bugs:
Use a Doctype that triggers standards mode, as quirks mode inconsistencies are a nightmare to deal with. If in doubt, use HTML 4.01 Strict: http://www.w3.org/QA/2002/04/valid-dtd-list.html
Deal with machine detectable errors
If you have done the things David mentions, and still see some differences, you might want to take a look at ie7.js, it is a JavaScript library to make Microsoft Internet Explorer behave like a standards-compliant browser.
I don't find any problem in IE7. But if you are having the problem, try giving display:block; to the <A> and <IMG> tags. The problem should vanish.
I'm having some problems with a certain piece of code which sits in my site; this error only occurs in Internet Explorer 7.
Rather than post all my HTML/CSS markup here I have put up a version of the site here.
As you can see I have "Widgets" in columns, for some reason IE7 adds an extra space under the Widget Header while FF displays it fine without any space.
This error does not occur in IE8, FF3, Opera, Safari or Chrome.
Can anyone suggest why this occurring and if possible, a fix?
Thanks in advance!
Add this css to wgt-wrap and it should behave.
zoom: 1
Google for hasLayout for explanation.
[EDIT] This discussion provides more insight into this IE bug. Why does Internet Explorer need the "hasLayout" flag?
Unfortunately IE 7 doesn't run very well on Ubuntu so I'm unable to reproduce your error, but have you tried resetting your CSS with a stylesheet like Reset CSS?
There is also a great site about browser quirks that you might want to have a look at.
Did you start by zero'ing out all of your element by doing a CSS reset? I see you have a few different elements in your div, it's possible that one of these has a default marin in IE7 that is throwing everything out of wack...