IE and Opera (mostly opera) and float style

[TheKeith]

Is it just me or does opera and ie not render the float style properly?
IE does a sucky job at it, but opera makes a total mess; Mozilla/Firefox
renders it correctly however. I'm just trying to be a good boy following
the html 4.01 strict spec, and taking it a step further by not using
tables for layout, but it's becoming a real pain. You would figure
putting a strict doctype declaration at the top of the page would create
a uniformity in the way the parsers parse, but no. I'm not gonna waste
your time by describing my exact problem--I just want to know that opera
and ie don't work right with float.

BTW, how many of you actually use opera when testing your pages? Have
any of you given up on it?

[Beauregard T. Shagnasty]

Quoth the raven named TheKeith:

Is it just me or does opera and ie not render the float style
properly? IE does a sucky job at it, but opera makes a total mess;
Mozilla/Firefox renders it correctly however. I'm just trying to be
a good boy following the html 4.01 strict spec, and taking it a
step further by not using tables for layout, but it's becoming a
real pain. You would figure putting a strict doctype declaration at
the top of the page would create a uniformity in the way the
parsers parse, but no. I'm not gonna waste your time by describing
my exact problem--I just want to know that opera and ie don't work
right with float.
If you would post the URL, someone could likely determine what is
wrong with the page.
BTW, how many of you actually use opera when testing your pages?
Have any of you given up on it?

I find Opera to be quite good as a browser. Yes, I use it all the time
for testing, and sometimes mainstream browsing, after Firefox.

--
-bts
-This space intentionally left blank.

[Lauri Raittila]

In article TheKeith wrote:

Is it just me or does opera and ie not render the float style properly?
Opera renders floats best AFAIK. That has been problem many times. People
thinking that IE or Mozilla does better job, when in reality, they break
standard. OTOH, there is something in floats that Opera handles buggy,
all other has something as well, and AFAIK both IE and Gecko has the same
bug as Opera.
IE does a sucky job at it, but opera makes a total mess; Mozilla/Firefox
renders it correctly however. I'm just trying to be a good boy following
the html 4.01 strict spec, and taking it a step further by not using
tables for layout, but it's becoming a real pain.
Sounds like you are doing something strange, or making mistakes.
You would figure
putting a strict doctype declaration at the top of the page would create
a uniformity in the way the parsers parse, but no. I'm not gonna waste
your time by describing my exact problem--I just want to know that opera
and ie don't work right with float.
So, you are just stating something without any proof. Most likely because
you have no proof. It is also impossible to prove you wrong as you don't
have any argument. OTOH, it is also impossible to prove that you are
right also.

So, question is, why make this post in first place. Especially as all you
needed to do was posting URL of example page you have.
BTW, how many of you actually use opera when testing your pages?
Usually there is no need to test in Opera as it does by spec, so results
are what you expect. Of course I use Opera as my main browser, as it is
by far best browser available. (Well, their userbase is growing, even if
it is only that you can buy among top ten browsers)
Have any of you given up on it?

No. It has best support for current CSS standards in browsers, and HTML
support is far better than IE's. I don't know which browser does best on
HTML.
--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
I'm looking for work | Etsin työtä

[TheKeith]

Lauri Raittila wrote:

In article TheKeith wrote:

Is it just me or does opera and ie not render the float style properly?

Opera renders floats best AFAIK. That has been problem many times. People
thinking that IE or Mozilla does better job, when in reality, they break
standard. OTOH, there is something in floats that Opera handles buggy,
all other has something as well, and AFAIK both IE and Gecko has the same
bug as Opera.

IE does a sucky job at it, but opera makes a total mess; Mozilla/Firefox
renders it correctly however. I'm just trying to be a good boy following
the html 4.01 strict spec, and taking it a step further by not using
tables for layout, but it's becoming a real pain.

Sounds like you are doing something strange, or making mistakes.

You would figure
putting a strict doctype declaration at the top of the page would create
a uniformity in the way the parsers parse, but no. I'm not gonna waste
your time by describing my exact problem--I just want to know that opera
and ie don't work right with float.

So, you are just stating something without any proof. Most likely because
you have no proof. It is also impossible to prove you wrong as you don't
have any argument. OTOH, it is also impossible to prove that you are
right also.

So, question is, why make this post in first place. Especially as all you
needed to do was posting URL of example page you have.

BTW, how many of you actually use opera when testing your pages?

Usually there is no need to test in Opera as it does by spec, so results
are what you expect. Of course I use Opera as my main browser, as it is
by far best browser available. (Well, their userbase is growing, even if
it is only that you can buy among top ten browsers)

Have any of you given up on it?

No. It has best support for current CSS standards in browsers, and HTML
support is far better than IE's. I don't know which browser does best on
HTML.

well, I would have posted the url except that the page is very large
with lot of javascript and you probably won't want to sort through it to
see the problem but I'll post it anyway:

buggy float:left version: http://keithpetrino.com/about/index2.html
non float table version: http://keithpetrino.com/about/index.html

the problem is with the last section on the bottom. I have two main divs
that must be side by side. You can see what opera does, and how
firefix does it correctly. IE just screws it up a little. Help would be
apreciated--thanks.

[Andrew Thompson]

On Mon, 03 May 2004 14:06:39 -0400, TheKeith wrote:

I'm not gonna waste
your time by describing my exact problem..

Or providing the URL, I notice..

--
Andrew Thompson
http://www.PhySci.org/ Open-source software suite
http://www.PhySci.org/codes/ Web & IT Help
http://www.1point1C.org/ Science & Technology

[Lauri Raittila]

In article TheKeith wrote:

Lauri Raittila wrote:

So, question is, why make this post in first place. Especially as all you
needed to do was posting URL of example page you have.

well, I would have posted the url except that the page is very large
with lot of javascript and you probably won't want to sort through it to
see the problem but I'll post it anyway:
OK. I understand now. You have used so unclear code that nobody,
including you, can't really read it. Ever thought about using external
CSS? Saves huge amount of trouble. Anyway, I managed to find out
1. No new bugs on floats on Opera
2. There's bug in JS on Opera, don't know if it's known
3. There is bug on inline-block in Opera that I haven't seen before
conserning floats and inline-block.
buggy float:left version: http://keithpetrino.com/about/index2.html
non float table version: http://keithpetrino.com/about/index.html
the problem is with the last section on the bottom. I have two main divs
that must be side by side.
To cure problem, I added display:block to a element containing "F R E E L
A N C E J O B P R I C E E S T I M A T E" (wrapping a element to div
has same effect), and float:left to div just before form named
estimate_form. (display:inline-table works also, and inline-block would
if it was not buggy. I suppose there must have been float:left here some
point, as it doesn't make sence otherwise - otoh IIRC at least IE has bug
that makes div act as it was inline-block in situations like this. You
could also use bigger margin.)

The reason this happens is that correct behaviour is to make floats top
corner be on same place as inline-boxes top edge (known Mozilla bug, seen
it in bugzilla). As second float will be on next line, it will go one
line down.

This only, when I make JS to not change size of above elements when
opening the bottom one, it seems to do something strange when using JS
the way you do. I changed lines 28 and 29:
toclose.style.h eight = "400px" /*parseInt(toclo se.style.heig.. .*/
toopen.style.he ight = "400px" /*parseInt(toope n.style.height. ..*/

As I haven't done any major JS stuff since NN4.08, I can't really help
you after that. Using Opera 7.5beta1. There certainly seems to be some JS
problem, at least on this build. It's unfortunate that JS in Opera is not
as robust as CSS.
You can see what opera does, and how
firefix does it correctly. IE just screws it up a little. Help would be
apreciated--thanks.

Hope this helps. BTW, your design sucks big time, as you use px unit
everywhere. Your page did not look good on any size window I normally
use. You should make it work whiout JS. Also IMHO you should use alpha
transparent pngs instead of grid gifs for browsers that support them.

--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
I'm looking for work | Etsin työtä

[Steve Pugh]

TheKeith <[e-mail]> wrote:

well, I would have posted the url except that the page is very large
with lot of javascript and you probably won't want to sort through it to
see the problem but I'll post it anyway:
So why didn't you post a minimal test case?
buggy float:left version: http://keithpetrino.com/about/index2.html
non float table version: http://keithpetrino.com/about/index.html

the problem is with the last section on the bottom.
Which for anyone who doesn't want to waste time figuring it out means
clicking on the thing that looks like a link at the bottom. I didn't
think of doing that because I presumed that a link would take me to a
different page and that if the problem was on a different page you
would have posted the URL to that page. (What's wrong with making it
three pages?)
I have two main divs
that must be side by side. You can see what opera does, and how
firefix does it correctly. IE just screws it up a little.

Opera gets it mostly right and IE screws it up a lot.

Your code boils down to this (one extra border added for clarity):

<div style="width:70 0px; padding:5px; overflow:hidden ; border: 1px
solid red;">F R E E L A N C E &nbsp; J O B &nbsp; P R I C E &nbsp; E S
T I M A T E
<div style="width:15 0px; margin-top:30px; margin-left:70px;
border:solid 1px #455FA5; padding:10px; float:left">
Hello
</div>
<div style="width:37 0px; height:300px; margin-top:30px;
margin-left:10px; border:solid 1px #455FA5; overflow:auto">
Hello Again
</div>
</div>

The two divs are correctly placed - the second div should NOT start
after the right hand edge of the floated div (as IE wrongly does) but
it's content should start there - which it does in Opera.

What I can't work out is why the text at the top isn't left aligned.

BTW you seem to be missing some alt attributes (all those form buttons
need alt attributes) and you should have a look with a larger font
size. I have a minimum font size set and the second box in the Sbout
section cuts of the text part way through.

Steve

--
"My theories appal you, my heresies outrage you,
I never answer letters and you don't like my tie." - The Doctor

Steve Pugh <st***@pugh.net > <http://steve.pugh.net/>

[Lauri Raittila]

In article Steve Pugh wrote:

TheKeith <[e-mail]> wrote:

well, I would have posted the url except that the page is very large
with lot of javascript and you probably won't want to sort through it to
see the problem but I'll post it anyway:
So why didn't you post a minimal test case?

Because it would be pain to do, as his code is so ugly?

buggy float:left version: http://keithpetrino.com/about/index2.html
the problem is with the last section on the bottom.

(What's wrong with making it three pages?)

The ugly animation between them?
What I can't work out is why the text at the top isn't left aligned.

Because float is on same line as text, and on left. As float margins are
part of float, it seems as if text would not be left aligned, even if it
is, and moved to right to make space for floated element. It was
discussed troughly here sometime back, but in this case it was bit hard
to spot.

--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
I'm looking for work | Etsin työtä

[TheKeith]

Lauri Raittila wrote:

In article TheKeith wrote:

Lauri Raittila wrote:

So, question is, why make this post in first place. Especially as all you
needed to do was posting URL of example page you have.

well, I would have posted the url except that the page is very large
with lot of javascript and you probably won't want to sort through it to
see the problem but I'll post it anyway:

OK. I understand now. You have used so unclear code that nobody,
including you, can't really read it. Ever thought about using external
CSS? Saves huge amount of trouble. Anyway, I managed to find out
1. No new bugs on floats on Opera
2. There's bug in JS on Opera, don't know if it's known
3. There is bug on inline-block in Opera that I haven't seen before
conserning floats and inline-block.

buggy float:left version: http://keithpetrino.com/about/index2.html
non float table version: http://keithpetrino.com/about/index.html
the problem is with the last section on the bottom. I have two main divs
that must be side by side.

To cure problem, I added display:block to a element containing "F R E E L
A N C E J O B P R I C E E S T I M A T E" (wrapping a element to div
has same effect), and float:left to div just before form named
estimate_form. (display:inline-table works also, and inline-block would
if it was not buggy. I suppose there must have been float:left here some
point, as it doesn't make sence otherwise - otoh IIRC at least IE has bug
that makes div act as it was inline-block in situations like this. You
could also use bigger margin.)

The reason this happens is that correct behaviour is to make floats top
corner be on same place as inline-boxes top edge (known Mozilla bug, seen
it in bugzilla). As second float will be on next line, it will go one
line down.

This only, when I make JS to not change size of above elements when
opening the bottom one, it seems to do something strange when using JS
the way you do. I changed lines 28 and 29:
toclose.style.h eight = "400px" /*parseInt(toclo se.style.heig.. .*/
toopen.style.he ight = "400px" /*parseInt(toope n.style.height. ..*/

As I haven't done any major JS stuff since NN4.08, I can't really help
you after that. Using Opera 7.5beta1. There certainly seems to be some JS
problem, at least on this build. It's unfortunate that JS in Opera is not
as robust as CSS.

You can see what opera does, and how
firefix does it correctly. IE just screws it up a little. Help would be
apreciated--thanks.

Hope this helps. BTW, your design sucks big time, as you use px unit
everywhere. Your page did not look good on any size window I normally
use. You should make it work whiout JS. Also IMHO you should use alpha
transparent pngs instead of grid gifs for browsers that support them.

thanks for your help. You prefaced a paragraph by saying "to cure
problem"--I was wondering if that meant you solved it or if you
attempted to do so? Either way, I'll look into the display style, which
I haven't before.

As for the javascript, I really don't think the script has much of an
impact on anything--since the only style-related js I wrote simply
manipulates the height style. I can't make that modifcation you
suggested since this bit of script uses setInterval to animate the
height adjustment--height must be incremented with each interval.

BTW, what's wrong with my use of "px"? Also, I'll definately look into
the transparent png's--thanks for the tip.

[Lauri Raittila]

TheKeith wrote:

Lauri Raittila wrote:

TheKeith wrote:

buggy float:left version: http://keithpetrino.com/about/index2.html
non float table version: http://keithpetrino.com/about/index.html
the problem is with the last section on the bottom. I have two main divs
that must be side by side.

To cure problem, I added display:block to a element and float:left to div

thanks for your help. You prefaced a paragraph by saying "to cure
problem"--I was wondering if that meant you solved it or if you
attempted to do so? Either way, I'll look into the display style, which
I haven't before.
I solved the problem with floats, but found another related to
Javascript. The problem with JS was cured by code change in JS, but
obviously that don't help much, as JS would be useless after change.
As for the javascript, I really don't think the script has much of an
impact on anything--since the only style-related js I wrote simply
manipulates the height style. I can't make that modifcation you
suggested since this bit of script uses setInterval to animate the
height adjustment--height must be incremented with each interval.
I know. But as I don't know JS, I can't make better suggestions.
BTW, what's wrong with my use of "px"?

Not all use, but you are counting quite much on height of elements. Only
reliable way to calculate height of text is to use em unit.

It doesn't scale with font size. So many times, your layout will break if
user uses different font size you planned. (what you set fontsize to be
has no relevance, people can override it, and if they can't, that is
bigger problem.)

--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
I'm looking for work | Etsin työtä