CSS: Displaying div with just a background?

I rarely have a need to do any kind of web development so any time I do need to do anything im pretty lost...

(I'm making a asp.net control for my personal website :D)

My target is Firefox/IE 6.0 (since this is private, and those are the only browsers i use)

Anyway... the part i am having problems with is:

(this is the first section div)

Code:

---

+-------------------------------+
|  Section Text            |>>|
+-------------------------------+
|                              |
|  A Link                      |                             
|  A Link                      |
|                              |
+--------------------------------

---

Code:

---

MenuContainer Div
-Sections Div
  -Section Div
    -Header Div
      -Header Text
      -Expand / Collapse Div
    -Body Div
      -Body Links
  -Section Div
    -Header Div
      -Header Text
      -Expand / Collapse Div
    -Body Div
      -Body Links

---

this section is nested with in 3 divs (first one is the menu container, second is Sections container, and the third is the section container (holds the section header, and section body))

I tried to cheat a bit and display the expand/collapse image as a div so i chould change all the images my modifing the css (the images are going to be dynamically generated)

but it seems that both firefox or ie will not display a div unless it contains something...

is there anyway i can force it to display a div?

it shows how i want it to in Dreamweaver for some reason... :confused:

Browsers often disregard empty elements. But you can force them to appear but inserting some white space between them:

HTML Code:

---

  <div class="empty">&nbsp;</div>

---

Just a few thoughts...
A menu like yours are usually thought of as a list of links to different parts of the website.
So it makes more sence to use lists instead of divs to build it.
I have always used <ul><li></li></ul> for this kind of menu, but just reasently I saw a meny built with <dl><dt><dd></dd></td></dl> Where <dt>Would be the section header and the <dd>s the actual links in that section.
I don't know which one is more correct, I would like some input on that.

And about that collapse/expand image. What about putting it as the background of the <a> taggs? That way you won't need empty elements just for displaying images

at the very least set a width and height. That should help. Other wise see if setting the clear property to all helps. Since there's no content, the browser doesn't know how big to make it, so it proly ends up being 1x1 px, or what ever the min it takes (if there is a border or not.)

Tg

btw: i had width, height, and clear set... (also min-height, min-width at one point)
&nbsp; worked :D

McCain: I will play with those options, it seems like it would make applying styles and menu items easy.

New Problem, i have been testing this in Firefox (because it has better standards compliance, and it its the browser i prefer) after getting the images to show up i tested it IE. IE doesnt seem to like my transparent images
:confused:

My Section headers also have a image background (a rectangle with 3 pixels removed from the top corners, for the round look) i made these images with photoshop and made the corner pixels transparent. this works on firefox with
no problems :/ but not in IE.

-IE does not like png with transparency, I guess i'll fix this when im supplying the dynamic image (M$ is really starting to annoy me, IE7 better be standards compliant)

and i thought supporting IE6/Firefox would be easy...

Anyway... i'm off to tweak my section header and body text layout ...

I just cant wait till i have to figure out the javascript to make the expand/collapse work :/

Yeah, IE doesn't like pngs very much...
But it sounds to me like you could do with gifs, or do you need that alpha transparancy?