Sage

Alrighty, I'm trying to make my website compatible with all browsers. I'm tabling my data in HTML, and using CSS and JavaScript to make a drop-down menu. It's not going so hot. In fact, it's downright ANNOYING. My page doesn't like any browser other than Firefox, and my dropdown menu is popping up at COMPLETELY the wrong location depending on what computer I view it on.

Now, am I just ignorant in thinking that HTML should be HTML no matter what? This is very frustrating for me. Do any of you have any good resources or help that you could give me? I've been reading a lot about how using CSS for the design layout of the webpage is a million times better than using HTML tables, but I don't have the time to learn CSS in one weekend.

Thanks!

__________________

Silvy

The following is based on my experiences:

- HTML for simple formatting works OK. Different browsers render stuff differently, especially when it comes to nested tables. It helps to not use HTML, but XHTML and mention the proper DOCTYPE at the beginning of the document. That way you make sure that all browsers at least try to render it as the same type!
- CSS is usually implemented OK. Some browsers have different defaults than others though. I don't know any examples of the top of my head, but imagine browserA rendering all text in red by default. But browserB rendering everything green. If you we're designing red text in browserA which would work without the explicit 'color: red', you will need to add that definition for browserB (making sense?). So if something is not displaying right: try explicitly defining that particular style element. You may have been duped by the default behavior of your design-browser.
- Drop-down menus - for me this has always been a nightmare. I did get some dropdowns to work in all browsers, but with examples I got of the 'net I always needed to spend hours tweaking the code to get it right.
(I too have had the place-menu-somewhere-else-at-different-times bug. For me it was in FF and that should be fixed in the most recent versions.)

- Browsers: My primary browser is Opera. It has a nice feature that allows you to validate the current page. That way you can check wether you've used your HTML/css etc correctly.

Firefox is a very good browser, it is fast very compatible, and it has the DOM inspector (ctrl+I) This allows you to actually examine the structure of your page. You can actually determine what style is applied to each element, and in what order. Also this allows you to see the calculated sizes of tables and what Javascript actions are associated. A must have for developers!
Also there is an amazing extension available (well at least I think so ) called "Web developer" (current version 0.9.4). This allows for better Javascript error reporting and tons of other neat stuff (also validation in different forms).

I first learned HTML/CSS/Javascript and such using www.w3schools.com. It gives plenty of examples, but is not too forthcoming on practical problem solving. One reason I keep coming back to them is the fact that they have extensive listings of tags and css directives.
For better real-world examples I've always googled for my particular issue, and while some sites keep popping up (with varying success) none of them have stuck in my head, so I can't remember the url

Oh well, I'm not a fulltime webdeveloper, what I've done is mostly hobby-type stuff. I'm sure others can offer more help, but I hope this helps somewhat.

One tip: if you're stuck with a specific problem perhaps you could give us a link to the site. (if you're OK with other people reading the content...)

__________________
"Do not kill. Do not rape. Do not steal. These are principles which every man of every faith can embrace. "
- Murphy MacManus (Boondock Saints)

archpaladin

Having done a little professional web designing myself, let me share some tips I've come across....most are common sense after doing this one or two times, so I'm sorry if what I'm saying is below your experience.

1. Code first and foremost to standards. Make it work right in Opera and Firefox first, and ignore IE until you get these two down. Firefox will be probably be easiest to make it work right since it's flexible with HTML and CSS input. I mention Opera here because it can be rather Javascript and CSS strict, and this will help ensure a broad compatibility across many browsers if you get this one down.

2. Implement whatever hacks are required to make it work in IE. Don't delete any standardized code; merely add-on to make IE work. You may find that you'll have to structure your HTML and CSS differently or use different macros for this to work (ie. input-tag type buttons instead of the button-tag type buttons). In Javascript, you'll probably have to implement the same code twice using slightly different functions depending on what browsers you're using.

3. Try to keep your HTML and your styling as separate as possible. Far easier to change in the future. Rely on CSS for your styling and layout rather than hard-coded HTML layout when reasonable, as it eliminates a good deal of the nuances that can crop up if you're trying to get a layout exactly perfect in every browser.

You're right that HTML is HTML no matter what...it's just that the standards IE uses for CSS and Javascript are not the standards everyone else uses, so things break really easy once you get past static rendering. I feel your pain in making these things work right, as it's very hard.

Some useful links:

www.w3c.org
www.w3schools.com (repeated from above)
www.javascriptkit.com (good for IE-compatible code and examples)
www.htmlhelp.com

Google is also very much your friend for webdesigning hacks.

__________________
This space not for rent.

Sage

Thanks guys- I managed to get this issue figured out, but I'm sure more will pop up along the way!

Do you have any good books you'd recommend to learn CSS? I learned a TON of Javascript fundamentals this weekend just working on this stupid project, but I'd like to actually learn CSS from the ground up. The ideal way would be to take an online course through a college sometime in the future, but right now books/websites/videos/whatever would be great. Thanks!

__________________

archpaladin

Unless it was a course that covered design and layout (ie. actual aesthetic things that people pay money for) you'd probably be wasting your money. There's nothing about CSS itself that you can't learn from a book or tutorial somewhere.

With that said, I suggest this: start with Google. Really. Use Google to learn your way around the div and span tags, as well as use it to get comfortable with external stylesheets. Then, go to the W3C's website and head to their CSS section (there's a link on the left hand side in the large list they have). There you'll find all the working drafts and CSS specifications and other standards. If you did a good job with online tutorials, then all the attributes used in the tutorials will make sense and you'll have the entire breadth of CSS at your fingertips.

Well, that's how I learn and keep abreast of things anyway. CSS became big after I had already purchased all of my web design books so I can't help you in that medium.

__________________
This space not for rent.