5 replies [Last post]
thumbslinger
Offline
Regular
Austin, TX
Last seen: 10 years 48 weeks ago
Austin, TX
Timezone: GMT-5
Joined: 2005-03-23
Posts: 42
Points: 14

Hello-

I can't find any info about styling a div with borders when the div includes a background image.

I have a container div tag immediately following the body tag in the html that wraps all content.

I styled a 1 px solid gray border around this wrapping div yet it doesn't show up all around.. just across the top and a little down the sides. It appears as if the background images being used in divs that are within the container div are on-top and covering up the border.

I'm wondering how this is happening in both IE6/7, and FF.

Is there a way to "send to front" the border styling for the master container div?

ajajajak
Offline
newbie
Last seen: 12 years 23 weeks ago
Timezone: GMT+1
Joined: 2009-10-15
Posts: 6
Points: 7

I don't know if this will

I don't know if this will work but you could set the background of your master div to transparent and give it a position other than static. Positioned elements by default have a greater z-index than non-positioned(static) elements. I Don't know about how floats are ranked within the hierarchy of z-index though but you could look it up. Also adjust the z-index value so that it has a greater value than those of the contained div's.

z-index definition(Html Utopia: Designing Without Tables Using CSS - Dan Shafer): For any element for which the position property is other than static, this property sets the stacking order relative to other positioned elements within the same stacking context

Non-positioned elements are always positioned beneath all positioned elements in the same stacking context; they effectively have a z-index of 0. Elements in the same stacking context with the same z-index are stacked in the order they appear in the document(html), with later elements overlaying earlier ones.

#masterdiv{
position: absolute;
background: transparent; /*so that when the masterdiv lays on top the rest is not obscured*/
z-index: (higher value than the z-index of the contained div-s)
}

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 8 years 11 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

show your code or give a

show your code or give a link

my bet is that you used floats or absolute positioning which are both taken out of the document flow.

thumbslinger
Offline
Regular
Austin, TX
Last seen: 10 years 48 weeks ago
Austin, TX
Timezone: GMT-5
Joined: 2005-03-23
Posts: 42
Points: 14

I'll get a test page posted

I'll get a test page posted but yes, I am using absolute positioning within the mater container div that is set to relative.

I'm guessing I will have to put the boarders in the background graphics or overlay a 'transparent' div with the highest z-index.

Thanks,

ajajajak
Offline
newbie
Last seen: 12 years 23 weeks ago
Timezone: GMT+1
Joined: 2009-10-15
Posts: 6
Points: 7

I think that should do the

I think that should do the trick but indeed try to post a sample page so we can test and tell you what works and what doesn't!

Stomme poes
Stomme poes's picture
Offline
Elder
Netherlands
Last seen: 10 years 29 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

Quote: I'm guessing I will

Quote:

I'm guessing I will have to put the boarders in the background graphics or overlay a 'transparent' div with the highest z-index.

huh? Don't touch z-index with a 10 foot pole. What does that possibly have to do with a background not appearing????

Oh wait, were you trying to make visitors to your site unable to click any links or highlight any text?

I'm no expert, but I fake one on teh Internets