http://digitalrat.co.uk/test/index.html
I float a div left in body prior to a div with top margin set. I
expected the float to rise to the top of body, but instead in Firefox &
Opera its top won't go above the top border of the following div (In IE
it does go right up).
Is this correct behaviour?
Unless I'm missing something, this appears to be a case of CSS
specifying floats should go as high as possible, without clearly
defining what this means (Eric Meyer gives a warning about this on p284
of 2nd ed of CSS The Def Guide).
Am I in error, the browsers or the CSS spec?
BTW I can workaround this by putting the spacing onto body padding &
removing the 2nd div's margin; I just wanted to understand what's going on.
Cheers,
--
Michael
m r o z a t u k g a t e w a y d o t n e t 12 2390
Michael Rozdoba <mr**@nowhere.i nvalid> wrote: http://digitalrat.co.uk/test/index.html
I float a div left in body prior to a div with top margin set. I expected the float to rise to the top of body, but instead in Firefox & Opera its top won't go above the top border of the following div (In IE it does go right up).
Is this correct behaviour?
Unless I'm missing something, this appears to be a case of CSS specifying floats should go as high as possible, without clearly defining what this means (Eric Meyer gives a warning about this on p284 of 2nd ed of CSS The Def Guide).
Am I in error, the browsers or the CSS spec?
BTW I can workaround this by putting the spacing onto body padding & removing the 2nd div's margin; I just wanted to understand what's going on.
What you are seeing is collapsing margins, e.g. setting a 1px padding on
the body will prevent the margins from collapsing.
--
Spartanicus
Spartanicus wrote: What you are seeing is collapsing margins, e.g. setting a 1px padding on the body will prevent the margins from collapsing.
Not sure I follow; probably my error.
There's no margin on the floated div & no padding on the container
(body), so I would expect the div to rise to the top. Except in Firefox
& Opera it doesn't - it only gets as high as the border of the static
div which follows it (that intentionally is positioned lower with a top
margin).
--
Michael
m r o z a t u k g a t e w a y d o t n e t
Michael Rozdoba <mr**@nowhere.i nvalid> writes: Spartanicus wrote:
What you are seeing is collapsing margins, e.g. setting a 1px padding on the body will prevent the margins from collapsing.
Not sure I follow; probably my error.
There's no margin on the floated div & no padding on the container (body), so I would expect the div to rise to the top.
I wouldn't. Ignoring the definitions for a moment, what one
would generally want of a floating item is that it appears
close to the point in the text where it appears in the
source. For example, if you have a picture that illustrates
an idea mentioned half way down a long diatribe, you would
want the float to appear at the left (or right) close to the
idea, not float all the way to the top of the page.
The informal description in CSS21 supports this view (9.5):
A floated box is shifted to the left or right until its
outer edge touches the containing block edge or the outer
edge of another float. If there's a line box, the top of
the floated box is aligned with the top of the current
line box.
Note that it refers to a line box, not containing block.
Again, in 9.5.1
6 The outer top of an element's floating box may not be
higher than the top of any line-box containing a box
generated by an element earlier in the source document.
I think the later text in 9.5.1 causes the confusion:
8 A floating box must be placed as high as possible.
because it doesn't explicitly say "... consistent with 6
above", but I'm sure that's what's intended.
--
Jón Fairbairn Jo***********@c l.cam.ac.uk
Jón Fairbairn wrote: Michael Rozdoba <mr**@nowhere.i nvalid> writes:
Spartanicus wrote:
What you are seeing is collapsing margins, e.g. setting a 1px padding on the body will prevent the margins from collapsing.
Not sure I follow; probably my error.
There's no margin on the floated div & no padding on the container (body), so I would expect the div to rise to the top.
I wouldn't. Ignoring the definitions for a moment, what one would generally want of a floating item is that it appears close to the point in the text where it appears in the source.
The floated div is the first element inside the body, hence my expectation.
This would have been much more clear if I'd just cut & paste the source
into my post, but posters are often told to give an url instead. Oh well.
Still none the wiser as to what's going on or whether the fault is mine.
--
Michael
m r o z a t u k g a t e w a y d o t n e t
Michael Rozdoba <mr**@nowhere.i nvalid> wrote: What you are seeing is collapsing margins, e.g. setting a 1px padding on the body will prevent the margins from collapsing. Not sure I follow; probably my error.
There's no margin on the floated div
It's the top margin on the other div that is causing it.
You're welcome to try and derive the correct behaviour from the css spec
regarding collapsing margins when floats are concerned. I'd suggest you
don't attempt to do so if you care about your mental health, the rules
are preposterously complex.
so I would expect the div to rise to the top. Except in Firefox & Opera it doesn't
Rule of thumb: where Opera and FF/Moz render similarly and IE does
something else; IE is wrong.
--
Spartanicus
Michael Rozdoba <mr**@nowhere.i nvalid> writes: Jón Fairbairn wrote:
Michael Rozdoba <mr**@nowhere.i nvalid> writes:
There's no margin on the floated div & no padding on the container (body), so I would expect the div to rise to the top.
I wouldn't. Ignoring the definitions for a moment, what one would generally want of a floating item is that it appears close to the point in the text where it appears in the source.
The floated div is the first element inside the body, hence my expectation.
Now I'm confused. What I see in firefox is that the top of
the floated box is aligned with the top of the
content. Isn't that what you'd expect?
--
Jón Fairbairn Jo***********@c l.cam.ac.uk
Jón Fairbairn wrote: Michael Rozdoba <mr**@nowhere.i nvalid> writes:
Jón Fairbairn wrote:
Michael Rozdoba <mr**@nowhere.i nvalid> writes:
There's no margin on the floated div & no padding on the container (body), so I would expect the div to rise to the top.
I wouldn't. Ignoring the definitions for a moment, what one would generally want of a floating item is that it appears close to the point in the text where it appears in the source.
The floated div is the first element inside the body, hence my expectation.
Now I'm confused. What I see in firefox is that the top of the floated box is aligned with the top of the content. Isn't that what you'd expect?
It might generally be what one wants, but it isn't what I'd expect from
my last attempt to make sense of the spec. I wouldn't expect the content
following the float to prevent the float rising higher, yet that's the
only thing stopping it.
Maybe I just have abnormal expectations. I'm inclined to thing Eric
Meyer's comments do account for this - referring to ambiguity over the
references to as high as possible in the spec.
--
Michael
m r o z a t u k g a t e w a y d o t n e t
Spartanicus wrote: Michael Rozdoba <mr**@nowhere.i nvalid> wrote:
What you are seeing is collapsing margins, e.g. setting a 1px padding on the body will prevent the margins from collapsing. Not sure I follow; probably my error.
There's no margin on the floated div
It's the top margin on the other div that is causing it.
Oh yes, I realised that after about twenty minutes. I just couldn't
understand why that should influence the vertical position of a float
which occurs earlier in the flow. You're welcome to try and derive the correct behaviour from the css spec regarding collapsing margins when floats are concerned. I'd suggest you don't attempt to do so if you care about your mental health, the rules are preposterously complex.
LOL. Yes, they were painful reading last time I looked at this. Today I
just made do with experimentation & Meyer's Def Guide to CSS - which was
hard enough to follow when explaining the nine sequential rules involved
(or thereabouts). so I would expect the div to rise to the top. Except in Firefox & Opera it doesn't
Rule of thumb: where Opera and FF/Moz render similarly and IE does something else; IE is wrong.
I know. I'm no fan of IE. Though to be fair I seem to recall there are
one or two exceptions.
--
Michael
m r o z a t u k g a t e w a y d o t n e t
Michael Rozdoba <mr**@nowhere.i nvalid> writes: Jón Fairbairn wrote: Now I'm confused. What I see in firefox is that the top of the floated box is aligned with the top of the content. Isn't that what you'd expect?
It might generally be what one wants, but it isn't what I'd expect from my last attempt to make sense of the spec. I wouldn't expect the content following the float to prevent the float rising higher, yet that's the only thing stopping it.
As I understood it, the content of content (sic) determines
where the baseline of the first line of the containing block
is (there's nothing else to do it), and it's that that's
causing it. However, as Spartanicus has said, the spec
should bear a health warning, and trying to work out how
line-boxes and floats interact like this is dangerous work.
I could easily be mistaken. Natural language isn't a
suitable tool for writing specifications of computer
languages, but that's what we're given :-(
Anyhoo, if you put:
<div style="visibili ty: hidden; line-height: 0">
</div>
before the nav division, you get a different baseline for
the first line, I think what you want (in Firefox, at
least). At this point I'm not at all sure whether it should,
though, and if I were to read any more of the spec to find
out I'd probably need medication.
--
Jón Fairbairn Jo***********@c l.cam.ac.uk This thread has been closed and replies have been disabled. Please start a new discussion. Similar topics |
by: Dale Huffman |
last post by:
Is there a simple way to convert an IEEE-754 floating point ascii
string ( "0x40400000" = 3.0, 32bit ) into a float variable, without
writing a function to do the math. I have transferred this across a
network from a device I have no contol over and it sends all data as a
string. Everything I have tried just converts from hex to decimal and
adds a decimal point and a zero.
string.atof("0x40400000") returns 1077936128.0
In case I'm...
|
by: Tom |
last post by:
Has anyone ever seen a IComparer for floats the returns magnitude.
i.e. instead of returning -1, it would return -5. To let you know HOW
different the two numbers are. obviously for int it is a - b. But for
float the results would have to be normalize some how to a 32bit
range. I understand there would be percision errors.
Thanks
Tom
|
by: Madhusudan Singh |
last post by:
Is it possible to convert a very long list of strings to a list of floats in
a single statement ?
I have tried float(x) and float(x) but neither work. I guess I would have
to write a loop if there isn't a way.
|
by: Adam Warner |
last post by:
Hi all,
I'm used to ANSI Common Lisp implementations sanely printing single and
double floats. By sane I mean the printed decimal representation mimics
the underlying binary precision of the float. For example:
> (coerce 2/3 'single-float)
0.6666667
> (coerce 2/300 'single-float)
0.006666667
|
by: ben |
last post by:
i'm learning about the floating point format that's used on my computer
(apple mac so powerpc)
i've written a function to print out the bits in a float to see how
floats are represented and i also have a software programmer's
calculator called BinCalc which shows the bits of whatever number.
the bits that my code and the bits that the calculator show, for the
same value, don't match. for example for the number 1.0 my code says:...
| |
by: sbalko |
last post by:
Hi,
I am trying to read Java-floats (IEEE 754 encoding) stored in a binary
file from C (gcc on linux/i386, more specifically). Unfortunately, C
seems to expect floats to be stored somewhat differently than Java
does. I suspected an endianess problem and tried out ntohl/htonl but it
doesn't help.
Any clues?
|
by: Kosio |
last post by:
-Hello,
I'm looking for a way to deconstruct a (32 bit) float value to four
(8 bit) char values. I then need a way to take those four (8 bit) char
values and construct a (32 bit) float value.
The reason I ask is that I am sending things across an rs485 serial
network, and the protocol is set up to send byte by byte. It sends one
(8 bit) char at a time. I would like to send a float across this
network in the form of four chars...
|
by: yb |
last post by:
Hi,
Is there a CSS method to clear a float such that it aligns with the
left content edge.
For example:
X X X
X X X
X X
|
by: Hendrik Maryns |
last post by:
Hi,
There is a little problem with the header on the page I recently
converted from frames to proper HTML+CSS. The top part with the
navigation used to be the top frame but is now included via SSI. On a
broad screen, it looks good, but if you make the viewport small, the
slogan text in the middle overlaps with the navigation buttons.
http://www.weltladen-tuebingen.de/
|
by: marktang |
last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look !
Part I. Meaning of...
|
by: Hystou |
last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it.
First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
| |
by: jinu1996 |
last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth.
The Art of Business Website Design
Your website is...
|
by: Hystou |
last post by:
Overview:
Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...
|
by: agi2029 |
last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own....
Now, this would greatly impact the work of software developers. The idea...
|
by: adsilva |
last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
|
by: 6302768590 |
last post by:
Hai team
i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
|
by: muto222 |
last post by:
How can i add a mobile payment intergratation into php mysql website.
| |
by: bsmnconsultancy |
last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...
| | |