Icon in menu doesnt line up with text

[Anonymous]

Hi there

I have a problem with getting an image icon to line up with the text in the menu.

My client wants the home button replacing with an icon so i removed the link and added a custom menu item by using the following code in the custom code 1 box:

[code:3bevznj3]<a href="http://www.justdoproperty.co.uk/"><img border="0" src="http://www.justdoproperty.co.uk/img/icons/home.png" alt="Home" /></a>[/code:3bevznj3]

Now the rest of the menu is generated by the pages but when I look at the menu the text links are appearing beneath the home icon. You can see it here:

http://www.justdoproperty.co.uk/

If i add float:left; to the code below it lines up fine but the dropdown menu’s appear over the top of the original menu rather than below it then:

#suckerfishnav a {
[b:3bevznj3]    float:left;[/b:3bevznj3]
    display:block;
    color:#ffffff;
    text-decoration:none;
    padding:5px 14px;
    }

Can you tell me what i am doing wrong please?

Here is the full CSS code:

#suckerfishnav {
    background:#8cd20b repeat-x;
    font-size:13px;
    font-family:verdana,sans-serif;
    font-weight:bold;
    width:100%;
    }
#suckerfishnav, #suckerfishnav ul {
    float:left;
    list-style:none;
    line-height:16px;
    padding:0;
    border:1px solid #aaa;
    margin:9px;
    width:1005px;
    }
#suckerfishnav a {
    display:block;
    color:#ffffff;
    text-decoration:none;
    padding:5px 14px;
    }
#suckerfishnav li {
    float:left;
    padding:0;
    }
#suckerfishnav ul {
    position:absolute;
    left:-999em;
    height:auto;
    width:201px;
    font-weight:normal;
    margin:0;
    line-height:1;
    border:0;
    border-top:1px solid #666666;
    }
#suckerfishnav li li {
    width:199px;
    border-bottom:1px solid #666666;
    border-left:1px solid #666666;
    border-right:1px solid #666666;
    font-weight:bold;
    font-family:verdana,sans-serif;
    }
#suckerfishnav li li a {
    padding:4px 10px;
    width:180px;
    font-size:12px;
    color:#ffffff;
    }
#suckerfishnav li ul ul {
    margin:-21px 0 0 100px;
    }
#suckerfishnav li li:hover {
    background:#b6d382;
    }
#suckerfishnav li ul li:hover a, #suckerfishnav li ul li li:hover a, #suckerfishnav li ul li li li:hover a, #suckerfishnav li ul li li li:hover a {
    color:#026338;
    }
#suckerfishnav li:hover a, #suckerfishnav li.sfhover a {
    color:#026338;
    }
#suckerfishnav li:hover li a, #suckerfishnav li li:hover li a, #suckerfishnav li li li:hover li a, #suckerfishnav li li li li:hover li a {
    color:#ffffff;
    }
#suckerfishnav li:hover ul ul, #suckerfishnav li:hover ul ul ul, #suckerfishnav li:hover ul ul ul ul, #suckerfishnav li.sfhover ul ul, #suckerfishnav li.sfhover ul ul ul, #suckerfishnav li.sfhover ul ul ul ul {
    left:-999em;
    }
#suckerfishnav li:hover ul, #suckerfishnav li li:hover ul, #suckerfishnav li li li:hover ul, #suckerfishnav li li li li:hover ul, #suckerfishnav li.sfhover ul, #suckerfishnav li li.sfhover ul, #suckerfishnav li li li.sfhover ul, #suckerfishnav li li li li.sfhover ul {
    left:auto;
    background:#8cd20b;
    }
#suckerfishnav li:hover, #suckerfishnav li.sfhover {
    background:#b6d382;
    }

[imported_Ryan]

Sorry, but we don’t provide free support for customised menus. We only offer support for support for customised menus to our [iurl=https://geek.hellyer.kiwi/services/premium-support/]Premium Support members[/iurl].

[Author]

Posts