Internet Explorer display problem!

shyam0801 · Post by **shyam0801** » Mon Nov 23, 2009 6:23 am

I have developed website using Joomla it has come out well, all these days I was using Mozilla and everything was looking perfect but when I tested same website in Internet Explorer some icons, some click buttons have got bit displaced, is their any plug-in or any code which will help me solve display issue problem! I just want my website to look same in both Internet explorer and Firefox Mozilla.

Thanking you in advance
Shyam

kannansreenivas · Post by **kannansreenivas** » Mon Nov 23, 2009 6:37 am

Your Issue is called IE Bug. Normally, the well developed templates will have scripts to evaluate the brouser and load css accordingly. If your template is developed by yourself, you need to ascertain each issue, and write appropriate css and load it when IE is used.

shyam0801 · Post by **shyam0801** » Mon Nov 23, 2009 6:49 am

I am using one of the free templates provided for joomla! Guess it does not have IE script, wre would i find this scripts?

kannansreenivas · Post by **kannansreenivas** » Mon Nov 23, 2009 6:56 am

Its not that much easy.... any ways, if you are using ff with web developer tool bar, you can copy the css for IE from premium templates. and from coding you need to load it when IE is used

shyam0801 · Post by **shyam0801** » Mon Nov 23, 2009 7:09 am

Thanks a ton! I will copy IE script from other joomla premium templates, r else if you have any ready IE scripts could you please mail me [email protected]

Again thanks a ton for your reponse
Shyam

kannansreenivas · Post by **kannansreenivas** » Mon Nov 23, 2009 7:12 am

Let me try I have a lot of premium templates

shyam0801 · Post by **shyam0801** » Mon Nov 23, 2009 7:24 am

Thanks a ton! will be waiting for UR code/mail!

Tanking you again
Shyam

rekk1986 · Post by **rekk1986** » Mon Jan 04, 2010 8:31 am

I have the same issues, when i use FireFox, IE8 it's normal but when I use the IE 6 ,7 this problems occurs. Who have the script to use in this occasions? please explain carefully fo me which script use for IE7 and IE6 thanks.

kannansreenivas · Post by **kannansreenivas** » Thu Jan 07, 2010 2:45 am

Some one send a mail from this thread with out indicating their mail id.
kindly incorporate mail id, so that I can send files.
Thanl you

octronx · Post by **octronx** » Mon Jan 18, 2010 10:32 pm

Hey.
I have the same problem, can you send me the premium templates too? Would be very, very nice!
best regards
octronx

akonews · Post by **akonews** » Thu Jan 28, 2010 5:09 pm

I have developed website using Joomla it has come out well, all these days I was using Mozilla and everything was looking perfect but when I tested same website in Internet Explorer some icons, some click buttons have got bit displaced, is their any plug-in or any code which will help me solve display issue problem! I just want my website to look same in both Internet explorer and Firefox Mozilla.

Thanking you in advance

kannansreenivas · Post by **kannansreenivas** » Wed Feb 03, 2010 9:04 am

Mail me your mail id

walter_moclear · Post by **walter_moclear** » Thu Feb 18, 2010 5:53 pm

Hello,
I have exactly the same problem with Internet Explorer 6 and 7, can you send me the premium templates too? Would be very nice!
Take care
Wally

kannansreenivas · Post by **kannansreenivas** » Sun Feb 21, 2010 9:02 am

Template send

mazetree · Post by **mazetree** » Wed Feb 24, 2010 12:54 am

same display problem here-just sent an email to you k - thanks!

kannansreenivas · Post by **kannansreenivas** » Thu Feb 25, 2010 1:35 am

Sent to you tooooo

modhumiah · Post by **modhumiah** » Thu Feb 25, 2010 2:45 am

what is the code to detect IE and load IE specific CSS? Can anyone please give any example ? Thanks in advance.

kannansreenivas · Post by **kannansreenivas** » Thu Feb 25, 2010 4:12 am

See the following eg :

Code: Select all

<link href="/templates/bt_ezhost/css/layout.css" rel="stylesheet" type="text/css" />
<link href="/templates/bt_ezhost/css/template.css" rel="stylesheet" type="text/css" />
<link href="/templates/bt_ezhost/css/cmenu.css" rel="stylesheet" type="text/css" />


<style type="text/css">
#wrapper { width: 960px; }
</style>

<!--[if IE]>
<link href="/templates/bt_ezhost/css/template_ie.css" rel="stylesheet" type="text/css" />
<![endif]-->

<!--[if lt IE 7]>
<link href="/templates/bt_ezhost/css/template_ie6.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
var blankImg = "/templates/bt_ezhost/images/blank.gif";
</script>
<style type="text/css">
.pngfix { behavior: url(/templates/bt_ezhost/js/iepngfix.htc); }
.pngfix_static { behavior: url(/templates/bt_ezhost/js/iepngfix_static.htc); }
</style>
<![endif]-->

kannansreenivas · Post by **kannansreenivas** » Thu Feb 25, 2010 4:29 am

The way browser detection using CSS hacks works is to send one CSS rule to the browser(s) you're trying to trick, and then send a second CSS rule to the other browsers, overriding this first command. If you have two CSS rules with identical selectors then the second CSS rule will always take precedence.

Say for example you wanted the space between your header area and the content to have a gap of 25px in Internet Explorer, or IE as it's affectionately known. This gap looks good in IE but in Firefox, Opera and Safari the gap is huge and a 10px gap looks far better. To achieve this perfect look in all these browsers you would need the following two CSS rules:

Code: Select all

#header {margin-bottom: 25px;}
#header {margin-bottom: 10px;}

The first command is intended for IE, the second for all other browsers. How does this work? Well, it won't at the moment because all browsers can understand both CSS rules so will use the second CSS rule because it comes after the first one.

By inserting a CSS hack we can perform our browser detection by hiding the second CSS rule from IE. This means that IE won't even know it exists and will therefore use the first CSS rule. How do we do this? I shall Tell you

kannansreenivas · Post by **kannansreenivas** » Thu Feb 25, 2010 4:31 am

To send different CSS rules to IE, we can use the child selector command which IE can't understand. The child selector command involves two elements, one of which is the child of the other. So, html>body refers to the child, body, contained within the parent, html.

Using the example of the header margin, our CSS command would be:

Code: Select all

#header {margin-bottom: 3em;}
html>body #header {margin-bottom: 1em;}

IE can't understand the second CSS rule due to the html>body CSS command so will ignore it and use the first rule. All other browsers will use the second rule.

modhumiah · Post by **modhumiah** » Thu Feb 25, 2010 3:41 pm

@kannansreenivas

Thank you very much for your help. I will get back to you if I face any problem with it. Thanks again.

kannansreenivas · Post by **kannansreenivas** » Sat Mar 06, 2010 7:11 am

Let me put some information about the Bug on alignment issues in IE

Width and Height of an Element
Important: When you specify the width and height properties of an element with CSS, you are just setting the width and height of the content area. To know the full size of the element, you must also add the padding, border and margin.
The total width of the element in the example below is 300px:

Code: Select all

width:250px;
padding:10px;
border:5px solid gray;
margin:10px;

Let's do the math:
250px (width)
+ 20px (left and right padding)
+ 10px (left and right border)
+ 20px (left and right margin)
= 300px

Imagine that you only had 250px of space. Let's make an element with a total width of 250px:

The total width of an element should always be calculated like this:

Total element width = width + left padding + right padding + left border + right border + left margin + right margin

The total height of an element should always be calculated like this:

Total element height = height + top padding + bottom padding + top border + bottom border + top margin + bottom margin

Browsers Compatibility Issue
If you tested the previous example in Internet Explorer, you saw that the total width was not exactly 250px.

IE includes padding and border in the width, when the width property is set, unless a DOCTYPE is declared.

To fix this problem, just add a DOCTYPE to the code:

Code: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
div.ex
{
width:220px;
padding:10px;
border:5px solid gray;
margin:0px;
}
</style>
</head>

meddu · Post by **meddu** » Sun Mar 07, 2010 1:28 pm

thanks for the info, i'have resolved my issue

akonews · Post by **akonews** » Fri Mar 12, 2010 9:31 pm

rekk1986 wrote:I have the same issues, when i use FireFox, IE8 it's normal but when I use the IE 6 ,7 this problems occurs. Who have the script to use in this occasions? please explain carefully fo me which script use for IE7 and IE6 thanks.

I have the same problem.please make tutorial for fixing this problem.

boisedesign · Post by **boisedesign** » Mon Mar 22, 2010 6:23 pm

I am having issues as well. All pages look good in Firefox, only some in IE8. There is a lot of info in this forum thread I'm not sure what to do.

site is www.getfitretreats.com/index.php

I have been working to customize this Joomla 1.0 template and would like to keep it. If there is code I need to paste into my template.css please let me know.

In appreciation.

Sinone69 · Post by **Sinone69** » Mon Aug 30, 2010 12:36 pm

Hello my friend, I am facing the same problem. Actually everything works fine on my website with Mozilla, Opera everything are good but with IE 7 there is an error on menu "Partners" check if you like http://eu-cec.eu Could please explain to me what I have to do, and if you can send me a script about it?

Keep in contact,
thanks a lot

KMHDESIGN · Post by **KMHDESIGN** » Tue Aug 31, 2010 5:34 pm

Kannan,
Just wanted to thank you for the mini-tutorial!
You cleared up a lot of questions I had when running across such CSS within modules or other templates.
Very concise for a simple designer like myself to understand.
And now I know why there are those additions to the doctype.
Thanks again!
K

kannansreenivas · Post by **kannansreenivas** » Wed Sep 01, 2010 3:24 am

Thanks a lot for discussions and thanks to this forum for providing such a gud platform

giluy_tu · Post by **giluy_tu** » Fri Oct 01, 2010 10:19 am

Dear all,

Could you please help me with the IE display problem? The display in FF,Chrome, Opera, IE7 is perfect BUT in IE6 is a mess. My webpage is http://www.ka-trading.com

Thank you very much.

Giluy

ceo2435 · Post by **ceo2435** » Sun Oct 31, 2010 11:45 pm

So I think I have a similar problem as the rest stated above. I have recently started a site using a free template from siteground, and after having the site up and running for about 2 weeks I realized that 2 of my 4 pages were not showing the content portion of the pages with IE. The site works 100% and loads all content on all pages with both safari and firefox. I have done a ton of forum reading and frankly, I just wish there was a good answer. Can anyone help? The website is improvemywebpage.com (the services and packages pages do not load content on IE, but all is good with other browsers). I have been trying my best to sift through code and back track actions, but I am new to joomla and fear I may be missing something. Can anyone offer insight or even better a solution??!!!!
Thanks,
-D

The Joomla! Forum™