[RESOLVED] Mozilla problem (?)

[Mutuz]

I am currently making a small website, and have written a JavaScript which choose a css-file based on the user's browser and resolution.

Opera and IE goes without a glitch, but Mozilla Firefox is a pain in the a**! I am using absolute positioning instead of tables, and have made a small section on the top, which the user can make certain settings like selecting different themes and choosing which page to display as default.

The problem is that with Firefox, my hyperlinks move 10px down (outside the top-section) if the user open the website without the status bar. This however is not the case in Opera and IE.

I found out I can eliminate this problem using relative positioning, but this does not work for me, cause I want the hyperlinks in a fixed position.

Why is this happening, any suggestions on how to detect if the status bar is on or off?

[CornedBee]

Do you have an online version of the page that I can look at?

[Mutuz]

Thanks CornedBee, but I found out that for Firefox' part, the best way to solve this problem is to use fixed positioning.

If you try viewing the site with 1152x864 or 1280x960, it will work the way I want it - except the banner-menu (cause it has absolute positioning!)

But if you change your resolution to 1600x1200 or 1280x1024 you will notice the problem I mentioned. We may argue if this makes Firefox better than other browsers, but I say no!

[CornedBee]

I can't scale beyond 1024x768 on my current system. But neither do I get any settings bar - it just writes "undefined" at the top of the page. Firefox 1.0.7, Fedora Core 3. Apparently, css is undefined in that browser.
That's because I have a recognized browser, but no recognized solution. Whee! Seems your method needs a little more work.
You might want to read this:
http://themaninblue.com/writing/perspective/2004/09/21/

[Mutuz]

Sorry about that, in its current state it supports only those resolutions I mentioned in the last post! Thanks for the tip, I will read the article as it may suggest a better way of doing it!

[CornedBee]

OK, I had a closer look at the page and tricked my browser into using the 1280x1024 stylesheet. I still can't really see your problem because I can't see any configuration bar, but I'm pretty sure I don't want to look for it. Your current problem is not Firefox, it's your completely screwed up HTML. It's a wonder any browser does anything resembling something proper with it. You have to HTML opening tags, two complete HEAD elements (well, not complete, because TITLE is a required child of HEAD), two BODY opening tags, you write with JS normal content into the HEAD, you have unquoted non-trivial attribute values, you have the same ID attribute value up to 5 times. (IDs must be unique across the document. To have a style hook on several elements, use the class attribute.) Do not expect anything resembling consistent behaviour on invalid HTML, especially that invalid HTML.

[Merri]

Additionally, what you're trying to achieve is doomed to fail: even if you'd get Firefox to work that way (which is entirely possible), you'd still face the problem you're targetting specific browsers and resolutions (I use exotic 1360 x 1024). Generally, what you want to do is to make CSS that works equally well on all browsers; although due to the many bugs of IE you probably eventually run into a situatation where Firefox and Opera work equally, but IE doesn't get it at all. Luckily conditional comments technique helps here a fair bit.

You're controlling the style entirely on JavaScript. This is a big no. Make it work without JavaScript, only add JavaScript to give more features. Don't rely everything on it. Every browser supports CSS and CSS is always in use, JavaScript is not.

[Mutuz]

CornedBee: I might agree that I am not the most structured kind of guy when it comes to coding, but I think you overreact a little! Maybe if I write it in XHTML you will be satisfied? I hear it is far more strict!? - About that JavaScript: I plan on making it an external file (of course!) like the browser-js, but I had to see if I got it to work first!

Merri: Yeah, thanks for reminding me on the JavaScript-part for the second time (). And about "exotic" resolutions - I think that might be a good point!

[CornedBee]

No, I'm not overreacting. Your HTML is a mess, and using XHTML wouldn't really change it: although by concept, XHTML is much stricter, you'd still send it as text/html (otherwise IE refuses to interpret it, and document.write() wouldn't work) and thus still get the lazy HTML evaluation. In fact, you'd just be sending broken HTML.
No, what you should do is submit your page to the W3C HTML validator:
http://validator.w3.org/
This is what you get when you submit your page:
http://validator.w3.org/check?uri=ht...rg%2F%7Emorten

You need a DOCTYPE declaration. You need a character set declaration in a meta. You need to correct the errors that will then show up.

[Mutuz]

Thanks!