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

IE and Opera (mostly opera) and float style

P: n/a
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?
Jul 20 '05 #1
Share this Question
Share on Google+
13 Replies


P: n/a
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.
Jul 20 '05 #2

P: n/a
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ä
Jul 20 '05 #3

P: n/a
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.
Jul 20 '05 #4

P: n/a
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
Jul 20 '05 #5

P: n/a
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.height = "400px" /*parseInt(toclose.style.heig...*/
toopen.style.height = "400px" /*parseInt(toopen.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ä
Jul 20 '05 #6

P: n/a
TheKeith <no@spam.com> 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:700px; 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:150px; margin-top:30px; margin-left:70px;
border:solid 1px #455FA5; padding:10px; float:left">
Hello
</div>
<div style="width:370px; 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/>
Jul 20 '05 #7

P: n/a
In article Steve Pugh wrote:
TheKeith <no@spam.com> 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ä
Jul 20 '05 #8

P: n/a
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.height = "400px" /*parseInt(toclose.style.heig...*/
toopen.style.height = "400px" /*parseInt(toopen.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.
Jul 20 '05 #9

P: n/a
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ä
Jul 20 '05 #10

P: n/a
On Mon, 03 May 2004 14:06:39 -0400, TheKeith <no@spam.com> wrote:
Is it just me


It's just you.
Jul 20 '05 #11

P: n/a
On Tue, 4 May 2004 01:52:09 +0300, Lauri Raittila <la***@raittila.cjb.net>
wrote:
Only
reliable way to calculate height of text is to use em unit.
And if there's the possibility of wrapping, that's not even reliable.
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.)


Probably one thing most authors neglect is that the viewing font size
might be nothing like you expect. So plan for anything.
Jul 20 '05 #12

P: n/a
TheKeith <no@spam.com> wrote:
Is it just me or does opera and ie not render the float style properly?
Opera is the only browser that renders floats correctly. IE is pretty
good, it has some bugs that are known and described in detail on
various CSS oriented websites. Mozilla is completely useless with
regard to floats, it more or less just draws boxes at random.

IE does a sucky job at it, but opera makes a total mess; Mozilla/Firefox
renders it correctly however.
An effective troll requires a certain subtlety that you are lacking.
Practise in the M$ newsgroups, perhaps?

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.
Why would you "figure" a thing like that? Don't you know that HTML
parsers are non-validating systems and don't change one iota whatever
document type declaration you include?

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.
You want to know, or you want the rest of us to know that you:-
1) don't know how floats are supposed to work and:
2) are ignorantly assuming that Mozilla is always correct?

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


1,798,287 people actually use opera when testing their pages.
236,058 people have given up on it.

--
Be alert, but not alarmed.
Jul 20 '05 #13

P: n/a
Karl Smith wrote:
Opera is the only browser that renders floats correctly.
So it seems.
IE is pretty good, it has some bugs that are known and described in
detail on various CSS oriented websites. Mozilla is completely
useless with regard to floats, it more or less just draws boxes at
random.
I think it fair to say you've overstated your case a tad. For one thing,
IE float bugs often create unreadable pages. Not what I'd call "pretty
good." (I'm not sure why you have a ax to grind with Mozilla.)
IE does a sucky job at it, but opera makes a total mess;
Mozilla/Firefox renders it correctly however.


An effective troll requires a certain subtlety that you are lacking.
Practise in the M$ newsgroups, perhaps?


:-D
Don't you know that HTML parsers are non-validating systems and don't
change one iota whatever document type declaration you include?


<ahem> Heard of doctype switching?

--
Brian (remove "invalid" from my address to email me)
http://www.tsmchughs.com/
Jul 20 '05 #14

This discussion thread is closed

Replies have been disabled for this discussion.