16 replies [Last post]
kbae205
kbae205's picture
Offline
newbie
Last seen: 8 years 10 weeks ago
Timezone: GMT+1
Joined: 2014-03-05
Posts: 7
Points: 8

Yesterday I changed the layout of the template in CSS. I use firebug to know what the template will look like. Today I see that the template is changed in IE! In firefox it all looks ok.

Can anybody help me please? I'm panicking!

body {
	background: #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 */
}

//mod edit: When posting code, please use the code button or manually insert the bbcode tags [code] and [/code].

Fixed. ~gt

helldog2004
helldog2004's picture
Offline
Enthusiast
Netherlands
Last seen: 5 years 42 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2014-03-02
Posts: 205
Points: 239

Hi,Don't make two or more

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

Check Maximum Webdesign for your online solutions

helldog2004
helldog2004's picture
Offline
Enthusiast
Netherlands
Last seen: 5 years 42 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2014-03-02
Posts: 205
Points: 239

And also for background

And also for background colors use the command:

body {
background-color: #EDF5FC
}

instead of:

body {
background: #EDF5FC
}

Check Maximum Webdesign for your online solutions

kbae205
kbae205's picture
Offline
newbie
Last seen: 8 years 10 weeks ago
Timezone: GMT+1
Joined: 2014-03-05
Posts: 7
Points: 8

Thank you! I have made some

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 */
}

helldog2004
helldog2004's picture
Offline
Enthusiast
Netherlands
Last seen: 5 years 42 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2014-03-02
Posts: 205
Points: 239

Ah you use wordpress, well

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

Check Maximum Webdesign for your online solutions

kbae205
kbae205's picture
Offline
newbie
Last seen: 8 years 10 weeks ago
Timezone: GMT+1
Joined: 2014-03-05
Posts: 7
Points: 8

I've made 3

I've made 3 screenshots.
Normal:

Firefox en normaal.PNG

IE9 with compatibility mode
IE9 met comp.PNG

IE9 without compatibility mode IE9 zonder comp.PNG

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

helldog2004
helldog2004's picture
Offline
Enthusiast
Netherlands
Last seen: 5 years 42 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2014-03-02
Posts: 205
Points: 239

Okay I did some research on

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.

Check Maximum Webdesign for your online solutions

kbae205
kbae205's picture
Offline
newbie
Last seen: 8 years 10 weeks ago
Timezone: GMT+1
Joined: 2014-03-05
Posts: 7
Points: 8

Thank you very much!! I will

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

helldog2004
helldog2004's picture
Offline
Enthusiast
Netherlands
Last seen: 5 years 42 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2014-03-02
Posts: 205
Points: 239

Yeah great, let me know if

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

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

Check Maximum Webdesign for your online solutions

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 12 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Re compatibility mode

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

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

kbae205
kbae205's picture
Offline
newbie
Last seen: 8 years 10 weeks ago
Timezone: GMT+1
Joined: 2014-03-05
Posts: 7
Points: 8

Ohja, in het nederlands is

Ohja, in het nederlands is het iets makkelijker!Smile
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...

helldog2004
helldog2004's picture
Offline
Enthusiast
Netherlands
Last seen: 5 years 42 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2014-03-02
Posts: 205
Points: 239

Okay remember when I asked

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]-->

Well, in this case it needs to be placed inside your "index.php" file, it do should be between the "head" tags.
Once again, you can download the HTML5Shiv file here

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.

Check Maximum Webdesign for your online solutions

kbae205
kbae205's picture
Offline
newbie
Last seen: 8 years 10 weeks ago
Timezone: GMT+1
Joined: 2014-03-05
Posts: 7
Points: 8

I've put it in the index.php

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;

 if ($logo) :
 echo $this->baseurl / echo htmlspecialchars($logo); " alt=" echo htmlspecialchars($templateparams->get('sitetitle'));" />
 endif;
 if (!$logo AND $templateparams->get('sitetitle')) :
 echo htmlspecialchars($templateparams->get('sitetitle'));
 elseif (!$logo AND $config->get('sitename')) :
 echo htmlspecialchars($config->get('sitename'));
 endif;

 echo htmlspecialchars($templateparams->get('sitedescription'));

 echo JText::_('TPL_BEEZ3_NAV_VIEW_SEARCH');
 echo JText::_('TPL_BEEZ3_NAVIGATION');

 echo JText::_('TPL_BEEZ3_SEARCH');

 echo $showRightColumn ? 'contentarea2' : 'contentarea'; ">

 if ($navposition == 'left' and $showleft) :

 endif;

 echo $showRightColumn ? 'wrapper' : 'wrapper2'; " if echo class=""shownocolumns"';}[/geshifilter-questionmarkphp]">

 if ($this->countModules('position-12')) :

 endif;

 if ($showRightColumn) :

 echo JText::_('TPL_BEEZ3_ADDITIONAL_INFORMATION');

 endif;

 if ($navposition == 'center' and $showleft) :

 endif;

 endif;

helldog2004
helldog2004's picture
Offline
Enthusiast
Netherlands
Last seen: 5 years 42 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2014-03-02
Posts: 205
Points: 239

Okay, do you by any chance

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 Tongue

Check Maximum Webdesign for your online solutions

kbae205
kbae205's picture
Offline
newbie
Last seen: 8 years 10 weeks ago
Timezone: GMT+1
Joined: 2014-03-05
Posts: 7
Points: 8

I am superhappy that you want

I am superhappy that you want this problem solved! So do I!!Smile 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...

helldog2004
helldog2004's picture
Offline
Enthusiast
Netherlands
Last seen: 5 years 42 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2014-03-02
Posts: 205
Points: 239

I think, but this is just

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".

Check Maximum Webdesign for your online solutions

helldog2004
helldog2004's picture
Offline
Enthusiast
Netherlands
Last seen: 5 years 42 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2014-03-02
Posts: 205
Points: 239

It seems your background

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 Smile

Check Maximum Webdesign for your online solutions