I don’t see any duplication of menus or backgrounds — you DO have two menus, right? One on the grey at the very top and one on the red below the header section?
So not sure what you are referring to…what browser are you using? I’m on Firefox on a Mac.
Chrome and Firefox on Windows 7.
—
Yes, I do have two menus, one is for pages and other for categories. A grey one and a red one. But here is the thing, the red one, the background, for a lot of people is duplicated. You are the only one that report no duplication so far.
—
So any ideas?
Here is the TopNav CSS
/* -------------------[ Top Navigation ]------------------- */
#topnav { padding: 1px 0 0; margin: 0 auto; background:url(images/navbg.gif) top left; }
#topnav .limit {
width:990px;
height: 40px;
margin:0 auto;
padding:0;
}
#topnav ul {
width:750px;
height: 40px;
list-style: none;
padding: 0;
margin: 0 ;
float: left;
}
#topnav ul a, #topnav ul a:link, #topnav ul a:visited {
display: block;
text-decoration: none;
padding: 0 10px;
margin:0;
color:#fff;
}
#topnav ul a:hover, #topnav ul a:active {
background:#0A1F33;
}
#topnav li {
height:40px;
line-height:40px;
float: left;
padding: 0;
}
#topnav li ul {
z-index:9999;
position: absolute;
left: -999em;
height: auto;
width: 200px;
margin: 0;
padding:0;
border-top:1px solid #f5f5f5;
background:#0A1F33;
}
#topnav li li {
height:30px;
line-height:30px;
border-bottom:1px solid #000;
}
#topnav ul li ul a, #topnav ul li ul a:link, #topnav ul li ul a:visited {
width:180px;
}
#topnav ul li ul a:hover, #topnav ul li ul a:active {
background:#000;
}
#topnav li ul ul {
border:0;
margin: -30px 0 0 200px;
}
#topnav li:hover ul ul, #topnav li:hover ul ul ul, #topnav li.sfhover ul ul, #topnav li.sfhover ul ul ul {
left: -999em;
}
#topnav li:hover ul, #topnav li li:hover ul, #topnav li li li:hover ul, #topnav li.sfhover ul, #topnav li li.sfhover ul, #topnav li li li.sfhover ul {
left: auto;
}
#topnav li:hover, #topnav li.sfhover {
background:#0A1F33;
}
Here is how I solved it:
The problem wasn’t in the CSS. The banner in the header.php file didn’t have set a width or height.
<h1><a href="<?php bloginfo('url'); ?>/"><img src="<?php bloginfo('template_directory'); ?>/images/headlogo.png" width="1366" height="274" border="0" alt="Old Trafford Brasil" /></a></h1>
(I put the code between backticks but it didn’t worked)
I insert the proper size of the banner and it worked. Thanks anyway WPyogi for your help.
