CSS Glass Window

[NZ_Kiwis]

This is my code for a background image in my header with a transparent window over the top. The first code with the . in it works in a way as the . forces the glass window to sit under it. The one without the dot and when using padding forces the whole "MainImg" tag down so it leaves 10px for example at the to of my window

how can I strop this?

<div class="MainImg">.
    <div class="GlassWindow">Hello</div>
</div>

<div class="MainImg">.
    <div class="GlassWindow">Hello</div>
</div>

.MainImg {
	background-image:url(../img/header_warriors.jpeg);
	background-repeat:no-repeat;
	height: 305px;
	width:1024px;
}

.GlassWindow {
	font-family: inherit;
	margin: 10px;
	width:400px;
	height: 185px;
	background-color:#ffffff;
	border:1px solid black;
	opacity:0.4;
	filter:alpha(opacity=60)
}

[cretaceous]

stop what exactly?
not sure what the problem is or what you are aiming for but I think the solution may require absolute positioning on the transparent panel
(which can then be placed inside a relative postioned div so it moves in the document flow)

[NZ_Kiwis]

when i remove the . the padding on my glass window forces my MainImg down so there is a gap between the top of MainImg and the top of the window IE. MainTag does not sit at the top of my window

[cretaceous]

add
margin:0;
padding:0;
to MainImg

• your problem shouldn't be happening imo
  but there are some issues with transparent boxes - which you can google for - that are best fixed with position absolute - I can't remember the exact problem this fixed but I know position absolute was the fix

[NZ_Kiwis]

yeah does not work, i've allgned it at the top for now. might have to come back to it unless somsone else can fix it.

[cretaceous]

did you try position absolute?
works in FF and IE:

body{
margin:0;
padding:0; 
		}
.MainImg {
	background-image:url(../images/yourimage.jpg);
	background-repeat:no-repeat;
	height: 305px;
	width:1024px;
}
.wrap{
	position:relative;
	}
.GlassWindow {
	font-family: inherit;
	margin: 10px;
	width:400px;
	height: 185px;
	background-color:#ffffff;
	border:1px solid black;
	opacity:0.4;
	filter:alpha(opacity=60);
	position:absolute;
}

<div class="MainImg">
<div class="wrap">
    <div class="GlassWindow">Hello</div>
    </div>
</div>

[NZ_Kiwis]

yeah still does not work,

here is my body tag

body {
	font-family: Calibri;
	font-size:15px;
	background-color:#333;
	margin: 0 auto;
	padding:0px; 
	width: 1024px;

}

[cretaceous]

nope, you're wrong I think, it does work...
did you add the wrap div?
it needs that

[NZ_Kiwis]

yes

<div class="MainImg">
	<div class="wrap"> 
	    <div class="GlassWindow"><a class="HeaderFont" href="index.php">My Website</a></div>
    </div>
</div>

[cretaceous]

well, that's very odd - it works for me in IE 7 and FF with either doctype transitional or doctype strict

I'm going to test tomorrow in IE8 and 9..

[cretaceous]

tested in IE9 and Opera - works perfectly
you must be doing something else somewhere in the css or inline!