Difference between IE9 and Firefox

Hi,

Don't make two or more different commands on the same ID, you have:

#header ul.menu {
color: #FFFFFF;
min-height: 50px;
min-width: 500px;
float: right;
}

and

#header ul.menu {
text-transform: uppercase;
}

If you do want to make different commands for the same then I suggest to use classes instead of ID's.
Change the ID in your HTML to classes="..." and change your commands in css like this:

.header ul.menu {
color: #FFFFFF;
min-height: 50px;
min-width: 500px;
float: right;
}

and

.header ul.menu {
text-transform: uppercase;
}

Also make sure you have this command inside the header of your HTML file:

<!--[if lt IE 9]>
    <script src="html5shiv.js"></script>
<![endif]-->

You can find html5shiv.js on this URL: Download here

Hope this helps

And also for background colors use the command:

body {
background-color: #EDF5FC
}

instead of:

body {
background: #EDF5FC
}

Thank you! I have made some changes. I have to mention that I am working with Joomla 3.2. I am searching the html-file of the template...

Also, I have noticed that when compatibility mode is on in IE9, the website looks terrible. When it is off, it looks better, but still different...
If you want to take a look: http://www.t4q.be

The new CSS:

body {
background-color: #EDF5FC
}

h3 {
color: #555
}

h2 a {
text-decoration: none
}

h2,.moduletable h3, .items-leading h2 {
border-bottom: solid 1px #ddd;
}

.items-row h2 {
border-top: solid 1px #ddd;
border-bottom: solid 1px #ddd;
}

a:link,a:visited {
color: #27859C
}

a:hover,a:active,a:focus {
color: #27859C;
}

.logoheader {
background: url(../images/personal/header_128.png);
color: #FFFFFF;
margin: -2px 0 0;
min-height: 127px;
}

#logo {
width: 149px;
margin-left: 8px;
}

#all {
background: #FFFFFF;
color: #444;
}

#shadow #all {
box-shadow: 0px 0px 0px #555555
}

.header ul.menu {
color: #FFFFFF;
min-height: 50px;
min-width: 500px;
float: right;
}

#all {
background: #FFFFFF;
color: #444;
}

#shadow #all {
box-shadow: 0px 0px 0px #555555
}

.header ul.menu {
text-transform: uppercase;
}

#header ul.menu a:link,#header ul.menu a:visited {
color: #333;
}

#fontsize {
left: 165px
}

body a {
font-weight: bold;
text-decoration: none
}

body h3 {
color: #27859C;
font-family: trebuchet MS, sans-serif;
line-height: 1.3em;
}

/* grey background */
.button,button,p.readmore a,#header input.button,.pagenav a:link,.pagenav a:visited,#advanced-search-toggle,.profile-edit a:link,.profile-edit a:visited,h3.js_heading
{
background-color:#ddd;
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff", endColorstr="#dddddd");
background-image: -khtml-gradient(linear, left top, left bottom, from(#ffffff), to(#dddddd));
background-image: -moz-linear-gradient(top, #ffffff, #dddddd);
background-image: -ms-linear-gradient(top, #ffffff, #dddddd);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(100%, #dddddd));
background-image: -webkit-linear-gradient(top, #ffffff, #dddddd);
background-image: -o-linear-gradient(top, #ffffff, #dddddd);
background-image: linear-gradient(#ffffff, #dddddd);
border-color: #b2b2b2 #b2b2b2 hsl(114, 0%, 62.5%);

text-shadow: 0 1px 1px rgba(255, 255, 255, 0.49);
-webkit-font-smoothing: antialiased;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 1px 2px
rgba(0, 0, 0, 0.05);
color: #095197;
border: solid 1px #ddd
}

/* +++++++++++++ table display Catgegories table, contact etc, ++++++++++++++++++++* */
table {
border: solid 0px #ddd
}

table th {
background-color: #0074cc;
color: #fff;
background-image: -moz-linear-gradient(top, #095197, #1B6BA5);
background-image: -ms-linear-gradient(top, #095197, #1B6BA5);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#095197),
to(#1B6BA5) );
background-image: -webkit-linear-gradient(top, #095197, #1B6BA5);
background-image: -o-linear-gradient(top, #095197, #1B6BA5);
background-image: linear-gradient(top, #095197, #1B6BA5);
background-repeat: repeat-x;
filter: progid : DXImageTransform.Microsoft.gradient ( startColorstr
=
'#095197', endColorstr = '#1B6BA5', GradientType = 0 );
border-color: #0055cc #0055cc #003580;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
filter: progid : dximagetransform.microsoft.gradient ( enabled =
false );
}

table th a:link,table th a:visited {
color: #fff
}

tr.odd,tr.cat-list-row1 {
background: #f9fcfe
}

table tr:hover td {
background: #EDF5FC;
}

table th, table td {
border-top: 0 solid #dddddd;
}

/* blue background */
.button:hover,
.button:active,
.button:focus,
button:hover,
p.readmore a:hover,
#header ul.menu a:hover,
#header ul.menu a:active,
#header ul.menu a:focus,
.pagenav a:hover,
.pagenav a:active,
.pagenav a:focus,
#advanced-search-toggle:hover,
#advanced-search-toggle:active,
#advanced-search-toggle:focus,
.profile-edit a:hover,
.profile-edit a:active,
.profile-edit a:focus,
#fontsize a:hover,#fontsize a:active,#fontsize a:focus,
#mobile_select h2 a
{
color: #c7222a;
}

/* +++++++++++++++++ Pagination +++++++++++++++ */
.pagination span,.pagination span a:hover {
color: #999999;
background-color: #f5f5f5;
}

/* active item */
span.pagenav {
background: #095197;
color: #fff
}

.pagination-start span.pagenav,.pagination-prev span.pagenav,.pagination-end span.pagenav,.pagination-next span.pagenav
{
background-color: #f5f5f5;
color: #444
}

/* +++++++++++++++++ content +++++++++++++++ */
.article-info {
background-color: #fbfbfb;
background-image: -moz-linear-gradient(top, #ffffff, #f5f5f5);
background-image: -ms-linear-gradient(top, #ffffff, #f5f5f5);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff),
to(#f5f5f5) );
background-image: -webkit-linear-gradient(top, #ffffff, #f5f5f5);
background-image: -o-linear-gradient(top, #ffffff, #f5f5f5);
background-image: linear-gradient(top, #ffffff, #f5f5f5);
background-repeat: repeat-x;
filter: progid : DXImageTransform.Microsoft.gradient ( startColorstr
=
'#ffffff', endColorstr = '#f5f5f5', GradientType = 0 );
border: 1px solid #ddd;
-webkit-box-shadow: inset 0 1px 0 #ffffff;
-moz-box-shadow: inset 0 1px 0 #ffffff;
box-shadow: inset 0 1px 0 #ffffff;
}

ul.menu a:link,ul.menu a:visited {
color: #444;
}

#wrapper2 .item-page {
max-width: 800px
}
/* ++++++++++++++++++++++ menu ++++++++++++++++++++++++++ */
.moduletable_menu {
border: solid 1px #ddd;
background: #f9f9f9;
}

#header ul.menu {
}

#header ul.menu a {
box-shadow: none;
border-bottom: 0
}

ul.menu a:hover,ul.menu a:active,ul.menu a:focus {
color: #095197
}

/* ++++++++++++++++ highlightning active menuitem +++++++++++++++++++ */
ul.menu li.active a,ul.menu li.active ul li.active a,ul.menu li.active ul li.active ul li.active a,ul.menu li.active ul li.active ul li.active ul li.active a,ul.menu li.active ul li.active ul li.active ul li.active ul li.active a
{
font-weight: bold;
}

ul.menu li.active ul li a,ul.menu li.active ul li.active ul li a,ul.menu li.active ul li.active ul li.active ul li a,ul.menu li.active ul li.active ul li.active ul li.active ul li a
{
font-weight: normal
}

ul.menu a {
box-shadow: 0 0px 0 #fff;
border-bottom: solid 1px #ddd;
text-shadow: 0 1px 0 #fff
}

ul.menu ul a {
background: #e5e5e5;
margin-bottom: 1px
}

ul.menu ul ul ul a {
background: #f5f5f5 url(../images/3.0/arrow.png) no-repeat 24px center;
}

ul.menu ul ul ul ul a {
background: #fff;
}

/* +++++++++++++++++++++++ SLIDER ++++++++++++++++++++ */
.panel h3.pane-toggler a {
background: url(../images/slider_plus.png) right top no-repeat;
color: #333
}

.panel h3.pane-toggler-down a {
background: url(../images/slider_minus.png) right top no-repeat;
border-bottom: solid 1px #ddd;
color: #333
}

/* +++++++++++++++++ Tabs ++++++++++++++++++++++ */
ul.tabs li,dl.tabs dt h3 a:link,dl.tabs dt h3 a:visited {
background: #f5f5f5 url(../images/nature/box.png) repeat-x;
}

ul.tabs li a:link,ul.tabs li a:visited,dl.tabs dt a {
color: #333;
border: solid 1px #ddd;
border-bottom: 0
}

ul.tabs li a:hover,ul.tabs li a:active,ul.tabs li a:focus {
color: #000
}

.tabcontent,div.current {
background: #fff;
color: #000;
border: solid 1px #ddd;
}

.tabcontent .linkclosed {
color: #000;
border-bottom: solid 1px #e5e5e5;
}

ul.tabs li a.linkopen,dl.tabs dt.open h3 a:link,dl.tabs dt.open h3 a:visited
{
background: #fff;
color: #333;
border-radius: 5px 5px 0px 0px;
}

ul.tabs li a.linkclosed:hover,ul.tabs li a.linkclosed:active,ul.tabs li a.linkclosed:focus,ul.tabs li a.linkopen:hover,ul.tabs li a.linkopen:active,ul.tabs li a.linkopen:focus
{
background: #555;
color: #fff
}

#footer-inner,#footer {
background: #27859C;
box-shadow: 0px 0px 0px #555
}

#footer {
background: #27859C;
max-width: 1025px;
margin: 0 auto;
box-shadow: 0px 0px 0px #555555;
color: #27859C;
height: 50px
}

#footer a {
color: #fff;
background: none
}

#bottom a {
background: none
}

.box1 {
border-right: solid 1px #ccc
}

.box3 {
border-left: solid 1px #ccc
}

#bottom ul li a {
background-image: none;
padding-left: 0
}

.button_over_ons img {
background:url('/images/t4q/buttons/ons.png');
width: 48px;
height: 48px;
}

.button_over_ons:hover img {
background:url('/images/t4q/buttons/ons_h.png');
}

.button_wonen img {
background:url('/images/t4q/buttons/wonen.png');
width: 48px;
height: 48px;
}

.button_wonen:hover img {
background:url('/images/t4q/buttons/wonen_h.png');
}

.button_residenties img {
background:url('/images/t4q/buttons/residenties.png');
width: 48px;
height: 48px;
}

.button_residenties:hover img {
background:url('/images/t4q/buttons/residenties_h.png');
}

.button_contact img {
background:url('/images/t4q/buttons/contact.png');
width: 48px;
height: 48px;
}

.button_contact:hover img {
background:url('/images/t4q/buttons/contact_h.png');
}

/* responsive */
#mobile_select h2 {border:0; margin:-17px 0 0 0; padding:0; background:#ffffff;text-align:right}
#mobile_select h2 a {
display:inline-block;
font-size:0.8em;
padding:6px;
font-size:0.75em;
margin-right:5px;
}

@media only screen and (max-width: 480px) {

img {
max-width: 100%;
height: auto;
border: 0;
-ms-interpolation-mode: bicubic;
}

#fontsize{display:none}
#nav,#wrapper2,#wrapper,.cols-3 .column-1,.cols-3 .column-2,.cols-3 .column-3,#right,.box,#header form
{
float: none;
width: 100%
}
#header {padding-top:3em}
#header form {margin:0}
.logoheader { background: url(../images/personal/header_128.png);
min-height: 128px;
color: #FFFFFF;
margin:0}
.box {
border-left: 0 !important;
border-bottom: solid 1px #ddd;
}
#line {
text-align: center;
top: 0;
right: auto;
max-width: 100% ;
min-width: 100%;
}
#header form input {
float: none; margin-bottom:4px
}
#menuwrapper { margin-top:10px; }
#header ul.menu {position:relative; top:0;left:20px; right:20px; margin:0px 20px; width:90%; border-radius:4px; background-color: #27859c;}
#header ul.menu li:first-child a {border-radius: 4px 4px 0 0}
#header ul.menu li:last-child a {border-radius:0 0 4px 4px }
#header ul.menu li a:link,
#header ul.menu li a:visited {
display: block;
padding: 6px 10px;
border-bottom: solid 1px #ccc
}
}

@media only screen and (min-width: 600px) {
}

@media only screen and (min-width: 768px) {
}

@media only screen and (min-width: 992px) {
}

@media only screen and (min-width: 1382px) { /* Styles */
}

@media only screen and (-webkit-min-device-pixel-ratio: 1.5) , only screen and
(min--moz-device-pixel-ratio: 1.5) , only screen and
(min-device-pixel-ratio: 1.5) { /* Styles */
}

Can you make a screenshot in the I.E. 9 Browser and show me what the problem is?

I've made 3 screenshots.
Normal:

IE9 with compatibility mode

IE9 without compatibility mode

In the last picture you can see that there is a fine line under the menu. ie9 with compatibility mode is very different...

Okay I did some research on this problem.
I found different plugins who can handle the problems with different IE's.
You can download a great plugin for Joomla which helps you solve problems in different browsers, you can take a look here

Let me know if this works for you.

Thank you very much!! I will try it out and let you know what the results are.

Yeah great, let me know if this worked out.
Of zal ik zeggen, laat maar weten of het gelukt is

I guess you are Dutch, as your site is completely in Dutch.
Cheers, Henk

Compatibility should never be triggered for a new page. Its purpose was to make MSFT's newer IEs act like their stupid predecessors. Thus, if you're browsing an old page that hasn't been brought into this century's coding practices, you make your IE stupid for viewing purposes.

cheers,

gary

Ohja, in het nederlands is het iets makkelijker!
Ik hoopte op een oplossing met de extensie, maar het is voor Joomla 2.5 en ik werk met 3.2... Hij wil het niet installeren...

Okay remember when I asked you to open up your html file and add those lines inside to make it work with IE9 etc?

<!--[if lt IE 9]>
    <script src="html5shiv.js"></script>
<![endif]-->

If this shiv file is not working for you, then trying adding this code between your "head" tags inside this file:
<meta http-equiv="X-UA-Compatible" content="IE=7" />

Let us know if this helped you.

I've put it in the index.php file but no results... I will paste the HTML-codes (before my changes) here as well, so you can see it.
I can see multiple PHP-files in the folder: component.php, error.php and jsstrings.php.

/**
 * @package     Joomla.Site
 * @subpackage  Templates.beez3
 * @copyright   Copyright (C) 2005 - 2013 Open Source Matters, Inc. All rights reserved.
 * @license     GNU General Public License version 2 or later; see LICENSE.txt
 */
 
// No direct access.
defined('_JEXEC') or die;
 
JLoader::import('joomla.filesystem.file');
 
 
// Check modules
$showRightColumn	= ($this->countModules('position-3') or $this->countModules('position-6') or $this->countModules('position-8'));
$showbottom			= ($this->countModules('position-9') or $this->countModules('position-10') or $this->countModules('position-11'));
$showleft			= ($this->countModules('position-4') or $this->countModules('position-7') or $this->countModules('position-5'));
 
if ($showRightColumn == 0 and $showleft == 0)
{
	$showno = 0;
}
 
JHtml::_('behavior.framework', true);
 
// Get params
$color				= $this->params->get('templatecolor');
$logo				= $this->params->get('logo');
$navposition		= $this->params->get('navposition');
$headerImage		= $this->params->get('headerImage');
$app				= JFactory::getApplication();
$doc				= JFactory::getDocument();
$templateparams		= $app->getTemplate(true)->params;
$config = JFactory::getConfig();
 
$bootstrap = explode(',', $templateparams->get('bootstrap'));
$jinput = JFactory::getApplication()->input;
$option = $jinput->get('option', '', 'cmd');
 
if (in_array($option, $bootstrap))
{
	// Load optional rtl Bootstrap css and Bootstrap bugfixes
	JHtml::_('bootstrap.loadCss', true, $this->direction);
}
 
$doc->addStyleSheet(JUri::base() . 'templates/system/css/system.css');
$doc->addStyleSheet(JUri::base() . 'templates/' . $this->template . '/css/position.css', $type = 'text/css', $media = 'screen,projection');
$doc->addStyleSheet(JUri::base() . 'templates/' . $this->template . '/css/layout.css', $type = 'text/css', $media = 'screen,projection');
$doc->addStyleSheet(JUri::base() . 'templates/' . $this->template . '/css/print.css', $type = 'text/css', $media = 'print');
$doc->addStyleSheet(JUri::base() . 'templates/' . $this->template . '/css/general.css', $type = 'text/css', $media = 'screen,projection');
$doc->addStyleSheet(JUri::base() . 'templates/' . $this->template . '/css/' . htmlspecialchars($color) . '.css', $type = 'text/css', $media = 'screen,projection');
 
if ($this->direction == 'rtl')
{
	$doc->addStyleSheet($this->baseurl . '/templates/' . $this->template . '/css/template_rtl.css');
	if (file_exists(JPATH_SITE . '/templates/' . $this->template . '/css/' . $color . '_rtl.css'))
	{
		$doc->addStyleSheet($this->baseurl . '/templates/' . $this->template . '/css/' . htmlspecialchars($color) . '_rtl.css');
	}
}
 
JHtml::_('bootstrap.framework');
$doc->addScript($this->baseurl . '/templates/' . $this->template . '/javascript/md_stylechanger.js', 'text/javascript');
$doc->addScript($this->baseurl . '/templates/' . $this->template . '/javascript/hide.js', 'text/javascript');
$doc->addScript($this->baseurl . '/templates/' . $this->template . '/javascript/respond.src.js', 'text/javascript');
$doc->addScript($this->baseurl . '/templates/' . $this->template . '/javascript/template.js', 'text/javascript');

 require __DIR__ . '/jsstrings.php';

 if ($color == 'image'):

.logoheader {
background:url(' echo $this->baseurl . '/' . htmlspecialchars($headerImage); ') no-repeat right;
}
body {
background:  echo $templateparams->get('backgroundcolor'); ;
}

 endif;

 endif;

Okay, do you by any chance have a functions.php?
You will have header.php, footer.php etc as well if I am not mistaking.

But open your functions.php (if you have this file else open header.php)
And add the following code at the top, you don't need to download the html5.js file as this is already online.

// add ie conditional html5 shim to header
function add_ie_html5_shim () {
    echo '<!--[if lt IE 9]>';
    echo '<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>';
    echo '<![endif]-->';
}
add_action('wp_head', 'add_ie_html5_shim');

You have to read correctly as this code was ment for a wordpress theme, as you can see in the "wp_head" name.
If you are using this code in your functions.php then change the wp_head to the name of your header.php
If you are going to insert this code into your header.php then insert the following code instead of the above mentioned code:

// add ie conditional html5 shim to header
function add_ie_html5_shim () {
    echo '<!--[if lt IE 9]>';
    echo '<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>';
    echo '<![endif]-->';
}
add_action('add_ie_html5_shim');

As you can see I deleted the wp_head code and only left the "add_ie_html5_shim" because it is already in the header.

The shim is to enable HTML5 elements to be able to be styled through CSS in Internet Explorer versions less than 9.

Let me know if this works, I want this problem solved

I am superhappy that you want this problem solved! So do I!! So thank you so much for helping me!

I don't have thpse phpfiles... I copied the names of the php-files I see in this post. The index.php is the one I've pasted in my previous post. I indicated the folders.

• Css folder
• Html folder
o com_contact folder
 categories folder
 default.php
 default_items.php
 category folder
 default.php
 default_children.php
 default_items.php
 contact folder
 default.php
 default_address.php
 default_articles.php
 default_form.php
 default_links.php
 default_profile.php
 encyclopedia.php
o com_content folder
 archive folder
 default.php
 default_items.php
 article folder
 default.php
 default_links.php
 categories folder
 default.php
 default_items.php
 category folder
 blog.php
 blog_children.php
 blog_item.php
 blog_links.php
 default.php
 default_articles.php
 default_children.php
 featured folder
 default.php
 default_item.php
 default_links.php
 form folder
 edit.php
o com_newsfeeds folder
 categories folder
 default.php
 default_items.php
 category folder
 default.php
 default_children.php
 default_items.php
o com_weblinks folder
 categories folder
 default.php
 default_items.php
 category folder
 default.php
 default_children.php
 default_items.php
 form folder
 edit.php
o mod_banners folder
 default.php
o mod_breadcrumbs folder
 default.php
o mod_login folder
 default.php
o message.php
o modules.php
• images folder
• javascript folder
• language folder
• component.php
• error.php
• index.php
• jsstrings.php
• templateDetails.xml
• template_preview.png
• template_thumbnail.png

I wished I knew which are the 'right' php-files. It's difficult because I didn't write them. Also, the person who wrote them is very ill...

I think, but this is just guessing you should paste the above mentioned code in one of the default.php files inside "com_content folder".

It seems your background (shorthand code) in css doesn't work for IE9.
For this to work you need to change it to background-image: etc.

It seems fixed on my side