CSS positioning

John · Dec 9, 2004

with the html...

<body>
<div id="container">
</div>
</body>

....and the css...

body {
background-color: black;
}

div {
position: absolute;
background-color: white;
top: 100;
bottom: 100;
left: 100;
right: 100;
}

I need the <body> to be black, the <div> to be white, and the <div> to
be 100 pixels (on each side) inside the <body>.

So far I can get it to work with Firefox but not IE. Any suggestions?

John

SpaceGirl · Dec 9, 2004

John said:
with the html...

<body>
<div id="container">
</div>
</body>

...and the css...

body {
background-color: black;
}

div {
position: absolute;
background-color: white;
top: 100;
bottom: 100;
left: 100;
right: 100;
}

I need the <body> to be black, the <div> to be white, and the <div> to
be 100 pixels (on each side) inside the <body>.

So far I can get it to work with Firefox but not IE. Any suggestions?

John

100 WHAT? miles? feet? inches? bananas?

you MUST specify units or the browser does not know what it is rendering.

top:100px;

etc

--

x theSpaceGirl (miranda)

# lead designer @ http://www.dhnewmedia.com #
# remove NO SPAM to email, or use form on website #

Leif K-Brooks · Dec 9, 2004

John said:
top: 100;
bottom: 100;
left: 100;
right: 100;

IIRC, IE uses just the left setting for absolute positioning when both
left and right are set instead of stretching.

John · Dec 9, 2004

SpaceGirl said:
100 WHAT? miles? feet? inches? bananas?

you MUST specify units or the browser does not know what it is rendering.

top:100px;

etc

I don't really mind. Bananas would be fine. px or not, IE just provides
a plain black background. Try it.

I decided that I might have more luck by using tables. Works nicely (as
in doing what I want it to) with IE but not with Firefox. I refuse to
believe that I'm going to have to detect the browser in order to get
this to work.

John

John · Dec 9, 2004

Leif said:
IIRC, IE uses just the left setting for absolute positioning when both
left and right are set instead of stretching.

I love trying to write HTML. It is pure comedy. IE's reluctance to
stretch does indeed seem to be the problem here; thanks. I am refusing
on principle to do browser detection or any scripting for this page, so
I'm relying on setting left, top and dimensions. If billy gates gets his
act together in the future then it'll be easy to change. I think I'll
set the page up so it's viewable at 800,600 maximised. It'll be a bit
small for the 1280,1024 for lot, but never mind.

John

Steve Pugh · Dec 9, 2004

<body>
<div id="container">
</div>
</body>

I need the <body> to be black, the <div> to be white, and the <div> to
be 100 pixels (on each side) inside the <body>.

So you want a 100px black border? I wonder what the CSS for that would
be?

I suppose you're actually trying to keep the white box entirely inside
the viewport. I suppose you're adding scrollbars inside the div when
the content is too large for the viewport. I suppose you're also
trying to prevent the standard scrollbars on the browser window from
appearing? Feel free to surprise me and say that you're not trying to
do any of those things.

Steve

Richard · Dec 9, 2004

John said:
with the html...

<body>
<div id="container">
</div>
</body>

...and the css...

body {
background-color: black;
}

div {
position: absolute;
background-color: white;
top: 100;
bottom: 100;
left: 100;
right: 100;
}

I need the <body> to be black, the <div> to be white, and the <div> to
be 100 pixels (on each side) inside the <body>.

So far I can get it to work with Firefox but not IE. Any suggestions?

John

Try this, it works fine in IE6.

<style type="text/css">

div {position:absolute; top:100px; left:100px; height:100px; width:100px;
background-color:blue; }

</style>

</HEAD>
<BODY>

<div id="container">hello
</div>
hello

</BODY>
</HTML>

Richard · Dec 9, 2004

So you want a 100px black border? I wonder what the CSS for that would
be?

I suppose you're actually trying to keep the white box entirely inside
the viewport. I suppose you're adding scrollbars inside the div when
the content is too large for the viewport. I suppose you're also
trying to prevent the standard scrollbars on the browser window from
appearing? Feel free to surprise me and say that you're not trying to
do any of those things.

Steve

Egg Nog bottle empty is it?
Run out of viagra did you?
Why do you assume more than what is being asked about?
Now within that little itty box, he's going to put in a video, animated
gifs, and a ton of other annoying shit.
Sheeesh dude. This is the beginning learning stage of CSS and you assume the
worst is going to happen?
Go back to bed.

Richard · Dec 9, 2004

IIRC, IE uses just the left setting for absolute positioning when both
left and right are set instead of stretching.

That's why you should use "width" and "height" instead.
He's trying to use both positioning arguments which won't work.
Top and left set the stage as does bottom and right.
Or use the combos of bottom left, and bottom right, but never all four.
Using all four confuses the issue.

Richard · Dec 9, 2004

I don't really mind. Bananas would be fine. px or not, IE just provides
a plain black background. Try it.

I decided that I might have more luck by using tables. Works nicely (as
in doing what I want it to) with IE but not with Firefox. I refuse to
believe that I'm going to have to detect the browser in order to get
this to work.

John

The default is px.
If not specified, px is assumed.

John · Dec 9, 2004

Steve said:
So you want a 100px black border? I wonder what the CSS for that would
be?

It doesn't work with the body tage, but does (sort of) with the html tag.

I suppose you're actually trying to keep the white box entirely inside
the viewport.

How else could it work?

I suppose you're adding scrollbars inside the div when

the content is too large for the viewport.

No. That would look horrendous. It doesn't work on the div, just on the
<html>. In fact, why did you suggest this border idea. It just breaks IE
even more that it is already. It works nicely in Firefox though (I sense
a common theme).

I suppose you're also

trying to prevent the standard scrollbars on the browser window from
appearing?

No. I'm forgetting the whole of this fucking ridiculous border idea. It
seems doomed from the start.

Feel free to surprise me and say that you're not trying to

do any of those things.

Surprise!

Any other suggestions?

Leif K-Brooks · Dec 9, 2004

Richard said:
The default is px. If not specified, px is assumed.

To quote the CSS1 specification:

The format of a length value is an optional sign character ('+' or
'-', with '+' being the default) immediately followed by a number
(with or without a decimal point) immediately followed by a unit
identifier (a two-letter abbreviation). After a '0' number, the unit
identifier is optional.

Notice that there's no mention of the unit identifier being optional for
non-zero numbers. Please try to get a clue before giving advice.

Steve Pugh · Dec 9, 2004

It doesn't work with the body tage, but does (sort of) with the html tag.

How about on the div?

body {margin: 0; padding: 0;}
div#container {border: 100px solid black;}

How else could it work?

Well, if the content is bigger than the viewport the box will extend
outside the viewport, so the 100px of black will be at the bottom of
the page not the bottom of the browser window.

I suppose you're adding scrollbars inside the div when

No. That would look horrendous.

I'm pleasantly surprised.

It doesn't work on the div, just on the <html>.

Not sure what you mean by this. Of course you can set scrollbars on

In fact, why did you suggest this border idea.

Because it's the simplest way to do what you wanted.

It just breaks IE
even more that it is already. It works nicely in Firefox though (I sense
a common theme).

IE is crap. FF is less crap. Yep, common theme throughout all of web
development.

No. I'm forgetting the whole of this fucking ridiculous border idea. It
seems doomed from the start.

Okay. So you're dropping the black border. Back to a plain white page
is it?

Surprise!

Oooooo!

Steve

Steve Pugh · Dec 9, 2004

Egg Nog bottle empty is it?

Never drink it.

Run out of viagra did you?

Oh, so its you who keeps sending me those e-mails?

Why do you assume more than what is being asked about?

Now within that little itty box, he's going to put in a video, animated
gifs, and a ton of other annoying shit.

Do you know this or are you assuming it?

Sheeesh dude. This is the beginning learning stage of CSS and you assume the
worst is going to happen?

Because it often does.

Go back to bed.

It's six in the evening. That would be louche even by the standards of
this group.

Steve

Barbara de Zoete · Dec 9, 2004

It's six in the evening.

No, it isn't.

That would be louche even by the standards of
this group.

Well, yes. That would be.

Steve Pugh · Dec 9, 2004

No, it isn't.

Don't start. The aussies (who should all be tucked up in bed but,
well, you know) will be here in a moment saying that it's already
Friday...

Steve

Duende · Dec 9, 2004

While sitting in a puddle Steve Pugh scribbled in the mud:

crap. Yep, common theme throughout all of web
development.

Sounds like my sites for sure.

Duende · Dec 9, 2004

While sitting in a puddle Steve Pugh scribbled in the mud:

by the standards of this group.

This group has standards? I know aww does'nt.

Duende · Dec 9, 2004

While sitting in a puddle Barbara de Zoete scribbled in the mud:

No, it isn't.

Well, yes. That would be.

Morning Barb. How you doing this fine day?

steven · Dec 9, 2004

Barbara de Zoete said:
No, it isn't.

Je hebt gelijk! Vijf voor acht.
Groetjes

Steven

Positioning CSS components	1	Nov 16, 2023
Trouble with css	4	Mar 20, 2020
How to position the tooltip comment on these buttons?	9	Nov 4, 2023
Why is the e.target not working here?	1	Dec 29, 2022
How can I get my menu inside of a menu to function properly?	1	Jan 19, 2023
Slideshow not working properly	2	Jan 7, 2023
Stuck with html and css	25	Dec 14, 2022
Please Help?	0	Jul 23, 2022

CSS positioning

John

SpaceGirl

Leif K-Brooks

John

John

Steve Pugh

Richard

Richard

Richard

Richard

John

Leif K-Brooks

Steve Pugh

Steve Pugh

Barbara de Zoete

Steve Pugh

Duende

Duende

Duende

steven

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads