<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>test</title>
</head>
<body>
<div style="height: 100px; width: 100px; background-color: red;">
<div style="height: 50px;
margin-top: 50px;
background-color: blue">
</div>
</div>
</body>
</html>
Now, with this I'd expect to see 100 vertical pixels of red followed by 100
vertical pixels of blue - and this *is* what I see in IE. However in
Firefox I see 100 vertical pixels of white followed by 100 vertical pixels
of blue followed by 100 vertical pixels of red.
Any idea of what's up? 13  1955 
Cool Guy wrote: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>test</title>
</head>
<body>
<div style="height: 100px; width: 100px; background-color: red;">
<div style="height: 50px;
margin-top: 50px;
background-color: blue">
</div>
</div>
</body>
</html>
Now, with this I'd expect to see 100 vertical pixels of red followed by 100
vertical pixels of blue - and this *is* what I see in IE. However in
Firefox I see 100 vertical pixels of white followed by 100 vertical pixels
of blue followed by 100 vertical pixels of red.
Any idea of what's up?
Personally, I'd expect 50px of red, and 50px of blue.
Are you sure the above is an exact copy paste of your actual example?
--
Els http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -
I wrote: Any idea of what's up?
Okay, I've played with this a little and found that giving the outer div
'float: left' fixes this in Firefox. Does anyone know why?
Cool Guy wrote: I wrote:
Any idea of what's up?
Okay, I've played with this a little and found that giving the outer div
'float: left' fixes this in Firefox. Does anyone know why?
There's another way of fixing it: give the outer div a border.
It's the margin on the inner div, that's going outside the outer div,
unless it has a border. I guess floating has the same effect, as it
makes the div positioned. Not exactly sure how it works though.
--
Els http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -
Els <el*********@tiscali.nl> wrote: Personally, I'd expect 50px of red, and 50px of blue.
You're right - I mixed it up. Sorry.
Els <el*********@tiscali.nl>: Okay, I've played with this a little and found that giving the outer div
'float: left' fixes this in Firefox. Does anyone know why?
There's another way of fixing it: give the outer div a border.
It's the margin on the inner div, that's going outside the outer div,
unless it has a border. I guess floating has the same effect, as it
makes the div positioned. Not exactly sure how it works though.
Just to add: Opera needs the floating or the border, too. Otherwise it
displays it like Firefox.
Cool Guy wrote: Els <el*********@tiscali.nl>: Okay, I've played with this a little and found that giving the outer div
'float: left' fixes this in Firefox. Does anyone know why?
There's another way of fixing it: give the outer div a border.
It's the margin on the inner div, that's going outside the outer div,
unless it has a border. I guess floating has the same effect, as it
makes the div positioned. Not exactly sure how it works though.
Just to add: Opera needs the floating or the border, too. Otherwise it
displays it like Firefox.
Yup, knew that :-)
When Opera and Firefox do the same thing while IE is not, usually it's
safe to say IE is wrong. Haven't checked the specs on this though.
--
Els http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -
Now playing: Jon Bon Jovi - Knockin On Heavens Door (acoustic)
Cool Guy wrote: I wrote:
Any idea of what's up?
Okay, I've played with this a little and found that giving the outer div
'float: left' fixes this in Firefox. Does anyone know why?
This is due to collapsing margins, which basically says that when two
vertical margins meet up (are adjacent), instead of adding together the
largest margin takes precedent and the other one collapses to nothing.
Note that margins are no longer adjacent if a border or padding is used,
if relative or absolute positioned, if floated, or if another element is
between the two Margins.
--
Gus
Gus Richter <gu********@netscape.net> wrote:
Hi. I don't quite understand your reply... This is due to collapsing margins, which basically says that when two
vertical margins meet up (are adjacent),
Which two margins are meeting up? Isn't there's only one margin here? In
any case setting 'margin: 0;' for 'body' has no effect.
[...]
Cool Guy wrote: Gus Richter <gu********@netscape.net> wrote:
Hi. I don't quite understand your reply...
This is due to collapsing margins, which basically says that when two
vertical margins meet up (are adjacent),
Which two margins are meeting up? Isn't there's only one margin here? In
any case setting 'margin: 0;' for 'body' has no effect.
The margins for the outer div and the inner div.
(both top margins in this case)
--
Els http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -
Els <el*********@tiscali.nl>: This is due to collapsing margins, which basically says that when two
vertical margins meet up (are adjacent),
Which two margins are meeting up? Isn't there's only one margin here? In
any case setting 'margin: 0;' for 'body' has no effect.
The margins for the outer div and the inner div.
(both top margins in this case)
But the outer div doesn't have a margin, does it? And anyway if I give it a
margin of 0 nothing changes. I'm confuzzled. :(
Cool Guy wrote: Els <el*********@tiscali.nl>: This is due to collapsing margins, which basically says that when two
vertical margins meet up (are adjacent),
Which two margins are meeting up? Isn't there's only one margin here? In
any case setting 'margin: 0;' for 'body' has no effect.
The margins for the outer div and the inner div.
(both top margins in this case)
But the outer div doesn't have a margin, does it? And anyway if I give it a
margin of 0 nothing changes. I'm confuzzled. :(
A margin of 0 on the outer div, and a margin of 50px on the inner div.
They collapse into one margin of 50px. Unless you add a border or
padding or float or position the outer div. Then the two margins
aren't adjacent anymore, and won't collapse anymore.
I agree it does take a slight mind bend to understand it though ;-)
--
Els http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -
Els <el*********@tiscali.nl> wrote: But the outer div doesn't have a margin, does it? And anyway if I give it a
margin of 0 nothing changes. I'm confuzzled. :(
A margin of 0 on the outer div, and a margin of 50px on the inner div.
They collapse into one margin of 50px. Unless you add a border or
padding or float or position the outer div. Then the two margins
aren't adjacent anymore, and won't collapse anymore.
Hmm. What's the rationale of this?
Cool Guy wrote: Els <el*********@tiscali.nl> wrote:
But the outer div doesn't have a margin, does it? And anyway if I give it a
margin of 0 nothing changes. I'm confuzzled. :(
A margin of 0 on the outer div, and a margin of 50px on the inner div.
They collapse into one margin of 50px. Unless you add a border or
padding or float or position the outer div. Then the two margins
aren't adjacent anymore, and won't collapse anymore.
Hmm. What's the rationale of this?
You'd have to ask the people over at W3c I think.
I don't find it too weird though - if the two elements would not be
nested, I think you would see how collapsing margins are logical. I
see it like two people who keep each other at arm's length.
If one's arm is 75cm long, and the other person's arm's 60cm long, the
distance between the two would be 75cm, not 135cm.
The weird part (imo) only happens when the two elements are nested.
The rules remain the same, it only /appears/ less logical.
--
Els http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo - This thread has been closed and replies have been disabled. Please start a new discussion. Similar topics
by: Tony Benham |
last post by:
I'm having problems with a css layout where a margin is being inserted with
the wrong width. I believe it's my css that's at fault since it is wrong in
netscape 7.1, opera,7.11 and IE6 but I cannot...
|
by: Harlan Messinger |
last post by:
What is *supposed* to be the way to specify the horizontal offset of (a) the
list item's marker and (b) the list item's content? In particular, see
...
|
by: Brian |
last post by:
I have a page with content, navigation, and footer divs, in that
order. The nav div has position: absolute, width 8em, on green
background. The other divs have an 8em green left border, such that...
|
by: meltedown |
last post by:
I have 2 left floating divs on a page. Sometime the left side is larger,
sometimes the right side is larger. I want the page to have a margin at
the bottom of whichever div is the largest.
If I...
|
by: Luciano A. Ferrer |
last post by:
this is really strange... I cant find what is wrong...
so, #botonera have a left margin of 18px, but IE make it 36px!
If I put a margin of 30px, IE make it 60px!
I am crazy?
<!DOCTYPE html...
|
by: Jeremy |
last post by:
Let's say I have some block elements that self-organize by floating to
the left, so if no more blocks can fit in a row they begin on the next
row (see crummy ASCII art at end of message).
I...
|
by: Pablito |
last post by:
Hi at all
into a page I wrote
<style>
body {margin-left:10%;margin-right:10%;text-align:justify;}
</style>
reading the page with FireFox the margin left is 10% but the right is 0%
Why?
How can...
|
by: Steve Richter |
last post by:
I want my panel to have an inner margin. Problem is label text does
not appear to recognize the margin. In this example, the TextBox
aligns on the margin, the label does not:
<asp:Panel...
|
by: Neviton |
last post by:
Hi this is the html to generate the behavior:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://
www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html...
|
by: GTalbot |
last post by:
Hello fellow authoring.stylesheets colleagues,
Can someone please explain why the bottom margin of the last inflow
block-level child in an overflowed parent should not have its margin
reachable....
|
by: isladogs |
last post by:
The next Access Europe meeting will be on Wednesday 4 Oct 2023 starting at 18:00 UK time (6PM UTC+1) and finishing at about 19:15 (7.15PM)
The start time is equivalent to 19:00 (7PM) in Central...
|
by: Aliciasmith |
last post by:
In an age dominated by smartphones, having a mobile app for your business is no longer an option; it's a necessity. Whether you're a startup or an established enterprise, finding the right mobile app...
|
by: tracyyun |
last post by:
Hello everyone,
I have a question and would like some advice on network connectivity. I have one computer connected to my router via WiFi, but I have two other computers that I want to be able to...
|
by: giovanniandrean |
last post by:
The energy model is structured as follows and uses excel sheets to give input data:
1-Utility.py contains all the functions needed to calculate the variables and other minor things (mentions...
|
by: Teri B |
last post by:
Hi, I have created a sub-form Roles. In my course form the user selects the roles assigned to the course.
0ne-to-many. One course many roles.
Then I created a report based on the Course form and...
|
by: isladogs |
last post by:
The next Access Europe meeting will be on Wednesday 1 Nov 2023 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM)
Please note that the UK and Europe revert to winter time on...
|
by: nia12 |
last post by:
Hi there,
I am very new to Access so apologies if any of this is obvious/not clear.
I am creating a data collection tool for health care employees to complete. It consists of a number of...
|
by: NeoPa |
last post by:
Introduction
For this article I'll be focusing on the Report (clsReport) class. This simply handles making the calling Form invisible until all of the Reports opened by it have been closed, when it...
|
by: isladogs |
last post by:
The next online meeting of the Access Europe User Group will be on Wednesday 6 Dec 2023 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM).
In this month's session, Mike...
| |
