Solved

Horizontal vs vertical Firefox IE

Posted on 2007-03-19
9
841 Views
Last Modified: 2012-06-22
It works on Firefox displaing the menu horizontaly but on IEwill display vertical
0
Comment
Question by:rcleon
  • 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
 

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
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Creating a CSS block that only applies to printing By default, all of your CSS applies to every possible view of your page - whether on screen, printed, landscape, touch-screen, or whatever.  You can, however, add CSS that only applies under certai…
This article discusses four methods for overlaying images in a container on a web page
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.…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

896 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

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now