CSS positioning

Discussion in 'HTML' started by John, Dec 9, 2004.

  1. John

    John Guest

    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
    John, Dec 9, 2004
    #1
    1. Advertising

  2. John

    SpaceGirl Guest

    John wrote:
    > 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 #
    SpaceGirl, Dec 9, 2004
    #2
    1. Advertising

  3. John wrote:
    > 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.
    Leif K-Brooks, Dec 9, 2004
    #3
  4. John

    John Guest

    SpaceGirl wrote:
    > John wrote:
    >
    >> 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
    >
    >
    >


    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
    #4
  5. John

    John Guest

    Leif K-Brooks wrote:

    > John wrote:
    >
    >> 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.


    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
    John, Dec 9, 2004
    #5
  6. John

    Steve Pugh Guest

    On Thu, 09 Dec 2004 14:30:37 +0000, John <no@email> wrote:

    ><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
    Steve Pugh, Dec 9, 2004
    #6
  7. John

    Richard Guest

    John wrote:

    > 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
    #7
  8. John

    Richard Guest

    Steve Pugh wrote:

    > On Thu, 09 Dec 2004 14:30:37 +0000, John <no@email> wrote:


    >><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


    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
    #8
  9. John

    Richard Guest

    Leif K-Brooks wrote:

    > John wrote:
    >> 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.


    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
    #9
  10. John

    Richard Guest

    John wrote:

    > SpaceGirl wrote:
    >> John wrote:
    >>
    >>> 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


    > 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.
    Richard, Dec 9, 2004
    #10
  11. John

    John Guest

    Steve Pugh wrote:

    > On Thu, 09 Dec 2004 14:30:37 +0000, John <no@email> wrote:
    >
    >
    >><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?

    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?
    John, Dec 9, 2004
    #11
  12. Richard wrote:
    > 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.
    Leif K-Brooks, Dec 9, 2004
    #12
  13. John

    Steve Pugh Guest

    On Thu, 09 Dec 2004 17:07:40 +0000, John <no@email> wrote:

    >Steve Pugh wrote:
    >
    >> On Thu, 09 Dec 2004 14:30:37 +0000, John <no@email> wrote:
    >>
    >>
    >>><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?

    >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;}

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

    >
    >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
    >> the content is too large for the viewport.

    >
    >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
    the <div> with overflow: scroll. Doesn't that work for you? But as
    you aren't trying to do that anyway it's besides the point.

    >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.

    >> 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.


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

    >> Feel free to surprise me and say that you're not trying to
    >> do any of those things.

    >
    >Surprise!


    Oooooo!

    Steve
    Steve Pugh, Dec 9, 2004
    #13
  14. John

    Steve Pugh Guest

    On Thu, 9 Dec 2004 10:56:44 -0600, "Richard" <Anonymous@127.001>
    wrote:

    >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
    Steve Pugh, Dec 9, 2004
    #14
  15. On Thu, 09 Dec 2004 18:33:59 +0000, Steve Pugh <> wrote:

    > 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.


    --
    Weblog | <http://home.wanadoo.nl/b.de.zoete/_private/weblog.html>
    Webontwerp | <http://home.wanadoo.nl/b.de.zoete/html/webontwerp.html>
    Zweefvliegen | <http://home.wanadoo.nl/b.de.zoete/html/vliegen.html>
    Barbara de Zoete, Dec 9, 2004
    #15
  16. John

    Steve Pugh Guest

    On Thu, 09 Dec 2004 19:39:04 +0100, "Barbara de Zoete"
    <> wrote:

    >On Thu, 09 Dec 2004 18:33:59 +0000, Steve Pugh <> wrote:
    >
    >> It's six in the evening.

    >
    >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
    Steve Pugh, Dec 9, 2004
    #16
  17. John

    Duende Guest

    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.

    --
    Mr. D?
    Never trust a cat to do a dog's job.
    Duende, Dec 9, 2004
    #17
  18. John

    Duende Guest

    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.

    --
    Mr. D?
    Never trust a cat to do a dog's job.
    Duende, Dec 9, 2004
    #18
  19. John

    Duende Guest

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

    > On Thu, 09 Dec 2004 18:33:59 +0000, Steve Pugh <> wrote:
    >
    >> 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.
    >
    >


    Morning Barb. How you doing this fine day?

    --
    Mr. D?
    Never trust a cat to do a dog's job.
    Duende, Dec 9, 2004
    #19
  20. John

    steven Guest

    "Barbara de Zoete" <> wrote in message
    news:eek:psiq7fei4x5vgts@zoete_b...
    > On Thu, 09 Dec 2004 18:33:59 +0000, Steve Pugh <> wrote:
    >
    > > It's six in the evening.

    >
    > No, it isn't.
    >


    Je hebt gelijk! Vijf voor acht.
    Groetjes

    Steven
    steven, Dec 9, 2004
    #20
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Guest

    OT ...CSS positioning

    Guest, Apr 7, 2004, in forum: ASP .Net
    Replies:
    1
    Views:
    356
    Kevin Spencer
    Apr 7, 2004
  2. Eric

    Datalist and CSS positioning

    Eric, Sep 14, 2005, in forum: ASP .Net
    Replies:
    1
    Views:
    555
    =?Utf-8?B?Q3VydF9DIFtNVlBd?=
    Sep 14, 2005
  3. PeterMcC

    Re: css positioning vs. tables

    PeterMcC, Jun 23, 2003, in forum: HTML
    Replies:
    0
    Views:
    841
    PeterMcC
    Jun 23, 2003
  4. David Graham

    Re: CSS positioning help - Mozilla

    David Graham, Jun 28, 2003, in forum: HTML
    Replies:
    1
    Views:
    5,482
    Lorne Cameron
    Jun 28, 2003
  5. brucie
    Replies:
    8
    Views:
    1,994
    Wipkip
    Jun 29, 2003
Loading...

Share This Page