[web] CSS Positioning

This topic is 4594 days old which is more than the 365 day threshold we allow for new replies. Please post a new topic.

Recommended Posts

I want to use top:0px; bottom:1px; left:0px; right:1px; to size my div. This works great in firefox, but dies in IE. How do I do this? -Greg

Share on other sites
What are you trying to achieve?

Share on other sites
are you using position:absolute; with it?

Share on other sites
also check the margin settings.

Share on other sites
Check the margin settings?

Yes, I am trying to position:absolute it.
-Greg

Share on other sites
set a style for the body of margin-top:0;margin-left:0; that might work

Share on other sites
In IE when you try to set the width/left/right using a combination of left and right it assumes left:0; width:100%; A workaround is to set it to left:0; width:100%; margin-left: something; margin-right: something;

Share on other sites
<html><head></head><body><style>div.outerBox{	position:relative;	top:0px;	left:0px;	height:100%;	width:100%;	border-style:solid;	border-width:1px;	margin:0px;}div.innerBox{	position:absolute;	top:0px;	left:0px;	bottom:1px;	right:1px;	border-style:solid;	border-width:1px;	margin:0px;}</style><div style="width:20em; height:20em;">	<div class="outerBox">		<div class="innerBox"></div>	</div></div></body></html>

This shows what I mean. The inner box is NOT 1px away from the bottom right... (in internet explorer)

Share on other sites
Do you have the correct DOCTYPE set?

Share on other sites
you've styled the body as width/height 100% right?

Share on other sites
GrumpyJack:
I am not sure why you want me to set body width/height 100%, that just gives me scroll bars and doesn't change the way my page looks.

Twanvl: Tried that. See innerBox2. That is what you mean, right?

igni: I now have what I think is the correct doctype. Still does not work.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><head><style>body{	width:100%;	height:100%;}div.outerBox{	position:relative;	top:0px;	left:0px;	height:100%;	width:100%;	border-style:solid;	border-width:1px;}div.innerBox{	position:absolute;	top:0px;	left:0px;	bottom:1px;	right:1px;	border-style:solid;	border-width:1px;}div.innerBox2{	position:absolute;	top:0px;	left:0px;	width:100%;	height:100%;	margin-right:1px;	margin-bottom:1px;	border-style:solid;	border-width:1px;}</style></head><body><div style="width:20em; height:20em;">	<div class="outerBox">		<div class="innerBox"></div>	</div></div><br><div style="width:20em; height:20em;">	<div class="outerBox">		<div class="innerBox2"></div>	</div></div></body></html>