Forum Moderators: not2easy

Message Too Old, No Replies

Overlapping Divs with CSS

         

bluesquirel

3:53 pm on Jan 19, 2005 (gmt 0)

10+ Year Member



I am trying to use a DIV to include a layer over the top of another div.

It does not appear to work as it leaves a white gap between image tophead.gif and image cityscrape.jpg.

This happens in IE6 and FireFox

If any one can shed some light on this it would be greatly appreciated.

My code is as follows

CSS

body
{
margin:0;
padding:0;
text-align:center;
}

div#Container
{
margin-left:auto;
margin-right:auto;
text-align:left;
width:758px;
background-color:#fff;
border:1px solid #cccccc;
z-index:1;
}

div#Picture
{
z-index:1;
}

div#TEST
{
position:relative;
z-index:2;
top:0px;
margin:0px;
padding:0px;
left:456px;
width:305px;
height:100px;
}

HTML is

<html>
<head>
<title>untitled</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" href="styles/global.css">
<link rel="stylesheet" href="styles/blue.css">
</head>

<body>
<div id="Container">
<div id="vTop"><img src="i/layout/tophead.gif" width="758" height="53"></div>
<div id="TEST"><img src="i/layout/Tag.gif"></div>
<div id="Picture"><img src="i/layout/CityScape.jpg" width="757" height="159"></div>

</div>
</body>
</html>

Arno_Adams

9:01 am on Jan 20, 2005 (gmt 0)

10+ Year Member



vTop isn't defined in your stylesheet.

And picture is inside your container and already has a z-index of '1'.

HTH, AA