Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > css: creating empty boxes with bg

Reply
Thread Tools

css: creating empty boxes with bg

 
 
Ingo Griegert
Guest
Posts: n/a
 
      10-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!




 
Reply With Quote
 
 
 
 
brucie
Guest
Posts: n/a
 
      10-19-2003
In post <bmthgr$19iu$(E-Mail Removed)>
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
 
Reply With Quote
 
 
 
 
Ingo Griegert
Guest
Posts: n/a
 
      10-19-2003
"brucie" <(E-Mail Removed)> wrote in message
news:bmti1e$qhdoh$(E-Mail Removed)-berlin.de...
> In post <bmthgr$19iu$(E-Mail Removed)>
> 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.


 
Reply With Quote
 
brucie
Guest
Posts: n/a
 
      10-19-2003
In post <bmtjvq$1b71$(E-Mail Removed)>
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
 
Reply With Quote
 
Ingo Griegert
Guest
Posts: n/a
 
      10-19-2003

"brucie" <(E-Mail Removed)> wrote in message
news:bmtk9t$qgg81$(E-Mail Removed)-berlin.de...
> In post <bmtjvq$1b71$(E-Mail Removed)>
> 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.




 
Reply With Quote
 
William Tasso
Guest
Posts: n/a
 
      10-19-2003
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


 
Reply With Quote
 
Ingo Griegert
Guest
Posts: n/a
 
      10-19-2003

"William Tasso" <(E-Mail Removed)> wrote in message
news:bmtl7n$r24k3$(E-Mail Removed)-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>


 
Reply With Quote
 
brucie
Guest
Posts: n/a
 
      10-19-2003
In post <bmtklq$1bc3$(E-Mail Removed)>
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
 
Reply With Quote
 
Ingo Griegert
Guest
Posts: n/a
 
      10-19-2003
"brucie" <(E-Mail Removed)> wrote in message
news:bmtn3e$q4qop$(E-Mail Removed)-berlin.de...
> In post <bmtklq$1bc3$(E-Mail Removed)>
> 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



 
Reply With Quote
 
brucie
Guest
Posts: n/a
 
      10-19-2003
In post <bmtq4p$1f4v$(E-Mail Removed)>
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
 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Space between input boxes and selection boxes is not the same in Internet Explorer Stefan Mueller HTML 5 06-16-2009 02:06 PM
Empty Boxes - mostlymint, all collectable... Gambler Digital Photography 4 03-06-2004 12:44 PM
Re: Lots of empty boxes in taskbar Unk Computer Support 0 07-02-2003 01:04 PM
Re: Lots of empty boxes in taskbar Buffalo Computer Support 1 07-02-2003 05:06 AM
Re: Lots of empty boxes in taskbar Shepİ Computer Support 0 07-01-2003 10:56 PM



Advertisments