Solved

Horizontal vs vertical Firefox IE

Posted on 2007-03-19
9
846 Views
Last Modified: 2012-06-22
It works on Firefox displaing the menu horizontaly but on IEwill display vertical
0
Comment
Question by:rcleon
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 5
  • 4
9 Comments
 
LVL 9

Expert Comment

by:pmagony
ID: 18752240
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
 

Author Comment

by:rcleon
ID: 18752417
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
 
LVL 9

Expert Comment

by:pmagony
ID: 18752434
Link to the page or code...
0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

Author Comment

by:rcleon
ID: 18752450
<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
 
LVL 9

Expert Comment

by:pmagony
ID: 18752462
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
 

Author Comment

by:rcleon
ID: 18752554
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
 
LVL 9

Accepted Solution

by:
pmagony earned 500 total points
ID: 18752605
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
 

Author Comment

by:rcleon
ID: 18760117
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
 
LVL 9

Expert Comment

by:pmagony
ID: 18760223
If you need further help in finalizing it, just post another question and I'll be happy to assist you.  Thanks again!
0

Featured Post

On Demand Webinar - Networking for the Cloud Era

This webinar discusses:
-Common barriers companies experience when moving to the cloud
-How SD-WAN changes the way we look at networks
-Best practices customers should employ moving forward with cloud migration
-What happens behind the scenes of SteelConnect’s one-click button

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

As a result of several questions about how to use Bootstrap I thought it would be a good idea to write down the development aspect of creating a Bootstrapped website in as little time as possible. Part 1 of this article will only concentrate on g…
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …

734 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question