Horizontal vs vertical Firefox IE

It works on Firefox displaing the menu horizontaly but on IEwill display vertical
rcleonAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

pmagonyCommented:
We'll need just a tad more info to provide support.  At this point, its anyone's guess what you are trying to achieve :)
0
rcleonAuthor Commented:
Basically it is a horizontal menu created with a list. The menu has a rollover efect the menu display perfectly on firefox it display horizontaly and th the rollover effect works just fine.

On IE the menu is displayed vertically the rollover effect works just fine. Whene you look at the menu on IE you just see the first 2 LI.

Please thank you for your help.

PS it works just fine on IE 6 it is only on IE7 that it dose not work.

If you need anything else just ask.

Thanks
0
pmagonyCommented:
Link to the page or code...
0
The Ultimate Tool Kit for Technolgy Solution Provi

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy for valuable how-to assets including sample agreements, checklists, flowcharts, and more!

rcleonAuthor Commented:
<div id="info">
<ul class="menu lefted">
<li><a href="tc.php?UID=<?= $UID ?>" target="bf">Total<br>Compensation</a></li>
<li><a href="s1.php?UID=<?= $UID ?>" target="bf">Health &amp;<br>Well-Being</a></li>
<li><a href="s2.php?UID=<?= $UID ?>" target="bf">Financial<br>Protection</a></li>
<li><a href="s3.php?UID=<?= $UID ?>" target="bf">Retirement<br>Plan</a></li>
<li><a href="s4.php?UID=<?= $UID ?>" target="bf">Other<br>Benefits</a></li>
<li><a href="s5.php?UID=<?= $UID ?>" target="bf">Time<br>Off</a></li>
<?php If ($EmpInfo->STotalOut >0) { ?>
<li><a href="s6.php?UID=<?= $UID ?>" target="bf">Stock<br>Options</a></li>
<?php } ?>
<?php If ($EmpInfo->ExecBen != "Non") { ?>
<li><a href="s7.php?UID=<?= $UID ?>" target="bf">Executive<br>Benefits</a></li>
<?php } ?>
</ul>
</div>
0
pmagonyCommented:
Ok, now I'll I need is the CSS that's making it act funny.

Usually, the full code helps and not just snippets. Sometimes other code can affect layout by proxy.
0
rcleonAuthor Commented:
Thanks for all your effort

Here is the code:

/* New Navigation Bar EI and Firefox Complient */

#info {height:25em;}

#info p {text-align:center;}

.menu {
  display:table;           /* ignored by IE */
  padding:0;
  list-style-type:none;
  white-space:nowrap;      /* keep text on one line */
 }

* html .menu {
  display:inline-block;    /* for IE only */
  width:1px;               /* IE will expand 1px width to fit menu width */
  padding:0 2px;           /* fix bug in IE to get border spacing correct */
  }

.menu li {
  display:table-cell;      /* ignored by IE */
  }

* html .menu li {
  display:inline;          /* for IE only */
  }

.menu a, .menu a:visited {
  display:block;           /* for all browsers except IE */
  padding:4px 4px;
  color:#000;
  background:#BFD199;
  border:1px solid White;   /* add a 1px white border around each list item */
  text-decoration:none;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  font-weight: bold;
  text-align: center;
  width: 114px;
  }

* html .menu a, * html .menu a:visited {
  display:inline-block;    /* for IE only */
  margin:0 -2px;           /* to correct an IE bug that doubles the border width */
  }

.menu a:hover {
  color:#B22222;
  background:#DEE385;
  }

.lefted {margin:0 auto 0 0;}

.centered {margin:0 auto;}

.righted {margin:0 0 0 auto;}

0
pmagonyCommented:
Your CSS is all over the place.  You have an ID on your UL list that doesn't even exist #menu lefted.

If your trying to get your menu to align horizontally, you need to float your li's left:

Try this:

#info ul {
      list-style-type: none;
}
#info ul li {
      display: block;
      float: left;
}

You'll need to adjust padding and background images to get it to look the way you want it to.  But that code above will get your navbar in a horizontal manner.

I hope this helps you.  Personally, I would scratch your code and start over, you have a lot of code that's stepping on itself and causing more problems than needed.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
rcleonAuthor Commented:
Thank you that works. I know it has alot of holes I do need to recreated for now with your help I just pachted.

Thanks a million

Rafael
0
pmagonyCommented:
If you need further help in finalizing it, just post another question and I'll be happy to assist you.  Thanks again!
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.