473,549 Members | 2,644 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

IE vs. mozilla and absolute vertical positioning of boxes

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
7 6281
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
Paul <pa***********@ blueyonder.couk > wrote in message news:<p5******* *********@fe1.n ews.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
On 29 Jun 2004 08:03:50 -0700, Griff Miller <gr**********@p ositron.com>
wrote:
Paul <pa***********@ blueyonder.couk > wrote in message
news:<p5******* *********@fe1.n ews.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
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
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
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
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 thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

6
3402
by: Jason Bassford | last post by:
Okay, What I'm trying to do is create two boxes, one on top of the other. The first is a static height, the 2nd, underneath it, should take up the remaining amount of screen space and overflow with its own vertical scrollbar for any extra content. I've managed to come up with this, which works perfectly in Mozilla, but fails in IE:
1
5623
by: delerious | last post by:
Could someone please take a look at this page: http://home.comcast.net/~delerious1/index11.html The set of links on the left should not have any whitespace between them, and the set of links on the right should have one pixel of whitespace between them. That's how it looks in IE and Opera. But in Mozilla, a few of the links on the left...
6
4926
by: Michael Rozdoba | last post by:
I've had some trouble getting IE to behave in respect of applying absolute positioning to a span on an a:hover. I can get it to work, but I don't understand why certain code causes it to fail to display the repositioned block. See an example at http://www.digitalrat.co.uk/test2/index.html Can anyone explain what IE thinks it's doing? ...
2
3331
by: theo | last post by:
Can someone please take a peek at the top header boxes in ie and mozilla, and tell me what possible fix might be out there. The text and boxes are moving around between the two browsers. I prefer zero margin between boxes, like mozilla does it. I've played around with it, adding borders helps some, but does not fix the problem. Adding a...
3
4924
by: Jannette | last post by:
I've got this to finally work in IE (its only taken me 2 days solid), but now mozilla isn't displaying the text on the same line as the image. I'm a newby at CSS, and I've think I've worked on trying to resolve this too long and now I'm totally lost. I've posted this up to a site: *************************Uploaded to SERVER...
2
16401
by: nino9stars | last post by:
Hello, I have just started messing with absolute positioning on webpages, and it definitely let's you do some creative things. Well, after much searching and help, I got the images I was using to overlap correctly. You can see it on this page: www.creativekaysjewelry.com The images overlap exactly how I wanted and in the right position
7
4462
by: Chris Nelson | last post by:
I'm new to the positioning aspects of CSS and I'm going crazy trying to do something that seems like it should be fairly easy. I've Googled all over and read CSS tutorials and not found an answer. I want to divide my screen/page into four areas: a header, a footer, a menu area, and content. The particular layout I'm trying to accomplish...
6
2902
by: Mark | last post by:
hi, i'm trying to position something in the top right corner of a container, but i can't seem to figure out how to get it working. here's the html <div class='thumb'><a href='image.jpg'><img src='photos/thumbs/ bigsmile.jpg'></a><a class='del' href='?p=gallery&del=2'>x</a></div> where 'thumb' is my container, and 'del' should be aligned...
1
1459
by: Froggluver | last post by:
I have some experience with CSS. Just enough to be dangerous in fact. :) I had a general question about positioning. Is it possible create a box that is absolutely positioned on a page, and then place boxes inside of that that are relatively positioned, so that they flow with the page? I am aware absolute is just that - absolute, and I know...
0
7532
marktang
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...
0
7462
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...
0
7730
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. ...
0
7975
jinu1996
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...
0
7823
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the...
1
5381
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes...
0
3491
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
1
1069
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.
0
777
bsmnconsultancy
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...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.