ie6 and menu top level width RSS

• • Reply
  

  blinx

  0 Points

  6 Posts

  ie6 and menu top level width

  Mar 21, 2007 04:30 PM|LINK

  hi

  i do not set a width on

  .PrettyMenu .AspNet-Menu-Horizontal ul.AspNet-Menu li so the width of each top level menu item is the width of the text plus some padding, this is because my menu items are of quite different length and it looks far better like this. However in ie6 this cause each menu item to be the full width of the menu and they therefore stack on each other. I can set a conditional rule for ie6 and set a fixed width but as i stated this doesn't look great. Does anyone know a way to have the top level menu items width proprtional to the size of the text they contain ?

• • Reply
  

  bdemarzo

  Member

  435 Points

  168 Posts

  Re: ie6 and menu top level width

  Mar 22, 2007 02:41 AM|LINK

  Can you post your CSS file contents?
  
  - brian
  - blog: www.sidesofmarch.com
• • Reply
  

  blinx

  0 Points

  6 Posts

  Re: ie6 and menu top level width

  Mar 22, 2007 10:06 AM|LINK

  menuexample.css

   

  .foo {}

  .PrettyMenu ul

  {

  /* background:#9c36ff;*/

  }

  .PrettyMenu ul.AspNet-Menu ul

  {

  /* width: 10.5em;*/

  left: 8.9em;

  top: -1em;

  z-index: 400;

  }

  .PrettyMenu ul.AspNet-Menu ul ul

  {

  /* width: 11.5em;*/

  left: 10.4em;

  }

  .PrettyMenu ul.AspNet-Menu li

  {

   

  }

  .PrettyMenu ul.AspNet-Menu li a, .PrettyMenu ul.AspNet-Menu li span

  {

  color: #ffffff;

  border: 0px solid #648ABD;

  border-bottom: 0;

  background: transparent url(../../images/rightarrow2.gif) right center no-repeat;

  padding-right: 20px;

  padding-left: 8px;

  padding-bottom: 4px;

  padding-top: 2px;

   

   

  }

   

  .PrettyMenu ul.AspNet-Menu li.AspNet-Menu-Leaf a,

  .PrettyMenu ul.AspNet-Menu li.AspNet-Menu-Leaf span

  {

  background-image: none;

  }

  .PrettyMenu ul.AspNet-Menu li a img

  {

  border-style: none;

  vertical-align: middle;

  }

  .PrettyMenu ul.AspNet-Menu li:hover,

  .PrettyMenu ul.AspNet-Menu li.AspNet-Menu-Hover

  {

  /*background:#7795BD;*/

  background:#6300C6;/*952bff320064*/

   

  }

  .PrettyMenu ul.AspNet-Menu li:hover a,

  .PrettyMenu ul.AspNet-Menu li:hover span,

  .PrettyMenu ul.AspNet-Menu li.AspNet-Menu-Hover a,

  .PrettyMenu ul.AspNet-Menu li.AspNet-Menu-Hover span,

  .PrettyMenu ul.AspNet-Menu li:hover li:hover a,

  .PrettyMenu ul.AspNet-Menu li:hover li:hover span,

  .PrettyMenu ul.AspNet-Menu li.AspNet-Menu-Hover li.AspNet-Menu-Hover a,

  .PrettyMenu ul.AspNet-Menu li.AspNet-Menu-Hover li.AspNet-Menu-Hover span,

  .PrettyMenu ul.AspNet-Menu li:hover li:hover ul a:hover,

  .PrettyMenu ul.AspNet-Menu li:hover li:hover ul span.Asp-Menu-Hover,

  .PrettyMenu ul.AspNet-Menu li.AspNet-Menu-Hover li.AspNet-Menu-Hover ul a:hover,

  .PrettyMenu ul.AspNet-Menu li.AspNet-Menu-Hover li.AspNet-Menu-Hover ul span.Asp-Menu-Hover

  {

  color: White;

   

  }

  .PrettyMenu ul.AspNet-Menu li:hover ul a,

  .PrettyMenu ul.AspNet-Menu li:hover ul span,

  .PrettyMenu ul.AspNet-Menu li.AspNet-Menu-Hover ul a,

  .PrettyMenu ul.AspNet-Menu li.AspNet-Menu-Hover ul span,

  .PrettyMenu ul.AspNet-Menu li:hover li:hover ul a,

  .PrettyMenu ul.AspNet-Menu li:hover li:hover ul span,

  .PrettyMenu ul.AspNet-Menu li.AspNet-Menu-Hover li.AspNet-Menu-Hover ul a,

  .PrettyMenu ul.AspNet-Menu li.AspNet-Menu-Hover li.AspNet-Menu-Hover ul span

  {

  color: White;

   

  }

  .PrettyMenu ul.AspNet-Menu li a:hover,

  .PrettyMenu ul.AspNet-Menu li span.Asp-Menu-Hover

  {

  color: White;

  background: transparent url(../../images/activeArrowRight2.gif) right center no-repeat;

  background-color:#6300C6;

   

  }

  .PrettyMenu ul.AspNet-Menu li.AspNet-Menu-Leaf a:hover

  {

  background-image: none;

   

  }

   

  div.PrettyMenu

  {

  width: 100%;

  background-color:#9c36ff;

  }

  .PrettyMenu .AspNet-Menu-Horizontal

  {

  position:relative;

  /*left: 9.5em;*/

  top: 0;

  z-index: 300;

  width: 100%;

  }

  .PrettyMenu .AspNet-Menu-Horizontal ul.AspNet-Menu

  {

  /*width: 80em;*/

   

  }

  .PrettyMenu .AspNet-Menu-Horizontal ul.AspNet-Menu ul

  {

  /* width: 11.5em;*/

  left: 0;

  top: 100%;

   

  }

  .PrettyMenu .AspNet-Menu-Horizontal ul.AspNet-Menu ul ul

  {

  top: 0.1em;

  }

  .PrettyMenu .AspNet-Menu-Horizontal ul.AspNet-Menu ul ul

  {

  /* width: 11.5em;*/

  left: 11.5em;

  }

  .PrettyMenu .AspNet-Menu-Horizontal ul.AspNet-Menu li

  {

  /* /* width: 11.5em;*/

  text-align:left;

  /* padding-right:1em; */

   

  }

  .PrettyMenu .AspNet-Menu-Horizontal ul.AspNet-Menu ul li

  {

  text-align:left;

  width: 11.5em;

  background-color:#5b90f8;

  border:solid 1px #000;

  }

  .PrettyMenu .AspNet-Menu-Horizontal ul.AspNet-Menu ul ul li

  {

  width: 11.5em;

  background-color:#6fb76f;

  }

  .PrettyMenu .AspNet-Menu-Horizontal ul.AspNet-Menu li ul li ul

  {

  /* margin: 0 0 0 11.5em; */

  }

   

  and for ie 6 IEMenu6.css

   

  ul.AspNet-Menu li

  {

  float: left !important;

  /* height: 1% !important;*/

  height: 1% !important;

   

  }

  ul.AspNet-Menu li a,

  ul.AspNet-Menu li span

  {

  /* height: 1% !important;*/

  height: 1% !important;

   

  }

  .AspNet-Menu-Horizontal ul.AspNet-Menu li li

  {

  float: left !important;

  }

  /* Undoing rules used for IE7 and other browsers. */

  ul.AspNet-Menu ul

  {

  visibility: visible !important;

  }

  ul.AspNet-Menu li:hover ul ul,

  ul.AspNet-Menu li.AspNet-Menu-Hover ul ul

  {

  visibility: visible !important;

  }

  ul.AspNet-Menu li:hover ul,

  ul.AspNet-Menu li li:hover ul,

  ul.AspNet-Menu li li li:hover ul,

  ul.AspNet-Menu li.AspNet-Menu-Hover ul,

  ul.AspNet-Menu li li.AspNet-Menu-Hover ul,

  ul.AspNet-Menu li li li.AspNet-Menu-Hover ul

  {

  visibility: visible !important;

  }

  /* Pre-IE7 rules used to avoid performance problems found when using the newer rules. */

  ul.AspNet-Menu ul

  {

  display: none;

  }

  ul.AspNet-Menu li:hover ul ul,

  ul.AspNet-Menu li:hover ul ul ul,

  ul.AspNet-Menu li.AspNet-Menu-Hover ul ul,

  ul.AspNet-Menu li.AspNet-Menu-Hover ul ul ul,

  ul.AspNet-Menu li.AspNet-Menu-Hover ul ul ul ul,

  ul.AspNet-Menu li.AspNet-Menu-Hover ul ul ul ul ul

  {

  display: none;

  }

  ul.AspNet-Menu li:hover ul,

  ul.AspNet-Menu li li:hover ul,

  ul.AspNet-Menu li li li:hover ul,

  ul.AspNet-Menu li.AspNet-Menu-Hover ul,

  ul.AspNet-Menu li li.AspNet-Menu-Hover ul,

  ul.AspNet-Menu li li li.AspNet-Menu-Hover ul,

  ul.AspNet-Menu li li li li.AspNet-Menu-Hover ul,

  ul.AspNet-Menu li li li li li.AspNet-Menu-Hover ul

  {

  display: block;

  }

  .AspNet-Menu-Horizontal ul.AspNet-Menu li li

  {

  float: none;

  }

   

  .PrettyMenu ul.AspNet-Menu li

  {

   

  font-size:10pt;

  }

  .PrettyMenu .AspNet-Menu-Horizontal ul.AspNet-Menu

  {

  width:980px;

   

  }

  .PrettyMenu .AspNet-Menu-Horizontal ul.AspNet-Menu li

  {

  width: 11em;

  }

   

  As i said previously it is the width property of

  .PrettyMenu .AspNet-Menu-Horizontal ul.AspNet-Menu li

   that if removed works ok in all other browsers but causes ie6 to show each top level menu item at the full width of the menu.

   

• • Reply
  

  nileshagni

  Member

  17 Points

  4 Posts

  Re: ie6 and menu top level width

  Apr 12, 2007 06:58 AM|LINK

  Have u found the solution for this. I am too facing the same issue...
• • Reply
  

  Damian Dobos...

  Member

  2 Points

  1 Post

  Re: ie6 and menu top level width

  Apr 13, 2007 06:34 PM|LINK

  We to are having this problem with the top menu width in IE6.

  Anyone have a solution yet?

  Damian Dobosz

  Mercury Companies, Inc.