I'm sure that it's just me going nuts today, but I'm having issues getting the styles to work in IE for a horizontal menu... instead of displaying inline, they're taking up a line a piece. This issue does not appear in Firefox / Mozilla browsers, so I'm again at a loss as to what's wrong.
As always, any help is appreciated.
- George
Code:
<html>
<head>
<style>
#mainNav { padding: 0.3em 0em .3em 0em; background-color: #D4E5F7; color: #333333; font-size: .75em; margin: 0em; }
#mainNav ul { margin: 0 0 0 5px; border: none; padding: 0px; }
#mainNav li { margin: 0px; display: inline; padding: 0px; }
#mainNav li a { padding: 3px 13px 3px 13px; border-right: 1px solid #2D84D3; color: #333333; text-decoration: none; width: 100%; margin: 1em 0px 0px -5px; }
#mainNav li a.select { padding: 3px 13px 4px 13px; color: #FFFFFF; background-color: #0076CC; }
/* netscape-Opera-Mozilla fix */
html>body #mainNav li a { width: auto; margin: 1em 0px 0px -5px; padding: 3px 13px 0px 13px; }
</style>
</head>
<body>
<div id="mainNav">
<ul>
<li><a href='#'>Auto</a></li>
<li><a href='#'>Business Insurance</a></li>
<li><a href='#'>property</a></li>
</ul>
</div>
</body>
</html>As always, any help is appreciated.
- George