css: creating empty boxes with bg

Discussion in 'HTML' started by Ingo Griegert, Oct 19, 2003.

  1. I am trying to do something simple as creating an empty box (height: 4pt;
    width:100%) using a stylesheet, rather than a table. Unfortunately, the box
    does not behave the way I want it. The height is way bigger than 4pt.

    The way I tried it is by creating an empty <div> tag and assigning a few
    properties to it:

    <style type="text/css">
    #whiteDivider {position:absolute; top:75pt; width:100%; height:4px;
    background-color:#000000; margin:0pt; padding:0pt border:0 }
    </style>

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

    Can anybody give me an idea of where I went wrong?

    Thanks!
     
    Ingo Griegert, Oct 19, 2003
    #1
    1. Advertising

  2. Ingo Griegert

    brucie Guest

    In post <bmthgr$19iu$>
    Ingo Griegert said...

    > I am trying to do something simple as creating an empty box (height: 4pt;
    > width:100%) using a stylesheet, rather than a table. Unfortunately, the box
    > does not behave the way I want it. The height is way bigger than 4pt.


    pt are for printing, not screen.

    > top:75pt;


    use px

    > height:4px;


    thats not very big. a <hr> may be more appropriate

    > margin:0pt; padding:0pt


    margin:0;padding:0;

    > Can anybody give me an idea of where I went wrong?


    hr{color:white;background-color:white;border:0;height:4px;}

    your html: <hr>

    without seeing the page its not possible to determine the correct
    positioning or if its needed at all.


    --
    brucie.
    19/October/2003 06:24:37 pm
     
    brucie, Oct 19, 2003
    #2
    1. Advertising

  3. "brucie" <> wrote in message
    news:bmti1e$qhdoh$-berlin.de...
    > In post <bmthgr$19iu$>
    > Ingo Griegert said...
    >
    > > I am trying to do something simple as creating an empty box (height:

    4pt;
    > > width:100%) using a stylesheet, rather than a table. Unfortunately, the

    box
    > > does not behave the way I want it. The height is way bigger than 4pt.

    >
    > pt are for printing, not screen.
    >
    > > top:75pt;

    >
    > use px
    >
    > > height:4px;


    Even if I change it to px, it does not help (in IE 5.5). The only thing that
    fixes it is to actually put a spacer into the <div>. IE seems to have
    difficulties with empty DIVs, is that right?

    The reason why I want to use a div rather than hr is because the block
    contains a graphic, rather than a solid colour. The graphic is 3 px high and
    100% wide.
     
    Ingo Griegert, Oct 19, 2003
    #3
  4. Ingo Griegert

    brucie Guest

    In post <bmtjvq$1b71$>
    Ingo Griegert said...

    > Even if I change it to px, it does not help (in IE 5.5).


    upgrade your prehistoric browser. behavior between IE5.5 and IE6 is
    different.

    > The reason why I want to use a div rather than hr is because the block
    > contains a graphic, rather than a solid colour. The graphic is 3 px high and
    > 100% wide.


    how about a URL?

    --
    brucie.
    19/October/2003 07:08:42 pm
     
    brucie, Oct 19, 2003
    #4
  5. "brucie" <> wrote in message
    news:bmtk9t$qgg81$-berlin.de...
    > In post <bmtjvq$1b71$>
    > Ingo Griegert said...
    >
    > > Even if I change it to px, it does not help (in IE 5.5).

    >
    > upgrade your prehistoric browser. behavior between IE5.5 and IE6 is
    > different.


    The reason I am trying to target the "prehistoric" browser is because the
    majority of my users have it.

    > > The reason why I want to use a div rather than hr is because the block
    > > contains a graphic, rather than a solid colour. The graphic is 3 px high

    and
    > > 100% wide.

    >
    > how about a URL?


    http://www.aboehmer.com/test/

    There are two DIVs that are two high: whiteDivider should only be 4 px,
    bottomBanner only 3 px. If I put a spacer into both of them, they shrink to
    the correct size.
     
    Ingo Griegert, Oct 19, 2003
    #5
  6. Ingo Griegert wrote:
    > IE
    > seems to have difficulties with empty DIVs, is that right?


    What would be the purpose of an empty div?

    > The reason why I want to use a div rather than hr is because the block
    > contains a graphic, rather than a solid colour. The graphic is 3 px
    > high and 100% wide.


    it's not empty then - or did I miss something?

    --
    William Tasso - http://WilliamTasso.com
     
    William Tasso, Oct 19, 2003
    #6
  7. "William Tasso" <> wrote in message
    news:bmtl7n$r24k3$-berlin.de...
    > Ingo Griegert wrote:
    > > IE
    > > seems to have difficulties with empty DIVs, is that right?

    >
    > What would be the purpose of an empty div?
    >
    > > The reason why I want to use a div rather than hr is because the block
    > > contains a graphic, rather than a solid colour. The graphic is 3 px
    > > high and 100% wide.

    >
    > it's not empty then - or did I miss something?


    Well, the tag itself is empty. But the style applies a graphic as
    background-image. I should have explained that better, sorry.

    So I am using an empty <div> to create a 4px high block with a tiled
    background image that spans the entire width of the browser window. Pretty
    much a replacement for:

    <table background="someImage.jpg" width="100%">
    <tr>
    <td height="4" width="100%">
    <img src="spacer.gif" height="4" width="1">
    </td>
    </tr>
    </table>
     
    Ingo Griegert, Oct 19, 2003
    #7
  8. Ingo Griegert

    brucie Guest

    In post <bmtklq$1bc3$>
    Ingo Griegert said...

    > http://www.aboehmer.com/test/


    > There are two DIVs that are two high: whiteDivider should only be 4 px,
    > bottomBanner only 3 px. If I put a spacer into both of them, they shrink to
    > the correct size.


    there is no need to use multiple images or <div>s. recreate the logo
    image with the bottom border stuck on it[1] and repeat the background
    image as normal. stick it in a <h1>

    http://usenet.alt-html.org/logo-thingy.html

    [1] 3px height is waaaay too small to see image detail, you may as
    well use a solid color.

    --
    brucie.
    19/October/2003 07:45:03 pm
     
    brucie, Oct 19, 2003
    #8
  9. "brucie" <> wrote in message
    news:bmtn3e$q4qop$-berlin.de...
    > In post <bmtklq$1bc3$>
    > Ingo Griegert said...
    >
    > > http://www.aboehmer.com/test/

    >
    > > There are two DIVs that are two high: whiteDivider should only be 4 px,
    > > bottomBanner only 3 px. If I put a spacer into both of them, they shrink

    to
    > > the correct size.

    >
    > there is no need to use multiple images or <div>s. recreate the logo
    > image with the bottom border stuck on it[1] and repeat the background
    > image as normal. stick it in a <h1>
    >
    > http://usenet.alt-html.org/logo-thingy.html


    The point is, I would like to know how to solve the problem with DIVs, as I
    am trying to understand the limitations of creating an entire design in
    stylesheets rather than tables. So far I am concluding that I cannot do with
    stylesheets what I can do with tables.

    > [1] 3px height is waaaay too small to see image detail, you may as
    > well use a solid color.


    You would be surprised how much detail you can see in 3px. Perhaps not in
    this particular example, as we are dealing with two similar colours, but 3px
    in general is more than enough to create a good graphical effect.

    > --
    > brucie.
    > 19/October/2003 07:45:03 pm
     
    Ingo Griegert, Oct 19, 2003
    #9
  10. Ingo Griegert

    brucie Guest

    In post <bmtq4p$1f4v$>
    Ingo Griegert said...

    >>> http://www.aboehmer.com/test/ There are two DIVs that are two
    >>> high: whiteDivider should only be 4 px, bottomBanner only 3 px.
    >>> If I put a spacer into both of them, they shrink to the correct
    >>> size.


    >> there is no need to use multiple images or <div>s. recreate the logo
    >> image with the bottom border stuck on it[1] and repeat the background
    >> image as normal. stick it in a <h1>
    >> http://usenet.alt-html.org/logo-thingy.html


    > The point is, I would like to know how to solve the problem with DIVs,


    a <div> or <div>s are not the appropriate elements to markup what
    you're doing. a single <h1> (as it is a heading and the most
    important) is all you need.



    --
    brucie.
    19/October/2003 09:01:30 pm
     
    brucie, Oct 19, 2003
    #10
  11. "brucie" <> wrote in message
    news:bmtr06$qkt3r$-berlin.de...
    > In post <bmtq4p$1f4v$>
    > Ingo Griegert said...
    >
    > >>> http://www.aboehmer.com/test/ There are two DIVs that are two
    > >>> high: whiteDivider should only be 4 px, bottomBanner only 3 px.
    > >>> If I put a spacer into both of them, they shrink to the correct
    > >>> size.

    >
    > >> there is no need to use multiple images or <div>s. recreate the logo
    > >> image with the bottom border stuck on it[1] and repeat the background
    > >> image as normal. stick it in a <h1>
    > >> http://usenet.alt-html.org/logo-thingy.html

    >
    > > The point is, I would like to know how to solve the problem with DIVs,

    >
    > a <div> or <div>s are not the appropriate elements to markup what
    > you're doing. a single <h1> (as it is a heading and the most
    > important) is all you need.


    Why <h1>? The logo you see is the banner, so there will in fact be a heading
    beneath it.

    But either way, I still haven't figured out whether there is a way of doing
    all of this properly with styles without using spacers, working in IE5+ and
    NN6+. Is there anybody who can answer this question for me?

    Thanks.
     
    Ingo Griegert, Oct 19, 2003
    #11
  12. Ingo Griegert

    Richard Guest

    Ingo Griegert wrote:

    > I am trying to do something simple as creating an empty box (height:
    > 4pt;
    > width:100%) using a stylesheet, rather than a table. Unfortunately,
    > the box
    > does not behave the way I want it. The height is way bigger than 4pt.


    > The way I tried it is by creating an empty <div> tag and assigning a
    > few
    > properties to it:


    > <style type="text/css">
    > #whiteDivider {position:absolute; top:75pt; width:100%; height:4px;
    > background-color:#000000; margin:0pt; padding:0pt border:0 }
    > </style>


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


    > Can anybody give me an idea of where I went wrong?


    > Thanks!



    #divider { psoition:absolute; left:0px; top:75px; width:100%; height:4px;
    background-color:#000000;}
    no sense adding in stuff with a zero value.
    note the "left"? you need both left and top to give it a starting point.

    <div id="divider"><img src="graphic.gif"></div>

    Go ahead and tag the image in place and the division is no longer empty.
     
    Richard, Oct 19, 2003
    #12
    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. M Hedges
    Replies:
    4
    Views:
    871
    M Hedges
    Feb 15, 2004
  2. Stefan Mueller
    Replies:
    5
    Views:
    12,402
    jamesxa
    Jun 16, 2009
  3. Coleen

    Creating dynamic Text boxes in VB .Net

    Coleen, Nov 8, 2004, in forum: ASP .Net Building Controls
    Replies:
    9
    Views:
    299
    Jim Cheshire [MSFT]
    Nov 11, 2004
  4. KathyB
    Replies:
    3
    Views:
    162
    KathyB
    Sep 12, 2003
  5. Rick
    Replies:
    15
    Views:
    207
    saer sae
    Jan 12, 2006
Loading...

Share This Page