I'm having issues getting some dropdown menus to work properly in IE and Safari for MAC and also IE for PC. I figured it would be easier to post a link instead of all the code. You should be able to view the source when you go to the page, however if anyone has problems let me know and I'll post the code.
Test Page (<!-- m --><a class="postlink" href="http://www.keiger.com/test6">http://www.keiger.com/test6</a><!-- m -->)
IE Mac - The navigation bar shows up, but the dropdown menus don't work at all and the text is a little skewed.
Safari Mac - The navigation bar shows up, but the dropdown menus are all on the far left of the screen in ver. 1.0.3 and in ver. 1.3.1 they're not the right width.
IE PC - The submenus under Products/Capabilities and Contact Us/Job Opportunities don't show up at all.
As a side note I'm also having problems getting the navigation bar links (not the dropdown menus) to be center on the page. It works in IE for PC, but not any other browser for PC or Mac. If anyone can show me how to fix that as well I would greatly appreciate it.
Thanks ahead for any help that anyone provides!IE Mac - The navigation bar shows up, but the dropdown menus don't work at all and the text is a little skewed.
Not a clue yet...
Safari Mac - The navigation bar shows up, but the dropdown menus are all on the far left of the screen in ver. 1.0.3 and in ver. 1.3.1 they're not the right width.
Safari has a bug where it doesn't position absolutely positioned elements according to a relative parent if the relative parent is floated. The LI tags are floated left and probably positioned relative, which will trigger this bug in Safari. The workaround is to include a DIV that encapsulates the A tag and the UL sub menu and position that DIV tag relatively.
<ul>
<li>
<div> <!-- positioned relatively -->
<a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Link</a> <!-- top level link -->
<ul>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Sub menu</a></li> <!-- sub menu link -->
</ul>
</div>
</li>
</ul>
IE PC - The submenus under Products/Capabilities and Contact Us/Job Opportunities don't show up at all.
Probably a positioning bug in IE-Win. Try setting the height of the UL tag that holds the whole menu. Set it to 1px:
/* IE-Win needs a false height or minor to major display problems occur. \*/
#id_of_main_menu {
height: 1px;
}/**/
As a side note I'm also having problems getting the navigation bar links (not the dropdown menus) to be center on the page. It works in IE for PC, but not any other browser for PC or Mac. If anyone can show me how to fix that as well I would greatly appreciate it.
You can't center the links. The LI tags are floated left. Basically you can't center the links. I've just had to get over it myself
What you can do is adjust the margins on either side of the floated LI tags so things look pretty much aligned center.
Now I did get a menu like this working once by setting all the LI and UL tags to inline display, then text-align: center centered the links. But alas Mozilla browsers prior to Firefox 1.0 didn't position things according to a relative inline parent
Fixed as of firefox 1.0 though. And then I don't think IE5-Win reacted very well, and it was an absolute mess in IE5-Mac.
Stick with floats. *shrugs shoulders apathetically* Get over the fact that the links aren't aligned center. Not that big of a deal.
Test Page (<!-- m --><a class="postlink" href="http://www.keiger.com/test6">http://www.keiger.com/test6</a><!-- m -->)
IE Mac - The navigation bar shows up, but the dropdown menus don't work at all and the text is a little skewed.
Safari Mac - The navigation bar shows up, but the dropdown menus are all on the far left of the screen in ver. 1.0.3 and in ver. 1.3.1 they're not the right width.
IE PC - The submenus under Products/Capabilities and Contact Us/Job Opportunities don't show up at all.
As a side note I'm also having problems getting the navigation bar links (not the dropdown menus) to be center on the page. It works in IE for PC, but not any other browser for PC or Mac. If anyone can show me how to fix that as well I would greatly appreciate it.
Thanks ahead for any help that anyone provides!IE Mac - The navigation bar shows up, but the dropdown menus don't work at all and the text is a little skewed.
Not a clue yet...
Safari Mac - The navigation bar shows up, but the dropdown menus are all on the far left of the screen in ver. 1.0.3 and in ver. 1.3.1 they're not the right width.
Safari has a bug where it doesn't position absolutely positioned elements according to a relative parent if the relative parent is floated. The LI tags are floated left and probably positioned relative, which will trigger this bug in Safari. The workaround is to include a DIV that encapsulates the A tag and the UL sub menu and position that DIV tag relatively.
<ul>
<li>
<div> <!-- positioned relatively -->
<a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Link</a> <!-- top level link -->
<ul>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Sub menu</a></li> <!-- sub menu link -->
</ul>
</div>
</li>
</ul>
IE PC - The submenus under Products/Capabilities and Contact Us/Job Opportunities don't show up at all.
Probably a positioning bug in IE-Win. Try setting the height of the UL tag that holds the whole menu. Set it to 1px:
/* IE-Win needs a false height or minor to major display problems occur. \*/
#id_of_main_menu {
height: 1px;
}/**/
As a side note I'm also having problems getting the navigation bar links (not the dropdown menus) to be center on the page. It works in IE for PC, but not any other browser for PC or Mac. If anyone can show me how to fix that as well I would greatly appreciate it.
You can't center the links. The LI tags are floated left. Basically you can't center the links. I've just had to get over it myself
What you can do is adjust the margins on either side of the floated LI tags so things look pretty much aligned center.
Now I did get a menu like this working once by setting all the LI and UL tags to inline display, then text-align: center centered the links. But alas Mozilla browsers prior to Firefox 1.0 didn't position things according to a relative inline parent
Fixed as of firefox 1.0 though. And then I don't think IE5-Win reacted very well, and it was an absolute mess in IE5-Mac.Stick with floats. *shrugs shoulders apathetically* Get over the fact that the links aren't aligned center. Not that big of a deal.