CSS dropdown menus not working on the MAC

@toicontienSep 14.2005 — #IE Mac - The navigation bar shows up, but the dropdown menus don't work at all and the text is a little skewed.[/quote]
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.[/quote]
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.

<i>
 </i>&lt;ul&gt;
 &lt;li&gt;
 &lt;div&gt; &lt;!-- positioned relatively --&gt;
 &lt;a href="#"&gt;Link&lt;/a&gt; &lt;!-- top level link --&gt;
 &lt;ul&gt;
 &lt;li&gt;&lt;a href="#"&gt;Sub menu&lt;/a&gt;&lt;/li&gt; &lt;!-- sub menu link --&gt;
 &lt;/ul&gt;
 &lt;/div&gt;
 &lt;/li&gt;
 &lt;/ul&gt;

IE PC - The submenus under Products/Capabilities and Contact Us/Job Opportunities don't show up at all.[/quote]
Probably a positioning bug in IE-Win. Try setting the height of the UL tag that holds the whole menu. Set it to 1px:

<i>
 </i>/* 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.[/quote]
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 [I]did[/I] 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.

CSS dropdown menus not working on the MAC

1 Comments(s) _↴

Also in #CSS _↴

Success!

Social

Version

CSS dropdown menus not working on the MAC

1 Comments(s) ↴

Also in #CSS ↴

Success!

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

Social

Version

1 Comments(s) _↴

Also in #CSS _↴