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

IE vs. mozilla and absolute vertical positioning of boxes

P: n/a
Please see http://home.houston.rr.com/gmiller15/css/vertprob.html .

In mozilla 1.6/1.7 it looks the way I want it, with a thin separation
between the two boxes. In IE6, the two boxes touch, which is not what I
want. Is there a way to get IE6 to do it the mozilla way?

Thanks!

Griff
Jul 20 '05 #1
Share this Question
Share on Google+
7 Replies


P: n/a
Griff Miller wrote:
Please see http://home.houston.rr.com/gmiller15/css/vertprob.html .

In mozilla 1.6/1.7 it looks the way I want it, with a thin separation
between the two boxes. In IE6, the two boxes touch, which is not what I
want. Is there a way to get IE6 to do it the mozilla way?

This works:

<html><head>
<title>This is the title</title>

<style type="text/css">
div.whitebox {
position: relative;
border-style: solid;
border-width: 1em;
padding: 1em;
margin: auto 0 5px;width: 35em; height: 1em;
}
body { color: black; background: white }
</style></head>

<body alink="RED" link="BLUE" vlink="NAVY">

<div class="whitebox">
This is the 1st box.
</div>

<div class="whitebox">
This is the 2nd box.
</div>

</body></html>

I've changed to relative positioning. You should be able to position the
two boxes by altering the margin and padding on the body.
Jul 20 '05 #2

P: n/a
Paul <pa***********@blueyonder.couk> wrote in message news:<p5****************@fe1.news.blueyonder.co.uk >...

I've changed to relative positioning. You should be able to position the
two boxes by altering the margin and padding on the body.


Paul, thanks very much for your reply. The trouble is, I need to be able to
use absolute positioning.

Griff
Jul 20 '05 #3

P: n/a
On 29 Jun 2004 08:03:50 -0700, Griff Miller <gr**********@positron.com>
wrote:
Paul <pa***********@blueyonder.couk> wrote in message
news:<p5****************@fe1.news.blueyonder.co.uk >...

I've changed to relative positioning. You should be able to position the
two boxes by altering the margin and padding on the body.


Paul, thanks very much for your reply. The trouble is, I need to be able
to
use absolute positioning.

Griff


Is this a homework assignment?
Jul 20 '05 #4

P: n/a
Griff Miller wrote:

<snip<

Paul, thanks very much for your reply. The trouble is, I need to be able to
use absolute positioning.


I just wonder why. In fact, for your example, the default static
position is fine.

If you do want to use absolute positioning, why don't you make the two
boxes a single <div id="foo"> and then position #foo.

I found that I had to go to top: 5.4em to get a separation between
the boxes in IE. I think the difference for the behaviour in the two
browsers is because 1em does not correspond to an exact number of
pixels. So there could be a difference in the way each individual
browser resolves this.

I notice you've changed the order of the body attributes since this
morning. Since you're using css, I don't know why you're using body
attributes at all.

I think this will work:

<html><head>
<title>This is the title</title>

<style type="text/css">
div.whitebox {
border-style: solid;
border-width: 1em;
border-color: #000;
padding: 1em;
margin: auto 0 5px;width: 35em; height: 1em;
}
body { color: black; background: white; margin: 0; padding: 0}
#foo {position: absolute; left: 0.1em; top: 0.1em;}
</style></head>

<body alink="RED" link="BLUE" vlink="NAVY">

<div id="foo"><div class="whitebox">
This is the 1st box.
</div>

<div class="whitebox">
This is the 2nd box.
</div></div>

</body></html>
Jul 20 '05 #5

P: n/a
Paul <pa***********@blueyonder.couk> wrote in message news:<q6*************@fe1.news.blueyonder.co.uk>.. .
Griff Miller wrote:

<snip<

Paul, thanks very much for your reply. The trouble is, I need to be able to
use absolute positioning.
I just wonder why.


In general, I need to make boxes touch each other without overlapping, and
also make boxes come very close to each other without touching. My example
was an example of the latter. With the former, IE makes the boxes overlap.

I am trying to mimic the appearance of a paper form, which uses distances
between boxes as a visual clue to their relationship to each other.
In fact, for your example, the default static
position is fine.
Is it possible to make boxes touch without overlapping in static? IIRC,
I could not get that to work.

Bear in mind also that my example was just to illustrate the phenomenon.
My actual form is going to have dozens of boxes.
If you do want to use absolute positioning, why don't you make the two
boxes a single <div id="foo"> and then position #foo.
I don't think that gives me the control I need. Again, in some cases
I need the boxes to touch. In others, not.
I found that I had to go to top: 5.4em to get a separation between
the boxes in IE. I think the difference for the behaviour in the two
browsers is because 1em does not correspond to an exact number of
pixels. So there could be a difference in the way each individual
browser resolves this.
Plausible, but it doesn't explain why I have no trouble controlling
horizontal box position in IE, just vertical.

In other words, using absolute positioning the horizontal positions
of boxes appear to be the same in IE vs. mozilla. But not vertical.
I notice you've changed the order of the body attributes since this
morning.
I haven't changed anything since I first posted the example. Have a look
at the modification date.
Since you're using css, I don't know why you're using body
attributes at all.
Ignorance, most likely. :)
I think this will work:

<html><head>
<title>This is the title</title>

<style type="text/css">
div.whitebox {
border-style: solid;
border-width: 1em;
border-color: #000;
padding: 1em;
margin: auto 0 5px;width: 35em; height: 1em;
}
body { color: black; background: white; margin: 0; padding: 0}
#foo {position: absolute; left: 0.1em; top: 0.1em;}
</style></head>

<body alink="RED" link="BLUE" vlink="NAVY">

<div id="foo"><div class="whitebox">
This is the 1st box.
</div>

<div class="whitebox">
This is the 2nd box.
</div></div>

</body></html>


Thanks for the example, but it still looks different in IE vs. mozilla.

Griff
Jul 20 '05 #6

P: n/a
Griff Miller wrote:

<snip>

Is it possible to make boxes touch without overlapping in static?
Yes

<snip>
If you do want to use absolute positioning, why don't you make the two
boxes a single <div id="foo"> and then position #foo.

I don't think that gives me the control I need. Again, in some cases
I need the boxes to touch. In others, not.


I agree with that.

<snip>
In other words, using absolute positioning the horizontal positions
of boxes appear to be the same in IE vs. mozilla. But not vertical.
I stand to be corrected on this, but I think the only way that you're
going to get pixel-perfect consistency between the two browsers is by
using px as a unit of length, rather than em. However, if you do so,
there will be problems with accessibility.

<snip> Thanks for the example, but it still looks different in IE vs. mozilla.


Your eyesight must be better than mine!

http://paulglondon.pwp.blueyonder.co.uk/difference.png

Paul
Jul 20 '05 #7

P: n/a
Just to add that the em unit is the default font size for the browser.
You are not to know what the viewer has set that to.
Jul 20 '05 #8

This discussion thread is closed

Replies have been disabled for this discussion.