Menu alignment & IE7-related problem

[adiq]

Hi Ryan,

1st of all, would like to thank you for this great program.

FYI, I’m totally new in this and I just hope my inquiry won’t bore you. Okay, let’s cut to the chase. I’m currently building my site (balutcandy.com) using Damai theme from eches and am facing two problems:

1. How do I adjust the alignment of the menu bar to look exactly like the one in the original theme? (Note: I use Mozilla FF as my primary browser). Here’s the code from the style.css:

[code:29ldswo4]/*+++++++++++++++++++++++++++++ Top Navigation +++++++++++++++++++++++++++++++*/

#header_nav {
    width:100%;
    background:url(images/menu.jpg) repeat-x;
    height:43px;
    margin:0 auto;
}

#nav {
    width:995px; 
    margin:0 auto; padding:0;
    overflow:hidden;
    height:31px;
}

#menu {
    float:left;
    margin:5px;
    padding:3px;
    width:730px;
}

#menu li {
    display: inline;
    list-style: none;
    margin:0;
    padding:0;
}

#menu ul, #menu ol {
    display: inline;
    list-style: none;
    margin:0;
    padding:0 10px 0 0;
}

#menu a, #menu a:visited {
    color: #FFFFFF;
    font-weight: bold;
    margin:0;
    padding: 3px 10px 3px 10px;
    text-decoration: none;
}

#menu a:hover {
    background: #80b409;
    text-decoration: none;
    border:1px solid #fff;
}

And here’s my Suckerfish CSS:
#suckerfishnav {
background:#0 ;
font-size:12px;
font-family:verdana,sans-serif;
font-weight:bold
}

#suckerfishnav, #suckerfishnav ul {
float:left;
list-style:none;
line-height:20px;
padding:0;
border:0px solid #80b409;
margin:0 0 1px 0;
width:100%
}

#suckerfishnav a {
display:block;
color:#fff;
text-decoration:none;
padding:0px 10px
}

#suckerfishnav li {
float:left;
padding:0
}

#suckerfishnav li ul {
position:absolute;
left:-999em;
height:auto;
width:130px;
font-weight:normal;
margin:0;
line-height:1;
-moz-opacity:0.85;
opacity:0.85;
khtml-opacity:0.85
}

#suckerfishnav li li {
padding-right:1px;
width:130px;
border-bottom:1px solid #aaa
}

#suckerfishnav li li a {
padding:3px 10px
}

#suckerfishnav li ul li {
font-weight:normal;
font-family:verdana,sans-serif
}

#suckerfishnav li ul li a {
font-size:11px;
color:#fff
}

#suckerfishnav li:hover ul li a {
color:#fff
}

#suckerfishnav li ul ul {
margin:-17px 0 0 130px
}

#suckerfishnav li ul li:hover {
background:#80b409
}

#suckerfishnav li ul li:hover a {
color:#fff
}

#suckerfishnav li ul li:hover li a {
color:#fff
}

#suckerfishnav li ul li li:hover a {
color:#fff
}

#suckerfishnav li ul li ul li:hover ul li a {
color:#fff
}

#suckerfishnav li ul li ul li:hover ul li:hover a {
color:#fff
}

#suckerfishnav li:hover ul ul, #suckerfishnav li:hover ul ul ul, #suckerfishnav li.sfhover ul ul, #suckerfishnav li.sfhover ul ul ul {
left:-999em
}

#suckerfishnav li:hover ul, #suckerfishnav li li:hover ul, #suckerfishnav li li li:hover ul, #suckerfishnav li.sfhover ul, #suckerfishnav li li.sfhover ul, #suckerfishnav li li li.sfhover ul {
left:auto;
background:#80b409
}

#suckerfishnav li:hover, #suckerfishnav li.sfhover {
background:#80b409
}

#suckerfishnav li:hover a, #suckerfishnav li.sfhover a {
color:#fff
}[/code:29ldswo4]

2. In IE7, I also noticed that the position of the menu is not aligned. My understanding is that this could be IE problem like you pointed out and perhaps I need to integrate “Suckerfish Javascript for Internet Explorerâ€

[imported_Ryan]

Hi adiq,
No your problem won’t bore me! I’m busy right now though so will post back later on (maybe tomorrow) with a response.

[adiq]

Hi Ryan,

It’s okay. In the meantime I’m just gonna play around with other themes to see which one is less hassle.

Thanks again.

[imported_Ryan]

H adiq,
I took a look at your site, but can’t do much unless you show me exactly what your HTML looks like. I can’t track down any CSS problems without knowing how the HTML is formatted first. If you don’t want to leave the code on your site, just post back here with what the raw HTML looks like. Either that or sign up for the premium support[/url:3s910i83] option and I’ll do it all for you.

[Author]

Posts