Drop Down Menu - Differant Browsers

**avstu** · Dec 10, 2007 03:44

Im new to CSS and already im sick of this crap with the fact you have to code for differant browsers. I dont know if this is down to the browsers or the coding - buts its annoying. PHP, HTML etc they work in all browsers so why cant CSS just be the same?

Anyway, to my point. Ive been told CSSPlay is one of the best sites around when it comes to CSS. so i picked this drop down menu

http://www.cssplay.co.uk/menus/dd_valid.html

I have followed what it asks yet for some reason i cant seem to get it working in IE. it works with Firefox though.

Heres my page: www.avillafan.com/test/nav.htm

Can someone help me out here and tell me what the hell im doing wrong?

**ScottyDM** · Dec 10, 2007 06:00

Can I beech too? Cause man, sometimes this junk is frustrating.

But first a bit of advice. If you're not already, try using the <!DOCTYPE> tag on your pages. It goes before the <html> tag. I've heard that without it IE runs in "quirks" mode (that is, it acts like IE instead of a standards compliant web browser). Now they've got IE 7 and I hear it still has a quirks mode. And what's up with this proprietary ActiveX junk anyway? My wife put a little "This site uses ActiveX" on her website, then she proudly asks me to test it out. "Well duh, Sweetie, it ain't gonna fly on Firefox."

Umm, sorry. Didn't mean to start beeching quite so soon.

Okay, the good news. Once you get your CSS files tested and working with multiple browsers, you're set! The bad news. Not only does stuff not always work the same between different browsers and different versions of browsers, it doesn't always work like the documentation suggests it might work. Getting CSS right is hacking, pure and simple. Read the docs, then try stuff, and try stuff, and try stuff again. Get multiple versions of every browser you care about and keep them all open on your desktop while debugging your CSS. Do a page and open it in every browser. Then tweak the CSS and hit reload on all browsers. It'll take a few days, but eventually you'll get it.

< beech_mode >
First, I'd like to beech about the W3C and some of their seriously craptastic design decisions. So <script> is an inline tag and <noscript> is a block tag? Who the ~bleep~ thought of that? It makes some pages impossible to validate. Yea, I've been to their forum and read the reasoning behind it all and it's still stoopid. But seriously, they should create a third class of tag known as "neither".

I'm not sure who to blame about the <div> tag. It works the same stupid way in all the modern browsers I tested, so maybe it's the W3C's fault. Everyone talks about the "box model" and all the illustrations in all those CSS books show a rectangle... sorry, NOT! You cannot stack <div>s vertically and expect them to stay nice neat rectangles. Sometimes they go all goofy and turn into "L" shapes and overlap each other. To heck with that. I'm using a table. You can always count on a table cell being a rectangle.

And what's up with CSS positioning? I'll get this figured out someday. I see websites that use CSS to create columns, but damn. Figuring out how it really works is like hacking, and I hate hacking. Then when I do get it figured out it's going to look like junk to older browsers. So for now I'm using tables. If I want two columns I do one row of two cells turn off every visual attribute about the table. Then I put <div>s inside those cells and wrap the table in a <div>, etc. and give them all nice classes. There's something wrong about having to hold a <div> down with a table cell.

I suppose I should or could beech about the browser makers who don't quite all do the identical thing, but heck. That I expect. Some of those W3C specs are a bit fuzzy. And how can you expect an iron-clad spec when no one's tried it before? So I guess I can't really complain about them either for this.

And why in IE 5.5 and 6 (haven't tried 7 yet) can you not make a zero height table cell?

Dang it Microsoft! I finally "get" why you feel an HTML rendering engine should be a part of the operating system, but why can't I have multiple versions of IE on one install of Windows? How are we supposed to test stuff?
</ beech_mode >

Well, that's about it for me. I feel better.

BTW. PHP runs on the server, so the browser never sees it. And HTML isn't always the same in every browser. Try doing a form with several buttons at the bottom that each take you to a different page. Mozilla/Firefox and Opera work the same, but IE is just a bit different. Finally found a solution, and it validates as XHTML transitional too. Whoo hoo!

I know you didn't ask, but I'm not a fan of drop down menus, so the only useful advice I can give is hang in there! You'll get it eventually.

Scotty

PS: I haven't had to code for different browsers yet. I've either found a way to make it work reasonably the same in all, or I've done something different.

**avstu** · Dec 10, 2007 07:24

lol thats a long post. Well if im honest with you, something that has to be edited for different browsers for me isnt the best thing since slice bread like so many webmasters make out that css is.

IE has been around for a long time, probably before CSS hit the big time, so why is it microsofts fault that it doesnt work in there browser? Surely is whoever invented this silly code that it doesnt work in all browsers.

I dont usually use css a lot to be fair. Ill use it to determine the different text and link styles but thats about it.

My current drop down menu is done by javascript and it works perfectly in all browsers, but apparently some people say javascript isnt user friendly thats why i thought id give the old css a shot.

**DaveWoods** · Dec 10, 2007 09:14

You're link goes to a 404 page so we can't see what you've currently got

You shouldn't have to code for the latest browsers if the code is valid and used correctly whilst a few well documented bugs can easily be fixed for IE6 and below.

I created a tabs menu with dropdowns using the suckerfish method which you might find useful...

CSS Tabs with Dropdowns

Hope that helps?

**Centauri** · Dec 10, 2007 09:55

While Stu Nichols' site offers some great css ideas, his pure css dropdowns are not on my list of favourite code due to its complex illegal table nesting via conditional comments. I would always suggest the suckerfish method, such as the example Dave linked to.

**avstu** · Dec 10, 2007 11:47

Ok then, i will give the good old suckerfish method a go. I have nothing to lose afterall do i?

**drhowarddrfine** · Dec 10, 2007 15:52

As mentioned above, there is no reason to code differently for different browsers; and the W3C and CSS are not to blame. Almost always, CSS issues are with IE and not the others. Marking up your page to a modern browser, such as Firefox, Opera or Safari will produce a page that works everywhere, sometimes even IE.

**ScottyDM** · Dec 10, 2007 19:01

First, I'd just like to say that it was about 2:00 am when I made that post....

Originally Posted by csswiz

You shouldn't have to code for the latest browsers if the code is valid and used correctly whilst a few well documented bugs can easily be fixed for IE6 and below.

Amen, brother!

Originally Posted by drhowarddrfine

As mentioned above, there is no reason to code differently for different browsers; and the W3C and CSS are not to blame. Almost always, CSS issues are with IE and not the others. Marking up your page to a modern browser, such as Firefox, Opera or Safari will produce a page that works everywhere, sometimes even IE.

First, I'm not a professional website designer. Mostly, I design for myself. However, my cousin did pay me to design this site for him: gemstone sculpture (check out the "galleries" section). Wish I could say I was the photographer; that'd be cool!

I started fiddling with CSS several years back and think it's the greatest thing ever! Well, the parts of it I can figure out anyway.

Anyway, as Dr Howard suggests, that's pretty much my workflow. Once the CSS is golden, I build it and test in Firefox, then spot check IE and Opera to if it's okay.

My opinion on drop-down navigation:

Drop-down navigation is certainly popular, but I'm not crazy about it because it doesn't work the way I want to work. For example, I go to a site and I want to see their products. There could be a sweet horizontal nav bar across the top of the page and I see the word "products". Immediately, I click on it. Sure there's a drop-down menu when I mouse-over, but heck with that. I want to go to a page that tells me my options and not stare at some tiny text on a tiny menu, or try to think while the rest of the homepage is "shouting" at me (visually speaking). On some sites (Adobe's "products") it works, and on others (GoDaddy's "domains") it fails -- and it fails hard so I can't easily get to where I want to go. I'm forced to mouse-over, pause, select "my domains" then click. What rot!

Drop down navigation isn't the great evil of: frames, Java Script links, or {shudder} Flash-only websites. If you do like Adobe did (but skip all that Flash who-ha, which is not evil, only annoying because it slows me down) then I can at least use the nav without having to think about it.

About putting browser select code on a web page:

A snippet of browser-specific code on the page is not a terrible thing because you can minimize the potential damage it can cause -- it's unlikely you'll forget to update the code for all browsers when you update the page. However, feeding different pages to different browsers is the worst sort of craptastic idea ever, or even different CSS files. It's almost always possible to find some compromise that works in all modern browsers with a single code base.

I don't have any browser select code in any of my websites since I dropped support for Netscape 4.7 (killed the special CSS file just for it). It was too much of a pain to fiddle with two CSS files that did almost the same thing. People who surf one of my sites with a really old browser might only get black Times New Roman on white at the default sizes and styles -- but they do get to see the site.

Scotty

PS: My cousin is pointing me to Lawrence Stoller's new Flash-only website and saying, basically, "I want that." Gaaah! A Flash splash page! And then once you get past that, an almost totally passive website that you sit and watch like a tee-vee program. The Web is not tee-vee, dangit! Plus, the contents of Stoller's new site is invisible to the search engines. Well, I'm gonna give him some Flash widgets, and I've distracted him by challenging him to create something (movie, or a script and slide-show) to tell why he's in China and what that means to his art and his collectors.

Give me some content, dude!

**drhowarddrfine** · Dec 10, 2007 21:29

That Stoller site is the most gawd-awful thing I have ever seen. What's it supposed to be? Is he selling something? And how the hell do you get anywhere?

I just spent a minute there and clicked on those stupid little red boxes but they didn't do much, if anything. If I was a customer, he wouldn't get my money cause I don't know what I just saw!

**ScottyDM** · Dec 10, 2007 22:42

Originally Posted by drhowarddrfine

That Stoller site is the most gawd-awful thing I have ever seen.

Yea, but it's really, really pretty! Sounds good too.

Stoller and my cousin are direct competitors, except at different price points, so they're not quite direct competitors. But they both take pretty rocks and make them even prettier, then charge an art collector $10,000 or so (my cousin) or $100,000 or so (Stoller).

In both cases I think the purpose of the site is to familiarize potential collectors (customers) with the artist and what they've been working on. So in that way the sites are somewhat like a brochure. Now Stoller is maybe a touch more clever in that he has created a hard-bound brochure and asks $75 for it (his book).

At first Perry (my cousin) was hoping site visitors would whip out their credit cards and buy his pretty rocks directly off the site. As Jakob Nielsen says about B2B sites, it's about building a relationship, not selling. Perry finally gets that it's a relationship site, but now he wants a site like Stoller's.

I just realized, the "buy book" and "buy CD" links on Stoller's site don't work.

What's fun is seeing the pattern of the typical visitor on my cousin's website. He might only get one or two visitors a day, but they'll spend a good deal of time there and often view 50 or more pages. In contrast I get gobs of visitors to my sites, but half will only view one page then leave.

Scotty

**avstu** · Dec 11, 2007 04:09

I have tried solution after solution but everyone seems to be avoiding the actual question to why my menu dont work.

www.avillafan.com/site

username: vtwo
password: v2

This is the suckerfish menu. I added it to my site and its messed my layout up in firefox, i dont understand why. And still in IE 6 it just dont work.

Im starting to think why people are so against Javascript, ive never had a problem with it and it works in all browsers.

**avstu** · Dec 11, 2007 04:27

Id like to thank Dan Schulz who is the first person to actually try and help me. Highly reccommended. Thank you.

Ill let people know the outcome, fingers crossed everything will work

**Erik J** · Dec 11, 2007 04:31

IE6; It looks like you have removed some of the commented lte IE 6 nested table tags.
FF; It seems to work ok.

Perhaps you could rather use the recommended js version. I think IE6 users seldom has javascript disabled?

**Centauri** · Dec 11, 2007 04:39

Looks fine in FF - doesn't work in IE due to incorrect path to the csshover.htc file.

**ScottyDM** · Dec 11, 2007 07:38

That's funny, it seems to work for me in Firefox 2, Opera 9 (although there are white "blocks" down in the footer), and IE 6. Your links all seem to point to "./#". Did you code them that way?

Scotty