css: creating empty boxes with bg

Ingo Griegert · Oct 19, 2003

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!

brucie · Oct 19, 2003

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

Ingo Griegert · Oct 19, 2003

brucie said:
pt are for printing, not screen.

use px

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.

brucie · Oct 19, 2003

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?

Ingo Griegert · Oct 19, 2003

brucie said:
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.

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.

William Tasso · Oct 19, 2003

Ingo said:
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?

Ingo Griegert · Oct 19, 2003

William Tasso said:
What would be the purpose of an empty div?

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>

brucie · Oct 19, 2003

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.

Ingo Griegert · Oct 19, 2003

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

Click to expand...

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.

Click to expand...

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 · Oct 19, 2003

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.

Click to expand...

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

Click to expand...

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.

Ingo Griegert · Oct 19, 2003

brucie 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

Click to expand...

Click to expand...

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

Click to expand...

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.

Richard · Oct 19, 2003

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

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.

Interfering CSS	1	Feb 9, 2024
Positioning CSS components	1	Nov 16, 2023
Stuck with html and css	25	Dec 14, 2022
Working on mobile css menu with plenty of frustration!	2	Dec 29, 2022
Trouble with css	4	Mar 20, 2020
How to position the tooltip comment on these buttons?	9	Nov 4, 2023
Help with my responsive home page	2	Dec 14, 2022
CSS: How can I stop overflow on the y-axis?	2	Dec 24, 2022

css: creating empty boxes with bg

Ingo Griegert

brucie

Ingo Griegert

brucie

Ingo Griegert

William Tasso

Ingo Griegert

brucie

Ingo Griegert

brucie

Ingo Griegert

Richard

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads