Solved

Horizontal vs vertical Firefox IE

Posted on 2007-03-19
9
842 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
Live: Real-Time Solutions, Start Here

Receive instant 1:1 support from technology experts, using our real-time conversation and whiteboard interface. Your first 5 minutes are always free.

 

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

Live: Real-Time Solutions, Start Here

Receive instant 1:1 support from technology experts, using our real-time conversation and whiteboard interface. Your first 5 minutes are always free.

Question has a verified solution.

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

Suggested Solutions

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…
CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

785 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