#templatemo_menu li a:hover, #templatemo_menu li .current { position: relative; color: #ffffff; background: url('../images/templatemo_menu_hover_right.jpg') top right no-repeat; }
#templatemo_menu li a:hover, #templatemo_menu li .current { position: relative; color: #ffffff; background: url('../images/templatemo_menu_hover_right.jpg') top right no-repeat; }
two headers showing in Internet explorer
I have a site: www.antiekbrocante.nl
In firefox and Chrome the site will display correct. But in Internet explorer 9 you will see 2 headers.
This is my css file:
[css]
[/css]
My question is how to remove the extra header in IE 9?
THX
Its an IE bug not recognising the no-repeat. I would try and do things expliclty like:
background-image url('someimage')
background-repeat: no-repeat;
like that and not in-line. Hope this helps. :)
Oke, thx.
But this is the header image:
[css]
#templatemo_banner {
width: 960px;
height: 149px;
margin: 0 auto;
background: url(../images/header7.png) no-repeat;
}
[/css]
And still only in IE it repeats. Where I have to change the CSS?
Just noticed something :)
You dont have any quotes in your url(), which a strict browser like ie would pick up on
try changeing all your:
background:url(../images/header7.png)no-repeat;
to
background-image url(background: url('../images/header7.png') no-repeat;
(I have put ' ' inside of the ()
You are also getting runtime errors when you hit the site at the moment :)
What do you mean with errors?
If you visit: http://antiekbrocante.nl/?
But sometimes it takes long time to load a page - 3 seconds, 4 seconds. Do you have any suggestions? Because I put in Macros the time to 60 secons.
THX
Strange,
I put alle the image between singe brackets:
[css]
body {
margin: 0;
padding: 0;
line-height: 1.5em;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #070707;
/*width: 50px;*/
background: #250d0b url('../images/templatemo_bg.jpg') no-repeat;
}
a:link, a:visited { color: #fcdd31; text-decoration: underline; font-weight: normal; }
a:active, a:hover { color: #fcdd31; text-decoration: none; }
p {
margin: 0px;
padding: 0px;
}
img {
margin: 0 0 15px 0;
padding: 0px;
border: 3px solid #cccccc;
}
.cleaner { clear: both; width: 100%; height: 0px; font-size: 0px; }
.margin_bottom_10 { clear: both; width: 100%; height: 10px; font-size: 1px; }
.margin_bottom_15 { clear: both; width: 100%; height: 15px; font-size: 1px; }
.margin_bottom_20 { clear: both; width: 100%; height: 20px; font-size: 1px; }
.margin_bottom_30 { clear: both; width: 100%; height: 30px; font-size: 1px; }
.margin_bottom_40 { clear: both; width: 100%; height: 40px; font-size: 1px; }
.margin_bottom_50 { clear: both; width: 100%; height: 50px; font-size: 1px; }
.margin_bottom_60 { clear: both; width: 100%; height: 60px; font-size: 1px; }
.margin_right_40 { margin-right: 40px; }
.margin_right_60 { margin-right: 60px; }
.h_divider { background: url('../images/templatemo_horizontal_divider.jpg') bottom repeat-x; }
.vl_divider
{
background: url('../images/templatemo_vertical_divider.jpg') left repeat-y;
Top: 20px;
}
.vr_divider { background: url('../images/templatemo_vertical_divider.jpg') right repeat-y; }
.fl { float: left; }
.fr { float: right }
.header_01 {
padding: 15 0 10px 0;
margin: 0 0 0px 0;
font-size: 16px;
color: #fbbc53;
font-weight: bold;
right: 20px;
}
.header_02 a {
padding: 0 0 5px 0;
font-size: 12px;
font-weight: bold;
color: #fbbc53;
}
.header_03 {
padding: 0;
font-size: 11px;
color: #ffffff;
font-weight: bold;
}
.rc_btn_01 a {
clear: both;
float: right;
display: block;
width: 100px;
height: 25px;
padding: 5px 0 0 0;
font-size: 12px;
text-align: center;
color: #ffffff;
font-weight: bold;
text-decoration: none;
border: none;
background: url('../images/templatemo_button_01.jpg') no-repeat;
}
#templatemo_container {
width: 957px;
margin: 0 auto;
padding: 0 3px;
background: url('../images/templatemo_container_bgc.png') repeat-y;
}
#templatemo_banner {
width: 960px;
height: 149px;
margin: 0 auto;
background: url('../images/header7.png') no-repeat;
}
#templatemo_banner #logo {
float: left;
margin: 10px 0 0 10px;
width: 200px;
height: 114px;
background: url('../images/') no-repeat;
}
#search_section {
float: right;
margin: 100px 20px 0 0;
}
#search_section form {
float: right;
margin: 0px;
padding: 0px;
}
#searchfield {
height: 16px;
width: 180px;
padding: 5px;
margin: 0px;
color: #ffffff;
font-size: 12px;
font-variant: normal;
line-height: normal;
background: #af1313;
border: 1px solid #000000;
}
#searchbutton {
height: 29px;
margin: 0px;
padding: 4px 6px 6px 6px;
cursor: pointer;
font-size: 12px;
text-align: center;
vertical-align: bottom;
white-space: pre;
color: #ffffff;
background: none;
border: 1px solid #000000;
}
/* menu */
#templatemo_menu {
/*clear:both;*/
width: 960px;
height: 42px;
background: url('../images/templatemo_menu_bg.jpg') repeat-x;
}
#templatemo_menu ul {
float: left;
margin: 0px;
padding: 0 0 0 20px;
list-style: none;
}
#templatemo_menu ul li {
margin: 0px;
padding: 0px;
display: inline;
}
#templatemo_menu ul li a {
position: relative;
float: left;
display: inline-block;
height: 30px;
width: 60px;
margin-right: 10px;
text-align: center;
padding: 14px 0 0 0;
font-size: 11px;
font-weight: bold;
text-decoration: none;
color: #ffffff;
outline: none;
}
#templatemo_menu li a:hover, #templatemo_menu li .current {
position: relative;
color: #ffffff;
background: url('../images/templatemo_menu_hover_right.jpg') top right no-repeat;
}
#templatemo_menu li a:hover span, #templatemo_menu li .current span {
position: absolute;
display: inline-block;
width: 15px;
height: 42px;
top: 0;
left: 0;
background: url('../images/templatemo_menu_hover_left.jpg') no-repeat;
}
/* end of menu */
/* content */
#templatemo_content {
padding: 0 20px;
}
.column_w210 {
padding: 0 10px;
margin-top: 42px;
width: 900px; /* width 205 */
}
.column_w430 {
padding: 0 20px;
margin-top: 48px;
width: 700px; /* width 470 */
}
.column_w920 {
width: 880px;
padding: 0 20px;
}
.column_w190 {
width: 190px;
}
.column_w430 p {
text-align: justify;
margin-bottom: 15px;
}
.latest_news {
clear: both;
padding-bottom: 10px;
}
.category_list
{
padding: 0 15px;
margin-top: 10px;
width: 170px; /* width 470 */
right: 700px;
margin: 0 0 15px;
padding: 0 50px;
list-style: none;
}
.category_list li {
display: inline-block;
height: 20px;
padding: 6px 0 0 20px;
margin: 0 0 5px 0;
background: url('../images/templatemo_list_icon.jpg') top left no-repeat;
}
.category_list li a {
color: #cccccc;
text-decoration: none;
font-size: 13px;
font-weight: bold;
}
.category_list li a:hover {
color: #fcdd31;
}
#black-tl {
border: 1px solid #603;
float:none;
margin-left: 1px;
margin-top: 10px;
width: 650px;
position: relative;
overflow:hidden;
}
#black-bl {
padding: 10px 10px 10px 7px;
position: relative;
}
.black-box {
border: 2px solid #603;
float: left;
width: 400px;
margin-right:5px;
margin-left:0px;
}
.black-box2 {
border: 2px solid #603;
float: left;
width: 200px;
height:150px;
margin-right:5px;
margin-left:0px;
}
.black-box3 {
border: 2px solid #603;
float: left;
width: 440px;
margin-right:5px;
margin-left:0px;
}
/*For the space between de divs */
.spacer
{
height:4px;
float:none;
margin:0 0;
padding:0 0;
border:0;
}
/* END*/
.black-box h2 {
font-size: 13px;
font-weight: normal;
}
.black-box h2 em {
font-size: 22px;
font-family: serif;
}
.black-box .more {
color: red;
}
/* end of content */
/* footer */
#templatemo_footer {
clear: both;
width: 960px;
padding: 20px 0 20px 0;
text-align: center;
border-top: 1px solid #8b8a8b;
background: #343233 url('../images/templatemo_footer.jpg') no-repeat;
}
.footer_list {
margin: 0px;
padding: 0px;
list-style: none;
}
.footer_list li {
padding: 0 10px;
display: inline;
border-right: 1px solid #cccccc;
}
.footer_list li a {
color: #cccccc;
text-decoration: none;
}
.footer_list li a:hover {
color: #fcdd31;
}
.footer_list .last {
border-right: none;
}
/* end of footer */
[/css]
But still in IE double header
Nope that was not it. What you need to try is changing
background: url(../images/header7.png) no-repeat;
to
background-image:url('../images/header7.png')';
background-repear:no-repeat;
I have it now like this:
#templatemo_banner {
width: 960px;
height: 149px;
margin: 0 auto;
background-image: url('../images/header7.png');
background-repeat: no-repeat;
}
but sitll IE is showing duplicate header
Oke, my css looks now like this:
[css]
body {
margin: 0;
padding: 0;
line-height: 1.5em;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #070707;
/*width: 50px;*/
background: #250d0b url('../images/templatemo_bg.jpg') top repeat-x;
}
a:link, a:visited { color: #fcdd31; text-decoration: underline; font-weight: normal; }
a:active, a:hover { color: #fcdd31; text-decoration: none; }
p {
margin: 0px;
padding: 0px;
}
img {
margin: 0 0 15px 0;
padding: 0px;
border: 3px solid #cccccc;
}
.cleaner { clear: both; width: 100%; height: 0px; font-size: 0px; }
.margin_bottom_10 { clear: both; width: 100%; height: 10px; font-size: 1px; }
.margin_bottom_15 { clear: both; width: 100%; height: 15px; font-size: 1px; }
.margin_bottom_20 { clear: both; width: 100%; height: 20px; font-size: 1px; }
.margin_bottom_30 { clear: both; width: 100%; height: 30px; font-size: 1px; }
.margin_bottom_40 { clear: both; width: 100%; height: 40px; font-size: 1px; }
.margin_bottom_50 { clear: both; width: 100%; height: 50px; font-size: 1px; }
.margin_bottom_60 { clear: both; width: 100%; height: 60px; font-size: 1px; }
.margin_right_40 { margin-right: 40px; }
.margin_right_60 { margin-right: 60px; }
.h_divider { background: url('../images/templatemo_horizontal_divider.jpg') bottom repeat-x; }
.vl_divider
{
background: url('../images/templatemo_vertical_divider.jpg') left repeat-y;
Top: 20px;
}
.vr_divider { background: url('../images/templatemo_vertical_divider.jpg') right repeat-y; }
.fl { float: left; }
.fr { float: right }
.header_01 {
padding: 15 0 10px 0;
margin: 0 0 0px 0;
font-size: 16px;
color: #fbbc53;
font-weight: bold;
right: 20px;
}
.header_02 a {
padding: 0 0 5px 0;
font-size: 12px;
font-weight: bold;
color: #fbbc53;
}
.header_03 {
padding: 0;
font-size: 11px;
color: #ffffff;
font-weight: bold;
}
.rc_btn_01 a {
clear: both;
float: right;
display: block;
width: 100px;
height: 25px;
padding: 5px 0 0 0;
font-size: 12px;
text-align: center;
color: #ffffff;
font-weight: bold;
text-decoration: none;
border: none;
background: url('../images/templatemo_button_01.jpg') no-repeat;
}
#templatemo_container {
width: 957px;
margin: 0 auto;
padding: 0 3px;
background: url('../images/templatemo_container_bgc.png') repeat-y;
}
#templatemo_banner {
width: 960px;
height: 149px;
margin: 0 auto;
background-image: url('../images/header7.png');
background-repeat: no-repeat;
}
#templatemo_banner #logo {
float: left;
margin: 10px 0 0 10px;
width: 200px;
height: 114px;
background: url('../images/') no-repeat;
}
#search_section {
float: right;
margin: 100px 20px 0 0;
}
#search_section form {
float: right;
margin: 0px;
padding: 0px;
}
#searchfield {
height: 16px;
width: 180px;
padding: 5px;
margin: 0px;
color: #ffffff;
font-size: 12px;
font-variant: normal;
line-height: normal;
background: #af1313;
border: 1px solid #000000;
}
#searchbutton {
height: 29px;
margin: 0px;
padding: 4px 6px 6px 6px;
cursor: pointer;
font-size: 12px;
text-align: center;
vertical-align: bottom;
white-space: pre;
color: #ffffff;
background: none;
border: 1px solid #000000;
}
/* menu */
#templatemo_menu {
/*clear:both;*/
width: 960px;
height: 42px;
background: url('../images/templatemo_menu_bg.jpg') repeat-x;
}
#templatemo_menu ul {
float: left;
margin: 0px;
padding: 0 0 0 20px;
list-style: none;
}
#templatemo_menu ul li {
margin: 0px;
padding: 0px;
display: inline;
}
#templatemo_menu ul li a {
position: relative;
float: left;
display: inline-block;
height: 30px;
width: 60px;
margin-right: 10px;
text-align: center;
padding: 14px 0 0 0;
font-size: 11px;
font-weight: bold;
text-decoration: none;
color: #ffffff;
outline: none;
}
#templatemo_menu li a:hover, #templatemo_menu li .current {
position: relative;
color: #ffffff;
background: url('../images/templatemo_menu_hover_right.jpg') top right no-repeat;
}
#templatemo_menu li a:hover span, #templatemo_menu li .current span {
position: absolute;
display: inline-block;
width: 15px;
height: 42px;
top: 0;
left: 0;
background: url('../images/templatemo_menu_hover_left.jpg') no-repeat;
}
/* end of menu */
/* content */
#templatemo_content {
padding: 0 20px;
}
.column_w210 {
padding: 0 10px;
margin-top: 42px;
width: 900px; /* width 205 */
}
.column_w430 {
padding: 0 20px;
margin-top: 48px;
width: 700px; /* width 470 */
}
.column_w920 {
width: 880px;
padding: 0 20px;
}
.column_w190 {
width: 190px;
}
.column_w430 p {
text-align: justify;
margin-bottom: 15px;
}
.latest_news {
clear: both;
padding-bottom: 10px;
}
.category_list
{
padding: 0 15px;
margin-top: 10px;
width: 170px; /* width 470 */
right: 700px;
margin: 0 0 15px;
padding: 0 50px;
list-style: none;
}
.category_list li {
display: inline-block;
height: 20px;
padding: 6px 0 0 20px;
margin: 0 0 5px 0;
background: url('../images/templatemo_list_icon.jpg') top left no-repeat;
}
.category_list li a {
color: #cccccc;
text-decoration: none;
font-size: 13px;
font-weight: bold;
}
.category_list li a:hover {
color: #fcdd31;
}
#black-tl {
border: 1px solid #603;
float:none;
margin-left: 1px;
margin-top: 10px;
width: 650px;
position: relative;
overflow:hidden;
}
#black-bl {
padding: 10px 10px 10px 7px;
position: relative;
}
.black-box {
border: 2px solid #603;
float: left;
width: 400px;
margin-right:5px;
margin-left:0px;
}
.black-box2 {
border: 2px solid #603;
float: left;
width: 200px;
height:150px;
margin-right:5px;
margin-left:0px;
}
.black-box3 {
border: 2px solid #603;
float: left;
width: 440px;
margin-right:5px;
margin-left:0px;
}
/*For the space between de divs */
.spacer
{
height:4px;
float:none;
margin:0 0;
padding:0 0;
border:0;
}
/* END*/
.black-box h2 {
font-size: 13px;
font-weight: normal;
}
.black-box h2 em {
font-size: 22px;
font-family: serif;
}
.black-box .more {
color: red;
}
/* end of content */
/* footer */
#templatemo_footer {
clear: both;
width: 960px;
padding: 20px 0 20px 0;
text-align: center;
border-top: 1px solid #8b8a8b;
background: #343233 url('../images/templatemo_footer.jpg') no-repeat;
}
.footer_list {
margin: 0px;
padding: 0px;
list-style: none;
}
.footer_list li {
padding: 0 10px;
display: inline;
border-right: 1px solid #cccccc;
}
.footer_list li a {
color: #cccccc;
text-decoration: none;
}
.footer_list li a:hover {
color: #fcdd31;
}
.footer_list .last {
border-right: none;
}
/* end of footer */
[/css]
I will have to do some digging. i think its either going to be the background-repeat :). IE can be tempermental! :) Charlie
Strange, now I see the correct layout in IE9. So without the extra header.
Do you see the correct layout in IE9?
Yep i can looks fine, so its a bug. You will have to do some digging, there will be a solution somewhere :)
is working on a reply...