I have used Joomla 3.3 ("tk_responsi_free" template) to build my website. But when I am trying to view it in IE7 the sub menu section getting suppressed by other modules. So I have added little bit of CSS code in "custom.css":
#header {
z-index: 999;
}
This solved my problem in IE7. But now I am not able to view the contents which were written under Header tag in IE6. I have removed the above CSS code and also used conditional statement. But the problem remains.
Thanks in advance.
IE6, a browser from pre-history, can't parse html5 tags. Are you even loading an html5shiv? Without it IE6 doesn't even know the header tag is there. Pretty sure your template will not support IE6, so if you want IE6 support a free responsive template is not the best choice.
Expecting that is like expecting a transistor radio to play a Blu-ray disc. As far as IE6 is concerned html5 doesn't exist, neither does css3.
Related
I found out that I need to make use of Respond.js if I want to make Bootstrap work in IE8. Once included, everything looks well, except one thing. It seems like HTML5 elements style won't adjust (even when editing with inline-code when using developer tool in IE11 (with emulation on IE8) within my local html file, but when I do the same on a Bootstrap example, it seems to work perfectly fine though).
Changing the HTML from:
<footer>...</footer>
To
<footer style="BACKGROUND-COLOR: tomato">...</footer>
works within the example page (while editing within the browser), but does not work when I open my local file and do the same thing.
Why can I add styling to a footer on the HTML5 elements within the example page but not on my local file? Am I missing some file or do I need to do something differently? How can I make my <footer> styling work?
One suggestion I would do is making it just a <div> element with a class .footer but this is not the way it looks like within the Bootstrap example, so I do not know if this is the right way to fix the problem I am experiencing.
HTML5 has a whole bunch of new elements for adding semantic meaning to your pages. For instance, nav signifies a navigational menu.
Since IE8 doesn’t know anything about these, it won’t recognize styles applied to them via CSS. Fortunately, there is an easy way to fix this by simply appending missing elements to the DOM of the page:
<!--[if lt IE 9]>
<script>
document.createElement('header');
document.createElement('nav');
document.createElement('section');
document.createElement('article');
document.createElement('aside');
document.createElement('footer');
</script>
<![endif]-->
Obviously you don’t have to define every HTML5 element in existence, just the ones you actually use. By the way, this code uses conditional comments, a feature introduced by Microsoft to specifically support differences in browser versions.
Another important thing to point out is that HTML5 elements are displayed as block by default, but IE8 doesn’t know that either. To mitigate this issue you could either specify display: block; when styling specific elements or do it wholesale in your CSS:
header, nav, section, article, aside, footer {
display:block;
}
Note that if you’re using an HTML5 aware reset stylesheet (like this one), this is probably already taken care of for you.
Other way to use js liberaries
There are work-arounds in the form of the html5shiv and Modernizr polyfill scripts. Use one of these libraries to add support for HTML5 tags to old IE versions.
I find myself in a pickle, I hope someone can help.
I have a website and if I open this website in any browser out there it works perfectly find until I open it with IE7. IE7 opens the website however it only load half of it... the html source code is downloaded successfully and the elements in the background are active, they are just not visible to clients o.O what can I do??
The website is: http://ambulanta-susnik.voblaku.com/
I'm not trying to advertise in ANY WAY. I just fell like this is the only way to really show you whats wrong.
Try opening it in IE7 or IE9 with Document type: IE7 standards.
Any ideas??? I tried everything ... different doctypes, xmls declaration, xml declaration, etc...
W3C HTML validator shows 5 Errors, 5 warning(s) but those are only for unencoded links...
Screenshots for those who can't use IE7 compatibility mode:
WRONG WAY: http://ambulanta-susnik.voblaku.com/files/wrong.png
RIGHT WAY: http://ambulanta-susnik.voblaku.com/files/right.png
Add position:relative to the #content {} css
I have developed a website on CMS Made Simple, a common CMS for me to use. I never have a problem with IE7 but with this website, I am having this issue where it acts like the css isn't there. I have stared over the html and styles for over 2 hours, and I am sure it is something simple, but I can't figure it out. It is only IE7 or Compatability Mode for IE. Chrome/Firefox/Safari all work.
What could be causing the site to act like the style isn't linked up?
The website is
http://bradyinn.com/
You havehad a rogue " character in your stylesheet. IE7 is not handling that correctly and fails to correctly parse anything past that point in the CSS.
A validator will pick this up.
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 have a blog, www.realcanadianenglish.blogspot.com. I use Firefox to write it. Sometimes I check the blog using Internet Explorer. With the later it shows a gap between the picture and the text sometimes. Can I change the HTML code to fix this? Why is there a difference between the two: Explorer and Firefox?
Internet Explorer can have extra padding on some elements. I suggest you try to include a CSS Reset file first and then your own CSS file.
Here's a good Stackoverflow question about CSS Reset files
The blog looks fine on IE8. If you're having a problem with it, I would recommend running IE8 and using the debug tool provided (hit F12). You can dynamically change the HTML and CSS from right inside the browser. It's faster than uploading a new template every time you want to test a change.
You are refering to the IE Model Bug
In most cases the issue will be with IE and, in those cases, it's sometimes best, or at least convenient, to just serve IE a line or two to bring it into line with the other far more modern browsers with "conditional comments". These comments will be recognized only by IE but wind up allowing you to include styling or html that won't affect other browsers. They are easy to use but have a few variations based on which version of IE you are targeting. Here is the link explaining them all: http://msdn.microsoft.com/en-us/library/ms537512(VS.85).aspx
Here is the best place to learn about IE CSS bugs: http://www.positioniseverything.net/ie-primer.html