Hey everyone!

I have the menu set at the top of my webpage with a flash animation under it in another module. However there is a gap between the menu and flash. How can I make this so there is no gap?

Thank you in advance!


PS> here is my menu css. (Incase anyone can see what I am doing wrong).

/*-- required & default rules --*/
.ux-menu-init-hidden {
visibility:hidden;
position:absolute;
}

.ux-menu-container {
position: relative;
}

.ux-menu-container .ux-menu a
{
padding: 40px 20px 20px 20px;
margin: 0px 0px 0px 0px;
bottom: 0px;
}

.ux-menu-container .ux-menu-sub LI A
{
color: #93117e;
background: url(images/menu-item-bg-submenu.png) repeat;
padding: 15px 20px;
top: -30px;
}

.ux-menu-sub LI a:focus,
.ux-menu-sub LI a:hover,
.ux-menu-sub LI a.ux-menu-link-hover {
background: url(images/menu-item-bg-over.png) repeat;
color: #ffffff;
outline: 0;
padding: 15px 20px;
margin-bottom: 0px;
margin: 0px;
}

.ux-menu,
.ux-menu ul {
list-style-image: none;
list-style-position: outside;
list-style-type: none;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
line-height: 1;
}

.ux-menu li {
position: relative;
float: left;
}

.ux-menu ul {
position: absolute;
top: 0;
left: 0;
}

.ext-border-box .ux-menu-ie-iframe,
.ext-ie7 .ux-menu-ie-iframe {
padding: 0;
margin: 0;
position: absolute;
top: 0;
left: 0;
display: none;
z-index: -1;
}

.ux-menu-vertical .ux-menu-item-main {
clear: left;
}

.ux-menu a {
display: block;
position: relative;
text-decoration: none;
color: #93117e;
background: none;
font-size: 12px;
line-height: 12px;
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
top: -14px;
}

.ux-menu a.ux-menu-link-last {
border-right: 0px solid #e3dad1;
}

ux.menu ul a {
width: 100%;
}

.ux-menu a:focus,
.ux-menu a:hover,
.ux-menu a.ux-menu-link-hover {
color: #ffffff;
background: url(images/menu-item-bg-over.png) repeat;
outline: 0;
}

.ux-menu-clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

.ux-menu a.ux-menu-link-parent {
padding-right: 24px;
min-width: 1px;
}

.ux-menu ul a,
.ux-menu.ux-menu-vertical a {
}

.ux-menu ul a.ux-menu-link-last,
.ux-menu.ux-menu-vertical a.ux-menu-link-last {
}

.ux-menu-container .ux-menu LI
{
margin: 0;
}

.ux-menu-arrow {
display: block;
width: 8px;
height: 6px;
right: 10px;
top: 25px;
position: absolute;
background: url(images/menu-arrow-down.png) no-repeat;
font-size: 0;
}

.ux-menu.ux-menu-vertical .ux-menu-arrow,
.ux-menu ul .ux-menu-arrow {
width: 6px;
height: 8px;
top: 30px;
background: url(images/menu-arrow-right.png) no-repeat;
}

.ext-border-box .ux-menu-arrow {
top: 30px;
}
.ext-border-box .ux-menu.ux-menu-vertical .ux-menu-arrow,
.ext-border-box .ux-menu ul .ux-menu-arrow {
top: 30px;
}

.ux-menu ul.ux-menu-hidden {
display: none;
}

.ux-menu a.current
{
background-image: url('images/menu-item-bg-current.png');
color: #ffffff;
border-color: #cbc0b7;
}

Hello,

Provide link to page, please, where we can see this issue. It can be conflict with site template styles and we need to page with the menu that we can investigate this issue.

Regards,
ARI Soft

Thank you for the reply.
In the time I've had another issue which I had asked in the forum regarding the menu as well. It views fine (except for the gap) in Firefox and Safari, however in Explorer on PC it trips out and the menu is raised out of position?

My address is www.outersquare.com.au/loveangels

Thank you very much again for your assistance.

Hello,

About gap issue, add the next CSS rule:



Regarding IE issue, it seems this problem with some site templates styles.

Regards,
ARI Soft

Thank you very much.

Is there a way I can get past this issue of IE?