menu background image is offset to the top

[graese]

I’ve tried a few ways to fix this and am out of ideas. http://www.graesen.com to see the issue. Just in case I do something to change it further (better or worse), the background image for the menu sits at the top of the entire site while the rest of the menu sits where it should be (bottom of header).

I’ve played with the #pixopoint_menu1 CSS code for the bg image and trying to enter a position other than 50% 0 just hides the bg image and keeps the bg color in the top position. (I am using a bg color to help trouble shoot positioning and what is happening. All I can think of to do is remove the menu background and leave it transparent and deal with the ugly gap in the menu.

The CSS is:

#pixopoint_menu1 {
width:100%;
height:35px;
background:#333333 url("../images/dazzle_black.png");
background-position:50% 0;
margin:0;}
#pixopoint_menu1 ul {
width:100%;
border:none;
background:none;
margin:0;
padding:0;
list-style:none;
}
#pixopoint_menu1 li {
border:none;
background:none;
background:#333333 url("../images/dazzle_black.png");
color:#FFFFFF;
line-height:35px;
z-index:100;
letter-spacing:0px;
background:;
font-weight:bold;
font-size:12px;
padding:0;
margin:0 0px;
;float:left;
font-family:tahoma,sans-serif;
position:relative;
}
#pixopoint_menu1 li:hover,#pixopoint_menu1 li.sfhover {
background:#666666 url("../images/dazzle_black.png");
background-position:0 60px;
}
#pixopoint_menu1 li a {
border:none;
background:none;
text-decoration:none;
display:block;
padding:0 10px;
color:#FFFFFF;
}
#pixopoint_menu1 li a:hover {
border:none;
background:none;
text-decoration:none;
color:#FFFFFF;
background-position:100% -120px;
}
#pixopoint_menu1 ul ul {
position:absolute;
left:-999em;
top:35px;
width:120px;
}
#pixopoint_menu1 li:hover ul,#pixopoint_menu1 li.sfhover ul {
left:auto;
}
#pixopoint_menu1 ul ul li a {
padding:4px 10px;
text-transform:normal;
font-variant:normal;
}
#pixopoint_menu1 ul ul li {
letter-spacing:0px;
color:#444444;
z-index:100;
width:120px;
font-family:helvetica,arial,sans-serif;
font-size:11px;
font-weight:normal;
font-style:normal;
background:#FFFFFF;
border-bottom:1px solid #cccccc;
border-left:1px solid #cccccc;
border-right:1px solid #cccccc;
margin:0;
}
#pixopoint_menu1 ul ul li a {
line-height:22px;
color:#444444;
text-decoration:none;
}
#pixopoint_menu1 ul ul li:hover a,#pixopoint_menu1 ul ul li.sfhover a {
color:#FFFFFF;
text-decoration:none;
}
#pixopoint_menu1 ul ul li:hover li a,#pixopoint_menu1 ul ul li.sfhover li a {
color:#444444;
}
#pixopoint_menu1 ul ul li:hover li a:hover,#pixopoint_menu1 ul ul li.sfhover li a:hover {
color:#FFFFFF;
}
#pixopoint_menu1 ul ul li:hover,#pixopoint_menu1 ul ul li.sfhover {
color:#FFFFFF;
background:#333333;
}
#pixopoint_menu1 ul ul ul li {
font-size:1em;}#pixopoint_menu1 ul ul ul, #pixopoint_menu1 ul ul ul ul {
position:absolute;
margin-left:-999em;
top:0;
width:120px;
}
#pixopoint_menu1 li li:hover ul,#pixopoint_menu1 li li.sfhover ul,#pixopoint_menu1 li li li:hover ul,#pixopoint_menu1 li li li.sfhover ul {
margin-left:120px;
}
#pixopoint_menu1 ul ul li:hover li a,#pixopoint_menu1 ul ul li.sfhover li a {
text-decoration:none;
}
#pixopoint_menu1 ul ul li li:hover a,#pixopoint_menu1 ul ul li li.sfhover a {
color:#FFFFFF;
text-decoration:none;
}
#pixopoint_menu1 li.pixo_search:hover {
background:#666666 url("../images/dazzle_black.png");
}
#pixopoint_menu1 li.pixo_search form {
margin:0;
padding:0;
}
#pixopoint_menu1 li.pixo_search input {
font-family:tahoma,sans-serif;}
#pixopoint_menu1 li.pixo_search input.pixo_inputsearch {
width:100px;
}
#pixopoint_menu1 li.pixo_right {
float:right;
}

[graese]

So I worked around it, but is this the best way to make it work right? I changed the CSS of the #pixopoint_menu1 ul to have an absolute position and top position to be 0, then I added pixopoint_menu1_wrapper to the css and gave that a relative position and entered a top value to the accurate position it needed to be. Could this render improperly on other browsers? I havent tested it outside of FireFox yet.

[imported_Ryan]

Hi,
No, I think that should render fine across a range of browsers. An alternative would be to make #pixopoint_menu1 relative positioned instead of the #pixopoint_menu1_wrapper.

[graese]

Ok, so I thought it worked (well, it was fixed in firefox) but I don’t normally use IE and never got around to checking it there. It doesn’t appear to be working for IE now. I tried your alternative suggestion to make the menu relative and that didn’t work. I’m looking into possibly using conditional statements to load different sets of css per browser, but I don’t know how to set this up through this plugin. Any other ideas or maybe some help in setting up different css for different browsers?

[graese]

Correction – It seems to only not work on the computer i was on earlier for some odd reason. IE works fine on my home pc and they’re the same version. No idea what the issue is. but just in case, i do decide to do styles based on browsers, any info where to insert the condition code would help.

[imported_Ryan]

[quote:1k3rwpja]but just in case, i do decide to do styles based on browsers, any info where to insert the condition code would help.[/quote:1k3rwpja]

Anywhere, as long as the code validates. Placing a <link> tag inside the <head> inside IE conditional comments is generally the recommended approach though.

However, it’s generally best to fix whatever glitch is causing the problem rather than hacking around it with conditionals, less problems that way.

[Author]

Posts