Menu Issue

I have an open thread that was originally answerd but wasn't sure if I just asked on it it would get seen so i've started a new one!



I was given this code to remove the gaps between the menu items (above image):

Code:

 #menu .ddsmoothmenu li {
display: table-cell;
}

which worked ok in all browsers until I added submenus, now Firefox & Opera are having issues

In Firefox it's causing the menu to show up to far to the left



and in opera to near to the top



So is there another way to remove the gaps between the menu items or is there a simple fix for the browser issues please

 

Hello,

Could you please share us your website link so that we can check your issue.

 

http://currant.i1024.co.uk/

Code:

#menu .ddsmoothmenu li {
display: table-cell;
}

if I remove the above css the menu behaves normaly but there are gaps which i need to remove!

 

Hello,

For Firefox browser

Paste this code in Custom CSS
Appearance > Theme Option > Styling Option > Custom CSS

Code:

@-moz-document url-prefix() { 
#menu .ddsmoothmenu li ul{
margin-left:49px;
}
} 

Adjust its value as per your requirements.

For more info, please check the link given below
http://www.conditional-css.com/usage



Thanks & Regards
Gourav Shrivastava

 

Thanks Gourav but that works ok for the first dropdown menu but now other drop down menus are added its not a robust fix.

Is there no other way to remove the gaps rather than the 'table-cell'

 

Unlikely but should anyone else be interested in a solution to this problem i used the following css to resolve my issue

Code:

#menu .ddsmoothmenu li {
    display: table-cell;
}
 
/* Firefox Menu Fix */
@-moz-document url-prefix() {
#menu .ddsmoothmenu li {
display: inline-block;
margin-left: -2px;
margin-right: -2px;
}
}