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 7  6294 
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.
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
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?
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>
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
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
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.
This thread has been closed and replies have been disabled. Please start a new discussion. Similar topics | |
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:
|
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...
|
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
|
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...
|
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...
| | |
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
|
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...
|
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
|
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...
|
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: 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: 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...
|
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...
| |
