list text-align is not working in IE

@impulseMay 26.2006

The text on my drop down menus are not aligned in the center of the box in IE. Works in Netscape.
Why is it not working in IE? Is there any way to fix the problem?

~~[URL=http://www.impulsenc.com/example/testNav.htm]~~click here to see navigation[/URL]

[code=php]<style type=”text/css” media=”screen”> /* css for the nav menu starts here */ body { margin:0px; padding:0px; background-color:#ffffff; font:80%; font-family:Verdana, Arial, Helvetica, sans-serif; } #menu { position:absolute; /* menu position that can be changed at will*/ top:0px; left:0px; z-index:20; width:100%; /* precision for Opera */ font-size:12px; color:#ffffff; /*background-color:none;*/ } dl, dt, dd, ul, li{ margin:0px; padding:0px; list-style-type:none; } #menu dl { float:left; width:12em; } #menu dt { cursor:pointer; text-align:center; font-weight:bold; color:#ffffff; background-color:#003399; border-style:solid; border:1px; border-color:#999999; margin:1px; } #menu dd{ display:none; border-style:solid; border-width:1px; border-color:#999999; } #menu li { text-align:center; background-color:#CCCCCC; } #menu li a, #menu dt a { color:#000000; text-decoration:none; display:block; height:100%; border-style:none; border:none; } #menu li a:hover, #menu li a:focus, #menu dt a:hover, #menu dt a:focus { background-color:#0099FF; wodth:100%; } #site { position:absolute; z-index:1; top:70px; left:10px; color:#CCCCCC; background-color:#ddd; padding:5px; border-style:solid; border-width:1px; border-color:#CCCCCC; } /* css for the nav menu ends here */ </style> </head>

<body> <div id=”menu”> <dl> <dt onmouseover=”javascript:show();”><a href=”#” title=”Return to home”><font color=”#ffffff”>Home</font></a></dt> </dl>

<dl> <dt onmouseover=”javascript:show(‘smenu1’);” onmouseout=”javascript:show(‘smenu1’);”>About Us</dt> <dd id=”smenu1″> <li><a href=”#”>History</a></li> <li><a href=”#”>Capabilities</a></li> <li><a href=”#”>Projects</a></li> </dd> </dl> [/code]

to post a comment

CSS

2 Comments(s) _↴

@David_HarrisonMay 26.2006 — #I viewed your page in IE 5.0, 5.5, 6.0 and 7 beta 2, they all show the text as being centered. However, there are default browser styles applied to <dd> elements, and it seems that IE applies some side margin to the <dd>'s which make them to appear slightly pushed to the right.

Your markup is invalid by the way, you have left out the opening <ul> and closing </ul> on all of the drop down lists. Definition lists are not really the best markup for a drop down menu, a much better markup structure would be to nest <ul>'s, such as in the [url=http://www.alistapart.com/articles/dropdowns]suckerfish dropdown menu[/url].

A couple of final points, the <font> element has been deprecated, there is no need for it any more, since all presentational effects can be replaced with CSS, thereby separating presentation from structure. Also, the use of javascript: in event handlers is not required, in fact there is only 1 instance in which it is necessary, and I've [url=http://www.hddkillers.com/2005/11/six-javascript-features-we-may-or-may-not-need-any-longer]written about it here[/url], point number 3.

@impulseauthorMay 31.2006 — #I can not get my drop down menus to show. Why? I'm not seeing the problem.

I believe my code is the same as the tutorial at [URL=http://www.alistapart.com/articles/dropdowns]suckerfish dropdowns[/URL] .

I would greatly appreciate any help that is offered. Slighty confused.

Here is my code -

[code=php]<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1-transitional.dtd">
 <html>
 <head>
 <title>Drop Down Menu</title>
 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
 
 
 
 <style type="text/css">
 body {
 font-family:Verdana, Arial, Helvetica, sans-serif;
 }
 /* menu starts here */
 /* all list */
 ul {
 padding:0;
 margin:0;
 width:80%;
 list-style:none;
 font-size:12px;
 font-align:center;
 background-color:#003399;
 color:#ffffff;
 border-style:solid;
 border:1px;
 border-color:#666666;
 }
 /* all list items */
 li {
 float:left;
 position:relative;
 width:10em;
 }
 /* second-level lists */
 li ul {
 display:none;
 position:absolute;
 top:1em;
 left:0;
 background-color:#0099FF;
 color:#CCCCCC;
 }
 /* to override top and left in browsers other than IE, which will position to the top of the right of the containg 1i, rather than the bottom left */
 li > ul {
 top:auto;
 left:auto;
 }
 /* lists nested under hovered list items */
 li:hover ul, li:over ul {
 display:block;
 }
 </style>
 
 <script language="javascript" type="text/javascript">
 startList = function() {
 if (document.all&&document.getElementById) {
 navRoot = document.getElementById("nav");
 for (i=0; i<navRoot.childNodes.length; i++) {
 node = navRoot.childNodes[i];
 if (node.nodeName=="LI") {
 node.onmouseover=function() {
 this.className+=" over";
 }
 node.onmouseout=function() {
 this.className=this.className.replace(" over", "");
 }
 }
 }
 }
 }
 window.onload=startList;
 </script>
 </head>
 
 <body>
 
 <ul id="nav">
 <li>Home</li>
 
  <li>About Us
   <ul>
   <li><a href="#">History</a></li>
   <li><a href="#">Capabilities</a></li>
   <li><a href="#">Projects</a></li>
   </ul>
  </li>
 
  <li>Traction Power
   <ul>
   <li><a href="#">IMProConTM</a></li>
   <li><a href="#">Battery Substation</a></li>
   <li><a href="#">Switchgear</a></li>
   <li><a href="#">Rectifier</a></li>
   <li><a href="#">Relays</a></li>
   <li><a href="#">TPS Brochures</a></li>
   </ul>
  </li>
 
  <li>Catenary
   <ul>
   <li><a href="#">Products</a></li>
   <li><a href="#">OCS Catalog</a></li>
   <li><a href="#">OCS Brochures</a></li>
   </ul>
  </li>
 
  <li>EMC Traction
   <ul>
   <li><a href="#">About EMC</a></li>
   <li><a href="#">Circuit Breakers</a></li>
   </ul>
  </li>
 
  <li>Customer Service
   <ul>
   <li><a href="#">CS Advocate</a></li>
   <li><a href="#">Sales Representatives</a></li>
   <li><a href="#">Training</a></li>
   </ul>
 </li>
 </ul>
 
 
 </body>
 </html>
 [/code]

Also in #CSS _↴

Side Shadows not appearing without fixed height Dropdown menu hiding behind content Validation Filter Help

Success!

Help @impulse spread the word by sharing this article on Twitter...

Tweet This

list text-align is not working in IE

2 Comments(s) _↴

Also in #CSS _↴

Success!

Social

Version

list text-align is not working in IE

2 Comments(s) ↴

Also in #CSS ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

2 Comments(s) _↴

Also in #CSS _↴