By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
424,644 Members | 1,866 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 424,644 IT Pros & Developers. It's quick & easy.

FIREFOX 1.0.7 AND IE6 viewed through DATATIME: a summary REPORT

P: n/a

Ok! to avoid confusion I will start a new argument.

Thanks!!
FIREFOX 1.0.7 AND IE6 viewed through DATATIME: a summary REPORT
================================================== =============
by Pamela
Datatime Team
-----------------
Ok guys. I am back.
I have been working hard to implement all your suggestions and to
incorporate all the advice you kindly provided concerning Datatime web
export. And in particular to extract the different styles and to make
preliminary classes, in order to avoid repetitions of the same
descriptors.
- acknowledgements ----------------------------------------------------

In particular I am very grateful to the contributors:
PretLetters
Spartanicus
Bill
kchayka
Beauregard
Antoine
Robi
Arne
Niek
Rincewind
Blinky the Shark
Matt
Udo
....
(hope didn't miss anyone. Althought someone should be listed in a black

list :-))
Here is my latest result. These are 2 pages. The first one contains a
SCREENSHOT to show the original as it is in DATATIME.
And the other is the corresponding WEB OUTPUT.
Compare Firefox and IE to see differences.
The layout shown it is not intended to not make any sense.
It is just a TEST where several formatting effects are used.
ORIGINAL SCREENSHOT (bitmap):
http://cam70.sta.uniroma1.it/Technic...screenshot.htm
WEB OUTPUT (rendered with CSS2):
http://cam70.sta.uniroma1.it/Technic...tatimedemo.htm
Just for the record when your css is
validated

http://www.google.com/url?sa=D&q=htt...ss-validator/v...
you get over 5000 errors, that's not a typo that's 5000 and over 10,000
warnings, It amazes me that any browser can render such a pitifully poor
piece of coding, especially as it has to cope with 3385 html coding errors.

I have lost my previous record. But I still deserve a prize according
what
Matt Silberstein says... :-)

There are some strange warning about colors and font. Please let me
know the code changes
to eliminate them.
Your suggestions are very important for my work.
Of course, all of you are invited, if you wish, to join the board of
supporting experts of Datatime
----------------------------------------------------------------------
This time I have been working using in parallel FIREFOX end IE
to double check the rendering of the report.
In the process of reprogramming the web ouput I have made some
discoveries (i use the word subjectively), which I wish to share.
Some are just hypotheses. So, please, correct me if am wrong.
IE has the well-known issue it does not support natively the PNG
transparency. To modify this behavior it is necessary to use
a script. For the webmaster, it is matter of inserting 1 line, such as
img {behavior:url("pngbehavior.htc");}
within the <style> section. This work fine and is the official
solution suggested by IE Team. (IE7 beta corrects this behavior).
WARNING! I noticed it is very important *where* you place this line.
In fact while IE doensn't care. If you place it before
the class definitions, FIREFOX is no more able to render
the page correctly.
To be safe, place it past the class definitions.
About doctypes, I noticed that if you
use <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
instead of <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN">
there are sensible differences in the computation of the blocks.
Infact the algorithm I used to draw the boxes with HTML 4.01
Transitional does NOT
work with HTML 4.01, and a slightly different algorithm is needed.
This would suggest the box model is different.
In general, it seems FIREFOX is more strict that IE. An example was the

behavior
it has with the call to "pngbehavior.htc". Here are other 2 examples.
1.
HTML 4.01 Transitional seems to be rendered differently by
IE6 and Firefox. I have the impression that when this doctype
is used, Firefox uses a newer box model with respect to IE6,
while just some of the latest properties are not rendered.
Hence, there seems to be no way to get the same result with IE6 and
the last version of Firefox using the Transitional doctype, as the box
model
used is different.
Using DTD HTML 4.01 you can get almost exactly the same
rendering, apart some small details explained below.
2.
About encoding. If your web page is actually encoded UTF-8 and you
by chance specify another encoding, such as charset=iso-8859-1
IE seems anyway able to understand that the encoding is UTF-8,
FIREFOX instead uses what is specified. This might
cause the appearance of some strange chars at the very beginning
of the page.
In general, the impression I have got so far is that Firefox is
candidate to
be more lovable by users, especially those open source oriented, due to

some
nice features and the tabbed interface. FIREFOX is somehow more
confortable
to use for the final user. (IE is perhaps sligtly better good looking).

Firefox is unforgiven and strict as to css.
There is something strange with Firefox rendering of INSET/OUTSET.
In fact if the border size is 1 it uses for the borders the forecolor.
This is strange as it does not happen with border width > 1. IE6 does
not
have this problem.
To center I used the VALIGN, because I could not find a way with css.
(HELP!!!!!!!!!!!!)
This is very uncomfortable to maintain and requires some attention as
the cell generated by TD
automatically is shifted 2 pixels below and to the righ respect to its
container.
So to correct this behavior the absolute location of container must be
shifted
2 pixels top left. The size of the cell is different in the browsers.
Here
IE seems to be a little more consistent.
<table><td bgcolor=blue width=127px height=139px valign=middle>Austria

</td></table>
this instruction generates the following phisical box:
129x141 pixels in IE6
129x139 pixels in Firefox
Further Firefox anf IE have slightly different behavior if the TD box
il larger than
the container, IE enlarges the container also. Firefox no. But this
will not
affect us, except when the cell il smaller than its content.
------------------------------------------------------------------
So thanks to your help the Datatime web EXPORT has so far improved
sensibly.
In particular those big pages have been reduced sensibly by a
preliminary
extraction of style classes.
I still need help with vertical alignent since I feel the solution I
have use
is unelegant and ackward (althought it works).
After all, it also turns out Datatime can also be used as an effective
tool to test and
overstress browsers!! :-)
-Pamela

Oct 3 '05 #1
Share this Question
Share on Google+
14 Replies


P: n/a
ex********@libero.it wrote:
IE has the well-known issue it does not support natively the PNG
transparency. To modify this behavior it is necessary to use
a script. For the webmaster, it is matter of inserting 1 line, such as
img {behavior:url("pngbehavior.htc");}
within the <style> section. This work fine and is the official
solution suggested by IE Team. (IE7 beta corrects this behavior).
IE does support ONE transparent colour in PNGs.
WARNING! I noticed it is very important *where* you place this line.
In fact while IE doensn't care. If you place it before
the class definitions, FIREFOX is no more able to render
the page correctly.
To be safe, place it past the class definitions.
That is because the browser is supposed to ignore CSS that follows an
error, and 'behavior' is an error.
About doctypes, I noticed that if you
use <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
instead of <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN">
there are sensible differences in the computation of the blocks.
Infact the algorithm I used to draw the boxes with HTML 4.01
Transitional does NOT
work with HTML 4.01, and a slightly different algorithm is needed.
This would suggest the box model is different.
The DOCTYPEs you have cited will trigger quirks mode. You should use
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd"> instead, which will trigger
standards mode. This will eliminate various IE6 idiosyncracies.
To center I used the VALIGN, because I could not find a way with css.
(HELP!!!!!!!!!!!!)


Try the CSS vertical-align property.
Oct 3 '05 #2

P: n/a
>
IE does support ONE transparent colour in PNGs.
what are you talking about?
The DOCTYPEs you have cited will trigger quirks mode. You should use
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"


Evidently you have not been following the discussion of last week
where contributed a lot of people and this doctype was discarded.
Actually as I said, there is no way to make firefox 1.0.7 to behave
exacly like IE6 if transitional is used. Trust me.
To center I used the VALIGN, because I could not find a way with css.
(HELP!!!!!!!!!!!!)

Try the CSS vertical-align property.


This is NOT the same thing as Valign. It is respect to the line
not the box.

So do you think I have been playing the last four days? :-)

-pamela

Oct 3 '05 #3

P: n/a
ex********@libero.it wrote:
IE does support ONE transparent colour in PNGs.
what are you talking about?


Just what I said. IE supports one transparent colour in PNGs, without
resorting to the behavior hack, just like GIFs support one transparent
colour. What IE does not support (yet) is ALPHA-transparency.
The DOCTYPEs you have cited will trigger quirks mode. You should use
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"


Evidently you have not been following the discussion of last week
where contributed a lot of people and this doctype was discarded.
Actually as I said, there is no way to make firefox 1.0.7 to behave
exacly like IE6 if transitional is used. Trust me.


Evidently you do not understand the role of DOCTYPEs in triggering
either quirks mode or standards mode. In particular, you do not
understand the consequences of omitting the URL:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

is not the same as:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

The later triggers standards mode in IE6; the former does not.

You complained in your post about differences in the IE and FF box
models, but the differences you observed happened because you failed to
use a DOCTYPE that triggers standards mode in IE.
To center I used the VALIGN, because I could not find a way with css.
(HELP!!!!!!!!!!!!)


Try the CSS vertical-align property.


This is NOT the same thing as Valign. It is respect to the line
not the box.


When applied to a TD, vertical-align applies to the box. See the CSS
2.1 specification, section 17.5.3.
So do you think I have been playing the last four days? :-)


This kind of attitude will not encourage people to help you.

Oct 3 '05 #4

P: n/a
Yes I can be nasty.
But the people here already found out. :-)

I just noted that the 2 pixels of TD shift could be due to
the default value of cellspacing.
I should try if with this:
<TABLE CELLSPACING=0 >
to see if the correction is no more needed.

I was also wondering if one can use just once <table> instead of
repeating
for each cell.

Here is another test, more meaningful as report:
http://cam70.sta.uniroma1.it/Technic...ansparency.htm
showing how alpha level is rendered with ie6.

-Pamela

Oct 3 '05 #5

P: n/a
ex********@libero.it schreef:
Ok guys. I am back.
UhOh... sounds like Schwarzenegger ;-)
About doctypes, I noticed that if you
use <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
instead of <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN">
there are sensible differences in the computation of the blocks.
Infact the algorithm I used to draw the boxes with HTML 4.01
Transitional does NOT
work with HTML 4.01, and a slightly different algorithm is needed.
This would suggest the box model is different.
You really should use
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
The "http://www.w3.org/TR/html4/loose.dtd"-part tells the browser where to get the specifiation and the
'transitional'-part tells the browser how the interpret these specs.
In general, it seems FIREFOX is more strict that IE. An example was the

behavior
it has with the call to "pngbehavior.htc". Here are other 2 examples.
1.
HTML 4.01 Transitional seems to be rendered differently by
IE6 and Firefox.
Welcome to our world :-)

2.
About encoding. If your web page is actually encoded UTF-8 and you
by chance specify another encoding, such as charset=iso-8859-1
IE seems anyway able to understand that the encoding is UTF-8,
FIREFOX instead uses what is specified. This might
cause the appearance of some strange chars at the very beginning
of the page.
Firefox does what it is supposed to do, IE just assumes you mean something
To center I used the VALIGN, because I could not find a way with css.
(HELP!!!!!!!!!!!!)
Try:
margin: 0 auto;
That telles the browser the top- and bottommargin is 0 and the left and rightmargin must be calculated
automatically (so it will be centered)

This is very uncomfortable to maintain and requires some attention as
the cell generated by TD
automatically is shifted 2 pixels below and to the righ respect to its
container.
So to correct this behavior the absolute location of container must be
shifted
2 pixels top left. The size of the cell is different in the browsers.
Here
IE seems to be a little more consistent.
I don't have the time to look into that right now... but...


<table><td bgcolor=blue width=127px height=139px valign=middle>Austria

</td></table>
Why use this table-thingy? And: please quote the values, it is not an error in html 4, but in xhtml (the
newest version of html) you must do that.
Oh and: in html it is width="127", not: width="127px"
Oh and: </IMG> isn't any HTML at all, you don't have to close a img-tag (in xhtml you have to do this: <img />

this instruction generates the following phisical box:
129x141 pixels in IE6
129x139 pixels in Firefox


Further Firefox anf IE have slightly different behavior if the TD box
il larger than
the container, IE enlarges the container also. Firefox no. But this
will not
affect us, except when the cell il smaller than its content.
------------------------------------------------------------------
So thanks to your help the Datatime web EXPORT has so far improved
sensibly.
In particular those big pages have been reduced sensibly by a
preliminary
extraction of style classes.
I still need help with vertical alignent since I feel the solution I
have use
is unelegant and ackward (althought it works).
You also can try this: in the css-file:
div img{vertical-align: middle;}
place a p-tag around texts and then you can:
div p{vertical-align: middle;}

I believe that is the solution, but I do this from heart. Haven't tested it.



After all, it also turns out Datatime can also be used as an effective
tool to test and
overstress browsers!! :-)


Well I believe it is the other way around: webbrowsers are a good test for Datatime, and people called Pamela
as well :-)

--
Niek
Oct 3 '05 #6

P: n/a

UhOh... sounds like Schwarzenegger ;-)
I have a different distribution of meat...

You really should use
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
The "http://www.w3.org/TR/html4/loose.dtd"-part tells the browser where to get the specifiation and the
'transitional'-part tells the browser how the interpret these specs.
last week you guy made me change to <!DOCTYPE HTML PUBLIC "-//W3C//DTD
HTML 4.01//EN"

and i had to rewrite the export routine. Are you saing I have to change
it back?
Welcome to our world :-) i am still neutral! Try:
margin: 0 auto;
That telles the browser the top- and bottommargin is 0 and the left and rightmargin must be calculated
automatically (so it will be centered)
Remember i need any of them: top, middle, bottom
Can you suggest the general solution in terms of change to:

<table><td width=461px height=55px valign=top>Sample web report
</td></table>
This is very uncomfortable to maintain and requires some attention as
the cell generated by TD
automatically is shifted 2 pixels below and to the righ respect to its
container.
So to correct this behavior the absolute location of container must be
shifted
2 pixels top left. The size of the cell is different in the browsers.
Here
IE seems to be a little more consistent.
I don't have the time to look into that right now... but...


<table><td bgcolor=blue width=127px height=139px valign=middle>Austria

</td></table>


Why use this table-thingy? And: please quote the values, it is not an error in html 4, but in xhtml (the
newest version of html) you must do that.
Oh and: in html it is width="127", not: width="127px"
Oh and: </IMG> isn't any HTML at all, you don't have to close a img-tag (in xhtml you have to do this: <img />

Let's consider the TEXTBOX on top left of the page
http://cam70.sta.uniroma1.it/Technic...ansparency.htm
It can be considered a supercell. The cells are rendered in the same
way.

I use the following :

<DIV ID=TextBox1_bg class=c0bg
style="top:142px;left:55px;width:469px;height:63px ;"></DIV>
<DIV ID=TextBox1_fg class=c0fg style="top:146px;left:59px;"><table><td
width=461px height=55px valign=top>Sample web report
</td></table></DIV>

(take a look at the 2 stile classes, fg and bg stand for
foreground/background) so practically
I use 2 layers. One for foreground and one for background.

I do this to because more maintenable from the programming point of
view
instead of straggling with padding and borders, of a single block,
which interact
and cause the box size change.

Padding is never actually used. It is just an illusion caused by the
reciprocal position.
of the 2 layers.

Now let's concentrate on

<table><td width=461px height=55px valign=top>Sample web report
</td></table>

this seems ackward. The only reason I use it is to have an easy way to
get any vertical alignment.
This is the solution that so far has given the wanted precision (at
pixel level).

If anyone can provide a substitute which gives the same result but is
more elegant
i will be happy to make the change.
If you have a proposal, please show the replacement code for:
<table><td width=461px height=55px valign=top>Sample web report
</td></table>

so that I can reprogram the export function.
After all, it also turns out Datatime can also be used as an effective
tool to test and
overstress browsers!! :-)
Well I believe it is the other way around: webbrowsers are a good test for Datatime, and people called Pamela
as well :-)


Perhaps, but I am already well tested, none is unforgiving as the
compiler with which I spend
my life ...

-Pamela
--
Niek


Oct 3 '05 #7

P: n/a
expertware at libero.it wrote in message news:11**********************@f14g2000cwb.googlegr oups.com...
Yes I can be nasty.
But the people here already found out. :-)
here comes one from the blacklisted ;-)
I just noted that the 2 pixels of TD shift could be due to
the default value of cellspacing.
I should try if with this:
<TABLE CELLSPACING=0 >
to see if the correction is no more needed.

I was also wondering if one can use just once <table> instead of
repeating
for each cell.

Here is another test, more meaningful as report:
http://cam70.sta.uniroma1.it/Technic...ansparency.htm
showing how alpha level is rendered with ie6.


in FF the transparency looks (almost) ok.

Have you considered to have the image shown behind the data, and having
the data have some transparency instead?

I'm suggesting this, because neither the Austrian nor the Belgian Freight
data is visible. I'ts behind a complex of yellow through purple- and green
through pink rings which seem transparent but the bulk renders them impassable.

The other way around, the data would be sitting on top, clearly visible, while
the data background could be rendered transparent showing the graph behind.
Oct 3 '05 #8

P: n/a
Yes that could be possible.

This was just for testing so I didn't care about readibility.
I can increase image transparency (datatime as a control to adjust it)
and then the data would be visible.

The other way round is more difficult because the report is not
rendered
as image. In such a case I guess that one should work with css opacity
but I think it is only for background not fot the text (right??)

A feature I could introduce is the possibility to convert the report
into
a bitmap. This way the rasterized image could processed to introduce
transparency.

I am not sure that this is a feature anyone can desire from Datatime,
as I guess
that in general the rasterized image could be too heavy.

But, actually I don't know, if you were users of datatime would you
like this feature?

It is not eccessively difficult to program. It should take a couple
days, i am just a little concerned
about the size of the raster picture...

-pamela

PS
moving to the white list ...

Oct 3 '05 #9

P: n/a

Dear Niek

i am doing the changes you suggested but:

if I use quotes for values:
<table><td width=273px height=13px
valign=middle>"SHIPADDRESS"</td></table></DIV>

they appear on the web page.

If I remove all "px" the whole report disappear!!

Am I missing something? Do I have to declare somewhere
I am referring to xhtml?

-Pamela

Oct 3 '05 #10

P: n/a
ex********@libero.it schreef:
Dear Niek

i am doing the changes you suggested but:

if I use quotes for values:
<table><td width=273px height=13px
valign=middle>"SHIPADDRESS"</td></table></DIV>

they appear on the web page.

If I remove all "px" the whole report disappear!!

Am I missing something? Do I have to declare somewhere
I am referring to xhtml?

-Pamela


Oke, I'm back online.

I meant this:
<table><td width="273" height="13"
valign="middle">SHIPADDRESS</td></table>

I will look into your other post, hang on...
--
Niek
Oct 3 '05 #11

P: n/a

I will be back tomorrow morning

Pamela

Oct 3 '05 #12

P: n/a
ex********@libero.it schreef:
UhOh... sounds like Schwarzenegger ;-)

I have a different distribution of meat...


That's a 100% legit example of geek-talk! :-)
Remember i need any of them: top, middle, bottom
Can you suggest the general solution in terms of change to:

<table><td width=461px height=55px valign=top>Sample web report
</td></table>
~snip~
Let's consider the TEXTBOX on top left of the page
http://cam70.sta.uniroma1.it/Technic...ansparency.htm
It can be considered a supercell. The cells are rendered in the same
way.

I use the following :

<DIV ID=TextBox1_bg class=c0bg
style="top:142px;left:55px;width:469px;height:63px ;"></DIV>
<DIV ID=TextBox1_fg class=c0fg style="top:146px;left:59px;"><table><td
width=461px height=55px valign=top>Sample web report
</td></table></DIV>

(take a look at the 2 stile classes, fg and bg stand for
foreground/background) so practically
I use 2 layers. One for foreground and one for background.

I do this to because more maintenable from the programming point of
view
instead of straggling with padding and borders, of a single block,
which interact
and cause the box size change.

Padding is never actually used. It is just an illusion caused by the
reciprocal position.
of the 2 layers.

Now let's concentrate on

<table><td width=461px height=55px valign=top>Sample web report
</td></table>

this seems ackward. The only reason I use it is to have an easy way to
get any vertical alignment.
This is the solution that so far has given the wanted precision (at
pixel level).

If anyone can provide a substitute which gives the same result but is
more elegant
i will be happy to make the change.
If you have a proposal, please show the replacement code for:
<table><td width=461px height=55px valign=top>Sample web report
</td></table>

so that I can reprogram the export function.


oke, now I know what you need.
A few threads erlier in this newsgroup ('Help with vertical align in
css' on september 26th) the same problem was posted.

In a reply the following URL was posted:
http://www.student.oulu.fi/~laurirai/www/css/middle/

It is about vertical alligning, check it out.

So, look at my study at:
http://members.home.nl/n.emmen/misc/...ansparency.htm
you can see how it is implemented in your code.

However: I just cannot find a solution for vertical aligning it to the
bottom.

My eyes are getting square now, so I leave it to this for the moment.
Maybe someone else can pitch in?

--
Niek
Oct 3 '05 #13

P: n/a
in comp.infosystems.www.authoring.stylesheets, 'sNiek wrote:
However: I just cannot find a solution for vertical aligning it to the
bottom.


Easy, as long as you know how tall your container and content is. Hard,
if you don't and it needs to work in IE, but there is some workarounds
that work sometimes. I think there is just as many tricks to bottom align
as to center align. I don't have time to write page about it, but maybe
if you have well done specific question with URL and real content...
--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
Oct 5 '05 #14

P: n/a
Lauri Raittila schreef:
in comp.infosystems.www.authoring.stylesheets, 'sNiek wrote:

However: I just cannot find a solution for vertical aligning it to the
bottom.

Easy, as long as you know how tall your container and content is. Hard,
if you don't and it needs to work in IE, but there is some workarounds
that work sometimes. I think there is just as many tricks to bottom align
as to center align. I don't have time to write page about it, but maybe
if you have well done specific question with URL and real content...

Quite simple, the URL was in my post: do you take up the glove?
http://members.home.nl/n.emmen/misc/...ansparency.htm

--
Niek
Oct 5 '05 #15

This discussion thread is closed

Replies have been disabled for this discussion.