Firefox's CSS support a joke.

[Faglork]

Originally Posted by johreiki

I didn't even know there was such a thing! I thought "quirks" mode was a default situation only for pages that had no DTD. Likewise, I had no idea that a DTD of HTML 4.0 would lead to quirks mode!

Look here:
http://hsivonen.iki.fi/doctype/

Originally Posted by johreiki

--- Then I put the 4.01 Transitional DTD on my new page, and went to validate it....and got this message from W3C:

"Sorry, I am unable to validate this document because its content type is application/octet-stream, which is not currently supported by this service.

(...)

This was when trying to validate the file on my own computer; then I attempted to upload it and validate it on my server....and could not even FTP upload it! Got a message that the FTP program could not open the file!! So now I'm REALLY confused about these DTDs....

The problem is somewhere else. If you cannot even FTP the file, you have a completely different problem.

Originally Posted by johreiki

Yes, it does seem that the DTD somehow influences the browser's rendering of javascript!

I do not think it is the rendering - I suspect it is the underlying DOM ("Document Object Model"). I am no javascript expert (I avoid js whenever I can). Anybody to jump in here?

Originally Posted by johreiki

I agree with your second statement -- but not the first : ^ ).... I fail to see the desirability of such behavior!

"perfect behavior" and "desirability" are completely different aspects. If you want the code to behave different, you have to rewrite the code accordingly. Right now, the code behaves as it should, from a code point of view. If this is not what you have intended, change it.

Originally Posted by johreiki

I've never yet been able to decipher any such documents written by the W3C. I'll take your word for this -- and I agree that it's generally important for the viewer to be able to re-size text. However, when it's impossible to make any text that cannot be re-sized, the possibilities for innovative and interesting page layout are severely limited!

Au contraire. Design, by definition, is working under constraints. Has ever been, will ever be. Ever heard of CCS Zen Garden?

Originally Posted by johreiki

I realize FF is not the only one that allows this; but I see no logic at all in the argument that a browser "should" be able to change a fixed font-size!

In which world do you live?? Never even heard of WAI, Section 508 and all that stuff??

Ok, I give you just one reason. I use a 21" monitor to make working in several windows a bit easier. So my screen resolution is 1280xsomething. This makes the text so small that I can't read it - so I simply switch to a bigger font size. Now, you do not expect me to change my screen resolution just to read your website, do you? I simply go to another website, your competition is just a click away.

Now, this real-world scenario (it happens right now on the machine where I am writing this) is a bit flawed, because I have comparable good eyesight (though it has been getting worse in the last years). But is it really so hard for you to imagine visitors with poor eyesight who just HAVE to use bigger fonts in order to read a text? I cannot confirm it, but AFAIK about 20% of all surfers have impaired vision. If you want to neglect them, go ahead ...

On a different level, on a site which covers topics of healing and helping people, don't you think it is somewhat contradictory to deliberately make it harder for disabled people?

Originally Posted by johreiki

If that's the case, then there is no such thing as fixed font-size in the first place!!

Welcome to the World Wide Web.

Originally Posted by johreiki

And yet the specifying of a fixed font-size is validated by the W3C....

You confuse WAI and W3C.

Originally Posted by johreiki

I'm somewhat baffled, though; if the hr color attribute is not part of their specs, then why do they validate the use of it?

You confuse HTML attributes and CSS inline declarations - these are entirely different things. You do *not* use an HTML attribute on your page.

If you rewrite your style declaration to
<hr style="border: 1px solid #f00;">
it will work.

Alex

[GuyLaDouche]

If you are so completely dead set on making your titles or whatnot a fixed font size then make them an image. But listen to faglork... that's a terrible idea. The whole point of your website is to get people the information they're looking for. If they can't see it they'll go elsewhere. It's to your own detriment should you choose to make something like that a standard practice.

There's a reason that browsers allow people to change their default font size, and therefore font sizes on pages whose font size is too small for their eyesight.

[mikmik]

My response to faglork, who I pretty much agree with most the time, and learn lot's from! (butter job? LOL)

mikmik wrote:
IE6.X renders box model correctly.


As long as you do not use the wrong DTD. When IE6 enters quirks mode, it uses the IE5 rendering model.

sane with Gecko, it has quirks modes as well.

mikmik wrote:

I will give you that Gecko is slightly more compliant, but I have faced some incredibly weird effects with firefox that defy common sense.
Try floating a div right with x amount of content, in a container that has less height due to its content.
http://www.goldner-stern.de

I am not sure what you are showing me here, but in both browsers, the image overhangs its containing div, and even when it is contained in the 'starlogo' class.

mikmik wrote:
I have also had a float-left float-right header with content in the middle. Plenty of room at 1024, just enough in 800 - supposedly.
An URL?

I will look for it in my back-ups, but I didn't keep it intact - so I may have to reproduce it.

mikmik wrote:

And what's with the borders around image links?

Yeah, what's with that? There is NO specification for default UA behavior, AFAIK. What exactly is your problem?

Yeah, what IS with that? I made a picture to show you how it USED to look LMAO! I stopped using borders for links but don't have to - I didn't realize ;]
Glad you pointed this out, I must look stupid on a couple of other places, including sitepoint *embarassed*

Quote:
IE has been the one with standards compliance,
????? IE standard, or what?

You are right, I meant that they supported CSS1, however little or good, before others many moons ago. So I read on that blog ;]

Let me gather these up into one:

Quote:
me:and you can DO way more with it.
Thanks to non-standard proprietary behavior ...
That's what I mean, and there is better DOM scripting as well - SO I HAVE HEARD!! I stand to be very corrected on this one. But it seems that javascript written for Netscape usually works fine in IE, but the reverse is not true
Quote:
me:I like coloured scroll bars, and Gecko don't do that.
Non-standard.
Quote:
me:I like transitions in menus
Non-standard.
Quote:
I like filters etc.
me:Non-standard.
What you are proposing here is to go back to the browser wars of the late 90ies.
They ended?
Quote:
me: Fine, png transparency is a CSS standard.
No. PNG is a graphic format, has nothing to do with CSS ot HTML. Support is purely on the browser side.

Yikes! I didn't know that, but I am talking about browser support in all the above to point out the advantages I see in IE that isn't (much - getting better) allowed in FF. I know this has beewn due to security and MS activeX propriety, I believe. But there you have it, those observations were off-topic.

Okay, here is the GRANDE FINALE, My demo of the 'float right' bug, and the even wierder behavior when integrated into html documents.
I tried to cover all the uses. You can see that IE kicks gecko butt on this one.
Usually it is the other way around when there is a discrepency, but just to keep people honest!
browser demo

[johreiki]

Originally Posted by faglork

Look here:
http://hsivonen.iki.fi/doctype/

Thanks VERY much for this! I've been experimenting with various options from it, and it seems that Quirks mode is definitely necessary for firefox to display the pop-up menu -- so I'm now using <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">. None of the XHTML declarations puts the page in Quirks mode, therefore the menu does not display.

Originally Posted by faglork

The problem is somewhere else. If you cannot even FTP the file, you have a completely different problem.

Thanks. I still haven't figured that one out; and I now see that I cannot use a 4.01 Transitional with URL anyway, because it triggers Almost Standards mode, which does not allow the menu to display.

Originally Posted by faglork

Au contraire. Design, by definition, is working under constraints. Has ever been, will ever be. Ever heard of CCS Zen Garden?

The name does sound faintly familiar; thanks, I'll check it out.

Originally Posted by faglork

In which world do you live?? Never even heard of WAI, Section 508 and all that stuff??

I must admit, the answer is No....

Originally Posted by faglork

Ok, I give you just one reason. I use a 21" monitor to make working in several windows a bit easier. So my screen resolution is 1280xsomething. This makes the text so small that I can't read it - so I simply switch to a bigger font size. Now, you do not expect me to change my screen resolution just to read your website, do you? I simply go to another website, your competition is just a click away.

Now, this real-world scenario (it happens right now on the machine where I am writing this) is a bit flawed, because I have comparable good eyesight (though it has been getting worse in the last years). But is it really so hard for you to imagine visitors with poor eyesight who just HAVE to use bigger fonts in order to read a text? I cannot confirm it, but AFAIK about 20% of all surfers have impaired vision. If you want to neglect them, go ahead ...

On a different level, on a site which covers topics of healing and helping people, don't you think it is somewhat contradictory to deliberately make it harder for disabled people?

OUCH!!! I think that's a wee bit of an overstatement....but I do get your point. As I mentioned previously, large headers are generally the only things I set a "fixed" font-size on; I certainly understand that some people need larger text than others, and some people seem to like very small text -- so I'm very conscious of making my text generally resizeable.

But here's an example where you may be able to see some glimmer of sense in my point of view: One of my pages had a 3-word heading, each word positioned relatively to the others. The largest word was in 180px font, the other 2 were slightly smaller. Naturally, firefox made a total disaster of this....and I've now replaced the text with a similar image; could not make it look the same, however, because my graphics program does not make text larger than 72pt. So now we have the rather bizarre situation -- thanks to firefox -- of people having to make do with 72pt font, when before it was 180px!! In either case, I'm pretty sure that even those of you (all 10 or 12 : ^ ) using a 1280-width screen will be able to read the text in question.

I can see this whole issue from 2 viewpoints: Do we rely on the people making websites to be thoughtful enough to make their text resizeable -- and, as you point out, if they are not, then people may go to other sites until these folks get the message -- or do we curtail the available design options by forcing all text everywhere to be resizeable, in effect saying, "Big Brother has decided that website-makers cannot be trusted to use this particular bit of common sense, therefore we'll have to put the handcuffs on you!"

Originally Posted by faglork

You confuse WAI and W3C.

Again, that's news to me! When I go to http://validator.w3.org/ , and the title of the page is "The W3C Markup Validation Service", and I enter the URL of the page to be validated, and the resulting page tells me, "This Page Is Valid HTML 4.01 (for example) Transitional!" -- or "Congratulations! This document validates as CSS!" -- and I'm presented with the code for adding to my page an image that shows "W3C HTML4.01" or "W3C CSS"....then I sort of get the idea that the W3C is declaring my page valid, according to its own standards....

Originally Posted by faglork

You confuse HTML attributes and CSS inline declarations - these are entirely different things. You do *not* use an HTML attribute on your page.

In any case, whether as a CSS inline declaration or on a CSS stylesheet, the W3C Validation Service declares this to be valid code!

Originally Posted by faglork

If you rewrite your style declaration to
<hr style="border: 1px solid #f00;">
it will work.

Again, thanks very much!! I do apologize for being such a Neanderthal about all this. I appreciate your time and effort in helping me learn.

_||_
db

[mikmik]

johreiki, have a look at this
Dithered.com CSS Filters

A Note On Validation

The W3C validator may reject code that appears to follow the letter of the emerging CSS3 standards. In such cases, I've assumed that the filter is valid CSS. In the summary tables, the background color of the CSS Version column indicates whether each filter passes the W3 validator or not (green = validates; red = doesn't) so that you can stick to filters that have been given this official seal of approval (I've removed all the obviously non-valid hacks to their own section).

Saves a person a lifetime of frustration LMAO
----------------------------------
This site is beautiful, and lists all the selectors, properties, and within attributes (partial support), what values for the property work.

Browser Support
Table of Contents
In this section you will find browser support information for all of CSS1 and CSS2. We've divided the specification into a number of logical parts, which are listed below with their contents.

Browsers tested
Our tables have browser support information for

Internet Explorer 4 for Windows
Internet Explorer 5 for Windows
Internet Explorer 5.5 for Windows
Internet Explorer 6 for Windows
Internet Explorer 4 for Macintosh
Internet Explorer 5 for Macintosh
Netscape Navigator 4 (all platforms)
Netscape Navigator 6 (all platforms)
Netscape Navigator 7 (all platforms)
Opera 3.5 (all platforms)
Opera 5 (all platforms)
Opera 7 (all platforms)

I myself pretty much shy away from doctype switching.

One more point, that johreiki makes, and I agree.
One of the specifications of CSS is fixed font sizes, and whether it is admireable or not, it takes control out of the designers hands in Gecko to make everything resizeable. That is in violation of the standards, plain and simple.

The WWW is about sharing information, of course. It is much, much , much more than that, and by taking control away from designers thus inhibits creativity in certain directions - important directions.

I am all for appealing to many people, but I am all for freedom to say what you will; freedom of speech.
I dislike tactics that force one party to plan for another at the expense of 'interests' of another group. If their 'interests' do not co-incide with our message we are delivering, they are perfectly free to go elsewhere to sites that value the 'interested' party.

People with sub-par eyesight can set their monitor resolutions accordingly without having to destroy a layout the way it was intended. They can wear glasses.

What next, you going to mandate large text sizes in printed media, ie. books? It is ludicrous to expect to please a majority of people in many situations, let alone please ALL MINORITY interests.

If that is what you want to do, fine. I try to, but I don't necessarily want tables thrashed just because someone has their monitor resolution set so that they cannot read a majority of the WWW. People have to take some responsibility, take some initiative, to look after themselves.

If you have your monitor set so that you can't read default font size, then you can't see graphics properly either. what, you going to force resizeable graphics to the point they blur, pixelate, and destroy their beauty?

I use my monitor at 1600x1200 on a 17 in display. I like that a lot so I can see more at once, and resize my 'viewport' to accomodate different layouts and formats (for ex. news v panorama, long v wide but short), and especially for coding. Sometimes I change to 1200 x 900, or 1024 x 768. I can handle every situation myself.

I love standards. They keep us able to communicate understandably and avoid chaos and confusion and misinterpretation. I don't like to alienate people.

But I sure as hell don't expect every website to be perfectly readable to me when I can change my monitor resolution at the click of my mouse or keyboard.

And for text readers and small viewscreens, if search spiders can ignore semantic markup, then so can text readers and browsers. I can go on any 'spider simulator' and see my website with only the relevent text, and not see the script and comments and layout and processor intstructions.

PS, I am becoming very nearsighted. Are you people supposed to take care of me?

Then there is flash LMAO. The wave of the not very distant future. :O)))

[speed]

Originally Posted by mikmik

Okay, here is the GRANDE FINALE, My demo of the 'float right' bug, and the even wierder behavior when integrated into html documents.
I tried to cover all the uses. You can see that IE kicks gecko butt on this one.
Usually it is the other way around when there is a discrepency, but just to keep people honest!
browser demo

Not sure what you're trying to show here mikmik but you've floated blocks which has taken them out of the normal document flow and hence you get things in funny locations.

It's an easy fix you just need to insert <div style="clear: both"></div> at the appropriate points, I've actually used a class called 'clear' in the fixed version.

Depending on your layout you can hide the clears in other classes so as not to increase your code size, but I didn't want to change your code too much.

With #headerheight you defined a height that was less than that required for the image so naturally something breaks, or are you saying the browser should second guess what you really wanted when you set the height to 22px?

On the question of variable font size, it's surprising how many people don't know that they can change the size of the font and have it set to smallest then complain that they can't read the text as it's too small. So while I feel variable size fonts are good, they can also make site usability worse for those that don't know how to use their browser.

[johreiki]

Just now went to validate another newly-made page (with the HTML 4.01 Transitional DTD, without URL -- which has worked fine on 2 other pages)....and got the mysterious message again:

"Sorry, I am unable to validate this document because its content type is application/octet-stream, which is not currently supported by this service. ..." etc.

I checked the page again, to be sure there was nothing wrong with the code....and then went to have another go at validating it -- but this time I accessed the validation page ( http://validator.w3.org/ ) with IE (I had been using firefox before) -- and this time it validated perfectly! Is it possible that the firefox browser is not parsing the w3.org site properly, and that is causing the inappropriate error message???

_||_
db

[speed]

Originally Posted by johreiki

Is it possible that the firefox browser is not parsing the w3.org site properly, and that is causing the inappropriate error message???

Unlikely, I use Firefox almost exclusively and I've never had a problem with W3.org, also their server talks directly to your server thus the browser isn't involved.

It's more likely you've got a problem with your server configuration.

What's the URL of the page?

[mikmik]

Hi speed! LTNS :O)

You wrote:

Not sure what you're trying to show here mikmik but you've floated blocks which has taken them out of the normal document flow and hence you get things in funny locations.

No the rules of a container enclosing a float do not allow for text to wander up out of the container, do not specify anything that should be fixed with a 'clearing' fix,- what I am trying to show is that IE renders that correctly, and Gecko makes a mess of it.

There is no excuse for anything to be out of 'the flow' and interact strangly like that. The position:absolute takes a div out of the flow and is removed from affecting anything else

The position: relative moves the element accordingly, but it's original placement and dimensions still have to be cleared by using float:right or left or the clear:right or left attributes.

In any event, all the 95% (0r just wider than is room to clear the block levels above) should not go all over the place upwards past anything as they are not the divs being floated.

And, I would like you to demonstrate using the clearing element because that doesn't work in gecko on 'float:right' containing 'containers' anyway.

No matter what the container, it should contain its content, allowing only floated images to not be contained to full height.

Firthermore, the container with the float:right elements, even if it doesn't adjust its height to containg the float, should still stop inline (ie text) elements from just rising to the top THROUGH other 100% wide divs.

There is so much wrong with float:rights that it is as bad or worse than anything I have ever seen in IE engines, ever.

Quirks mode: Mozilla bug - float

Quirks: Hovering over node when it's above an overflow:auto node
The examplepalimino web

PIE: Clearing Floats The Old Fashioned Way

Of course Opera 7 has always correctly implimented the clearing specs just like IE does (aside from bugs), and the Mac browsers are not involved either. If you are wondering how this issue can be fixed, well, it can't. Gecko and Opera are now both following the float clearing specs correctly, and IE only fails because of the faked "clearing" we are forcing upon it.

There are more bugs in IE, to be sure, and lot's of this has to do with backwards compatability and also the philosophy of "making the web user friendly" so that more people can use it to make their own webpages.

I just want to point out that, although much better than IE, gecko is far from perfect either.

And being that less than about 10% of average internet users use anything other than IE(depending where you look), it is important to get that looking good more than gecko based browsers.

That said, this has been a huge lesson for me because I realize how much I don't know about CSS and what the standards actually are.

This Quirksmode page clearly shows how many non supported properties there are in IE compared to other browsers, and it is a lot!

And bugs! IE takes the cake.

I changed my mind, by far the worst bug is the lack of min and max widths and heights in IE!

[speed]

Hi speed! LTNS :O)

I've been busy earning a crust.

The problem I have is I'm so used to working between the quirks of browsers that I forget what is and isn't a bug, I'm really only interested in the finished page. So I won't argue about this behaviour, to be honest I don't even care which browser is more compliant/bug free as I still have to support the other, heck I'm still supporting IE5 :(

And, I would like you to demonstrate using the clearing element because that doesn't work in gecko on 'float:right' containing 'containers' anyway.

I do use float: right but I think I must have been lucky as I've not had any problems with this yet. I always use a strict XHTML DOCTYPE so maybe it's not an issue in that mode?

I changed my mind, by far the worst bug is the lack of min and max widths and heights in IE!

I'd be happy with just min width.

[johreiki]

Originally Posted by speed

Unlikely, I use Firefox almost exclusively and I've never had a problem with W3.org, also their server talks directly to your server thus the browser isn't involved.

It's more likely you've got a problem with your server configuration.

What's the URL of the page?

My website server wasn't involved in the validation-testing; I uploaded the page to the W3 site from my computer. Also, it seems to me the browser IS obviously involved: the browser is what displays the web page telling me (apparently falsely) that there is a problem with my code. And firefox gives me the error page, while IE does not....

The page in question is http://johreiki.net/FunnyPage.php (maybe it will give you a chuckle : ^ )....


Thanks for the input ------
_||_
db

[johreiki]

Originally Posted by mikmik

johreiki, have a look at this
Dithered.com CSS Filters

Saves a person a lifetime of frustration LMAO

Thanks for this; it looks like something I'll need to work up to. I took a look, and found it quite overwhelming right now (the idea of using multiple, browser-specific hacks to customize the appearance in various browsers!). Also, my main concerns at the moment are the font-size issue in firefox, and its problem displaying the pop-up menu. Apparently, the font-size situation can only be addressed by re-designing some of my pages; and the menu situation, by changing all pages from XHTML1 to HTML4 (if you figure out another solution for this, please let me know!).

Originally Posted by mikmik

----------------------------------
This site is beautiful, and lists all the selectors, properties, and within attributes (partial support), what values for the property work.

It certainly is!! -- and full of great tutorials! Thanks immensely!!

Originally Posted by mikmik

I myself pretty much shy away from doctype switching.

I would certainly love to avoid it myself! I would much rather leave my pages as XHTML 1.0 (with a DTD including URL) than make them all into HTML 4.01 (with a DTD minus URL, a DTD which sends browsers into Quirks mode!) -- but this seems to be the only way to get firefox (and maybe some others) to display my pop-up menu. Even at that, firefox is now displaying the menu not only when a neutral space is clicked, but also when a link is clicked (the menu pops up at the same time the new page is opening!). Even so, I figure that will have to be good enough. I like the pop-up menu a lot; I like not having to take up space on every page for a navigation menu....

Originally Posted by mikmik

One more point, that johreiki makes, and I agree.
One of the specifications of CSS is fixed font sizes, and whether it is admireable or not, it takes control out of the designers hands in Gecko to make everything resizeable. That is in violation of the standards, plain and simple.
<snip>

THANKS FOR CONFIRMING THIS!!!

Originally Posted by mikmik

PS, I am becoming very nearsighted. Are you people supposed to take care of me?

No -- but, if we're allowed off the subject of computers for a moment, and if you don't mind a couple suggestions, you may find these helpful (you may already be doing them, but in case you aren't):

Look away from the screen every little bit; look outside, if possible, at something far away. Focus on it, then bring your focus all the way back to the tip of your nose; go back and forth with this, several times at least (maybe for a minute or so). It strengthens the eye muscles and our ability to change focus, and helps the distant vision.

Also, once in a while, it's very helpful to "palm" the eyes. Put one hand over each eye (the center of the palm directly over the eye), resting lightly there or even slightly cupped. The fingers of each hand will naturally cross at an angle, over the "third eye" (between the eyebrows). Get in a comfortable position for doing this (maybe leaning forward, with elbows on a desk or table, or reclining on the back) and "palm" the eyes as long as you like. It also helps to visualize or remember (while you're palming) the blackest black you've ever seen (if you've ever been deep underground with no light, that's a great one to remember!). This is very relaxing and revitalizing to the eyes....


Many thanks to everyone here, for all the help! ----
_||_
. db

[speed]

Originally Posted by johreiki

My website server wasn't involved in the validation-testing; I uploaded the page