Forums | MacLife

Redstone wrote:

I'm reworking a site, trying to bring it to the 21st century and use css only in it.
Pretty simple stuff, including a simple menu using UL

Try also floating the <li>s to the left.

Also, if you want to go hog wild (and you do, trust me), you can get rid of most of the JavaScript that drives the drop down menus and make it even more semantic. I'll post more on this later.

I haven't worked the bugs out, but you get the idea.

The <li> is the menu item, not the <a> enclosed in it.

,xtG
.tsooJ

Thanks guys ,
I really thought I tried li float:left already.
The real reason I'm using a class in the a is to be able to change the class when that link is active.

Guess I can move all the other float:left I have in the menu style.

Thanks a lot.

Don't bother testing on IE5/Mac, seriously. It's an entirely insignificant browser. You're better off optimizing for WebTV. The only people I run into who still use it are designer types who were smart enough to recognize its value in 2001 but aren't nerdy enough to keep up-to-date. Seriously, unless you've got the audience and budget of a Yahoo, you don't need to bother.

As for your code: apply #menubox directly to the UL (you don't need a wrapper div) and lose the display:inline. Float the LIs, not the links. Set the links to display:block. Get rid of the .menu class, just apply styles to #menubox li a instead. You can still have an active class, because it will override the other definitions.

I learned the method using one of ALA's old designs. The current design might be just as informative, probably more so.

The toggleStyles script is my own is and simply intended to show how the list looks with and without styling.  It doesn't actually apply any of the styling, and is browser-independent.

The other script (startList), the one that does the magic for IE, is from this ALA article.  It only affects IE (since it tests for the existence of document.all), and all it does is attach event handlers to deal with the list item rollovers (since IE doesn't recognize the :hover pseudoclass on anything except <a> elements).

Thanks.
Though I'm happy with miles code, its a cool way to learn much much more about css

        <li><a class="menu" href='#'>Photos</a>
            <ul>
                <li><a href=?lang=english&page=pictures&page2=press>Press Photos</a></li>
                <li><a href=?lang=english&page=pictures&page2=japan>Japan Photos</a></li>
                <li><a href=?lang=english&page=pictures&page2=VIP> Artist Friends</a></li>
            </ul>
        </li><a class="menu" href='?lang=english&page=news-clips'>Newspaper Articles</a></li>

That last item, Newspaper Articles, has no opening <li>.  Same goes for the items following the other submenus.

I know that validating HTML isn't your number one concern, but it would catch stuff like that.  When your code is valid, you can eliminate differing browser error handling as the source of some weird errors.  I also know that it's a pain in PHP to type \" to get quoted tag attributes, but you really should do it.

hi miles ,

problems with your code and ie - I think ie doesn't know Z-index which means that once there is text or whatever the menu doesn't work .
check out this :
http://dirtyfred.com/new/index.php?link … amp;show=3

Thanks
Danny

Last edited by Redstone (2006-04-22 1:46 am)

ok, my mistake. So z-index is not the reason.
The problem is, in IE pc, when there is text where the menu appear, you can't reach parts of the menu.
Any ideas?

thanks

Danny

sorry - I changed the page name... I edit it and it's working now.
It does work if there is no content under the menu - however once there is content you can see the expanded menu but can reach under the second link..

So, what am I doing wrong...

Hi Miles, I moved the menu a little, but didn't alter the actual css.
now in IE , there are hugh margins.

Help.

Danny