473,721 Members | 2,060 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 6306
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
3410
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
5633
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 have whitespace between them, and some of the links on the right don't have whitespace between them...
6
4942
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? The page is ugly as I've ripped most of the content & styling out to
2
3335
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 break over the header text and adjusting line-height also helps, but does not show correctly like...
3
4930
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 ******************** www.onlinecreations.com.au/wtts/index.php like I said, works in IE but not Mozilla. I just...
2
16417
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
4471
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 is to have the header, menu area, and footer stacked on the left and the content as a full-height...
6
2916
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 to the top right. here's the css
1
1470
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 that relative divs move in relation to the parent div. What pitfalls could arise? Would it be better...
0
8851
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 usage, and What is the difference between ONU and Router. Let’s take a closer look ! Part I. Meaning of...
0
9373
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. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...
0
9077
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 choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
0
8019
agi2029
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...
0
5992
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert into image. Globals.ThisAddIn.Application.ActiveDocument.Select();...
0
4497
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
0
4761
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
1
3202
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
3
2137
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 effective websites that not only look great but also perform exceptionally well. In this comprehensive...

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.