[longisland6]

i've designed this page template, Member Portal - eLifeCare , ...
all is good, except that when i hover a second or third tier menu choice, it pushes down my footer about 5-10 pixels. this only occurs on ie for the pc (no mac testing yet, but it's vaild xhtml transitional). here's the css code below (for the ul li part of the stylesheet anyway...)... anyone have any ideas why this might be happening? thanks.


/*navigation lists............................................. .............................................*/








#navcontainer
{
margin: 0px 0px 4px 0px;
padding: 0px 0px 0px 0px;
height: 22px;
}


#navcontainer ul
{
border: 0;
margin: 0;
padding: 0;
list-style-type: none;
text-align: center;
}


#navcontainer ul li
{
display: list-item;
float: left;
text-align: center;
padding: 0;
margin: 0;
}


#navcontainer ul li a
{
background: #368ab7;
padding: 4px 10px 4px 10px;
margin: 0px 0px 0px 0px;
color: #ffffff;
text-decoration: none;
display: list-item;
text-align: center;
font: normal 10px/18px;
}


#navcontainer ul li a:hover
{
color: #ffffff;
background: #002e47;
}


#navcontainer a:active
{
color: #ffffff;
background: #9d9a3f;
}


#navcontainer li.activeTab a
{
color: #ffffff;
background: #9d9a3f;
}


#navcontainer ul li.dynamicArea1
{
float: right;
}


#navcontainer ul li.dynamicArea2
{
float: right;
color: #ffffff;
padding: 4px 10px 4px 10px;
margin: 0px 0px 0px 0px;
background: #008E55;
}












/*....................sub menu.....................*/









#navcontainer2
{
margin: 0px 0px 4px 0px;
padding: 0px 0px 0px 0px;
height: 22px;
}


#navcontainer2 ul
{
border: 0;
margin: 0;
padding: 0;
list-style-type: none;
text-align: center;
}


#navcontainer2 ul li
{
display: list-item;
float: left;
text-align: center;
padding: 0;
margin: 0;
}


#navcontainer2 ul li a
{
background: #3D9DD0;
border-style: solid;
border-color: c2c2c2;
border-width: 0px 0px 0px 0px;
padding: 4px 10px 4px 10px;
margin: 0px 0px 0px 0px;
color: #ffffff;
text-decoration: none;
display: list-item;
text-align: center;
font: normal 10px/18px;
}


#navcontainer2 ul li a:hover
{
color: #ffffff;
background: #002E47;
}


#navcontainer2 a:active
{
color: #ffffff;
background: #9D9A3F;
}


#navcontainer2 li.activeTab a
{
color: #ffffff;
background: #9d9a3f;
}


#navcontainer2 li#active a
{
color: #ffffff;
background: #9D9A3F;
}









/*....................sub sub menu.....................*/









#navcontainer3
{
margin: 0px 0px 4px 0px;
padding: 0px 0px 0px 0px;
height: 22px;
}

#navcontainer3 ul
{
border: 0;
margin: 0;
padding: 0;
list-style-type: none;
text-align: center;
}

#navcontainer3 ul li
{
display: list-item;
float: left;
text-align: center;
padding: 0;
margin: 0;
}

#navcontainer3 ul li a
{
background: #41A7DD;
border-style: solid;
border-color: c2c2c2;
border-width: 0px 0px 0px 0px;
padding: 4px 10px 4px 10px;
margin: 0px 0px 0px 0px;
color: #ffffff;
text-decoration: none;
display: list-item;
text-align: center;
font: normal 10px/18px;
}

#navcontainer3 ul li a:hover
{
color: #ffffff;
background: #002E47;
}


#navcontainer3 a:active
{
color: #ffffff;
background: #9D9A3F;
}


#navcontainer3 li.activeTab a
{
color: #ffffff;
background: #9d9a3f;
}


#navcontainer3 li#active a
{
color: #ffffff;
background: #9D9A3F;
}








/*content.......................................... ................................................*/

[pasky]

hi ... I was having the same problem just today ... I fixed one ul menu but the other one the only solution I had was to give the div that contains the list a fixed height by 1 to 2 px bigger than the text contained in it.

[pasky]

oh and another thing you might want to do is declare the font-family and font-size and font-color for all your a elements that might be a problem too.

[pgo]

If I'm guessing right, you might be able to solve this by declaring a set width for your <li>s and your <a>s. Worked for me when I had a similar problem.

Also, your <li>s and <a>s should probably be display: block; not list-item. And there's no need to give everything a text-align. Once will suffice - there's a reason they're called Cascading Style Sheets!

[longisland6]

i initially had them set as block, not list-item... same issue. and if i set a fixed width, what happens if i have text in there that exceeds this length? thanks...

and pasky, font styling is set further up the page in my body tag.

[longisland6]

anyone else have any more ideas on this?

[longisland6]

Originally Posted by longisland6

anyone else have any more ideas on this?

i fixed it by setting fixed widths, but to answer my own question, i set the width to be 100% and not fixed pixels.