CSS - Hiding Relatively Prositioned Layer

This is driving me nuts! I've been trying to do the simplest thing for over 3 hours now. Any help would be greatly appreciated!

It's not allowing me to post a link to the site at hand. [myoviedolawyerDOTcom/index2.php]It seems to be working fine in Firefox and Safari, but IE is giving me troubles (as always).

Here is the CSS (sorry if it's a mess, I'm learning)

ul.MenuBarVertical
{
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
cursor: default;
width: 298px;
background-image: url(../images/PracticeAreas.gif);
z-index: 2;
}

ul.MenuBarActive
{
z-index: 1000;
}

ul.MenuBarVertical li
{
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
position: relative;
text-align: left;
cursor: pointer;
width: 298px;
}

ul.MenuBarVertical ul
{
margin: 0% 0 0 100%;
padding: 0;
list-style-type: none;
font-size: 100%;
position: absolute;
z-index: 1020;
cursor: default;
width: 8.2em;
left: -1000em;
top: 0;
}

ul.MenuBarVertical ul.MenuBarSubmenuVisible
{
left: 0;
}

ul.MenuBarVertical ul li
{
width: 302px;
background-color: #CCC;
border: 1px solid #A32B34;
z-index: 2;
}


ul.MenuBarVertical
{
border: 0px;
}

ul.MenuBarVertical ul
{
border: 0px;
}

ul.MenuBarVertical a
{
display: block;
cursor: pointer;
padding: 0.5em 0.75em;
color: #A32B34;
text-decoration: none;
}

ul.MenuBarVertical a:hover, ul.MenuBarVertical a:focus
{
color: #FFF;
}

ul.MenuBarVertical a.MenuBarItemHover, ul.MenuBarVertical a.MenuBarItemSubmenuHover, ul.MenuBarVertical a.MenuBarSubmenuVisible
{
color: #FFF;
}


ul.MenuBarVertical a.MenuBarItemSubmenu
{
background-image: url(../images/PracticeAreas.gif);
background-repeat: no-repeat;
background-position: left top;
background-attachment: fixed;
width: 298px;
}


ul.MenuBarVertical a.MenuBarItemSubmenuHover
{
background-repeat: no-repeat;
background-position: left top;
background-image: url(../images/Template_10_ro_10.png);
background-attachment: fixed;
width: 298px;
}


ul.MenuBarVertical iframe
{
position: absolute;
z-index: 1010;
filter:alpha(opacity:0.1);
}

@media screen, projection
{
ul.MenuBarVertical li.MenuBarItemIE
{
display: inline;
f\loat: left;
z-index: 2;
}
}




--------------------------------------------------------------

Any help would be greatly appreciated!

~cheers~

My name is Steven and I wanted to officially introduce myself and see if anyone could help me with a css issue.

I have set the page up and upon checking an item, I want the page to show the form below. I was able to do that but either way it keeps the space where the form is which in fact, it should minimize and maximize the space upon clicking the check item. Instead, the area is still there.

This seems to the only issue that I am unable to resolve and would greatly appreciate it if someone could help.

I have listed the code below as well as attached the css and the page( If images are need, please let me know:

Code:

html, body  {
   padding: 0px;
   margin: 0px;
   background-color: #FFFFFF;
   font-family:Arial, Helvetica, sans-serif;
}


#logo  {
   background: url(profileimages/logo.png) no-repeat;
   
   position: absolute;
   left: 6px;
   top: 3px;
   z-index: 4;
   width: 92px;
   height: 64px;
}

#congratulations  {
   
   position: absolute;
   left: 22px;
   top: 377px;
   z-index: 3;
   width: 914px;
   height: 30px;
   font-size:26px;
   font-weight:bold;
   color:#4fa700;
}

#toptext  {
   
   position: absolute;
   left: 31px;
   top: 85px;
   z-index: 6;
   width: 897px;
   height: 16px;
   font-size:16px;
   font-weight:bold;
   color:#1b1b1b;
}

#cartproduct,
#cartproductcopy  {
   
   position: absolute;
   z-index: 2;
   width: 268px;
   height: 20px;
   font-size:18px;
   color:#272727;
}

#shippinginformation  {
   
   position: absolute;
   left: 226px;
   top: 421px;
   z-index: 2;
   width: 711px;
   height: 31px;
   font-weight:bold;
   font-size:34px;
   color:#272727;
}

#willbesecure  {
   
   position: absolute;
   left: 83px;
   top: 285px;
   z-index: 3;
   width: 315px;
   height: 14px;
   font-size:12px;
   font-weight:bold;
   color:#272727;
}

#foryourarea  {
   
   position: absolute;
   left: 682px;
   top: 257px;
   z-index: 3;
   width: 233px;
   height: 14px;
   font-size:11px;
   color:#272727;
   font-weight:bold;
}

.toplinksbar  {
   color:#006FD6; 
   text-decoration:none;
}

.toplinksites  {
   font: 12px/14px Arial;
   margin: 0px;
   color: #1B1B1B;
   text-align: left;
   text-decoration: underline;
}

#toplinks  {
   
   position: absolute;
   left: 745px;
   top: 25px;
   z-index: 2;
   width: 227px;
}

#item,
#qtyproductback  {
   background: url(profileimages/layer5copy12.gif) no-repeat;
   
   position: absolute;
   left: 11px;
   z-index: 2;
   width: 31px;
   height: 25px;
}

#totalback,
#priceback  {
   background: url(profileimages/layer5copy9.gif) no-repeat;
   
   position: absolute;
   top: 156px;
   z-index: 2;
   width: 124px;
   height: 25px;
}

#cartproductcopy  {
   top: 720px;
   left: 262px;
}

#ourprice  {
   
   position: absolute;
   left: 803px;
   top: 190px;
   z-index: 2;
   width: 117px;
   height: 28px;
   font-size:12px;
   font-weight:bold;
}

.ourpricepercent {
color:#43a000;
}

#securelock  {
   background: url(profileimages/id46vectorsmartobject.gif) no-repeat;
   
   position: absolute;
   left: 525px;
   top: 875px;
   z-index: 2;
   width: 20px;
   height: 27px;
}

#profilevectorsmartobject  {
   background: url(profileimages/vectorsmartobjectsmall.gif) no-repeat;
   
   position: absolute;
   left: 15px;
   top: 259px;
   z-index: 3;
   width: 62px;
   height: 68px;
}

#cartproduct  {
   top: 191px;
   left: 54px;
}

#productdescription  {
   
   position: absolute;
   left: 59px;
   top: 163px;
   z-index: 3;
   width: 140px;
   height: 13px;
   color:#272727;
   font-size:14px;
   font-weight:bold;
}

#retailprice  {
   
   position: absolute;
   left: 669px;
   top: 190px;
   z-index: 2;
   width: 117px;
   height: 13px;
   font-size:13px;
   color:#ff0000;
}

#acceptedpayments  {
   
   position: absolute;
   left: 490px;
   top: 270px;
   z-index: 2;
   width: 121px;
   height: 13px;
   font-size:12px;
   font-weight:bold;
   color:#272727;
}

#enteryourzipcode  {
   
   position: absolute;
   left: 683px;
   top: 279px;
   z-index: 3;
   width: 145px;
   height: 12px;
   font-size:12px;
   font-weight:bold;
   color:#272727;
}

#profilereadmoreaboutit  {
	
	position: absolute;
	left: 87px;
	top: 300px;
	z-index: 3;
	width: 98px;
	height: 9px;
}

.profilereadmoreaboutitlink {
text-decoration:underline;
color:#3170ab;
font-size:10px;

}

#formback  {
   background: url(profileimages/layer5copy13.gif) no-repeat;
   
   position: absolute;
   left: 557px;
   top: 467px;
   z-index: 2;
   width: 380px;
   height: 381px;
}

#formtable {
font-size:14px;
font-weight:bold;
}

#item  {
   top: 187px;
}

#qtyproductback  {
   top: 156px;
}

#checkback  {
   background: url(profileimages/layer5copy10.gif) no-repeat;
   
   position: absolute;
   left: 677px;
   top: 249px;
   z-index: 2;
   width: 249px;
   height: 77px;
}

#lowerbar  {
   background: url(profileimages/layer1copy5.gif) no-repeat;
   
   position: absolute;
   left: 4px;
   top: 342px;
   z-index: 2;
   width: 952px;
   height: 3px;
}

#shippingback  {
   background: url(profileimages/layer5copy7.gif) no-repeat;
   
   position: absolute;
   left: 566px;
   top: 156px;
   z-index: 2;
   width: 90px;
   height: 92px;
}

#zipcodefield {
   
   position: absolute;
   left: 681px;
   top: 296px;
   z-index: 3;
   width: 150px;
   height: 25px;
}

#zipcodefieldform {
border:#aab1b7;
}

#totalback  {
   left: 800px;
}

#priceback  {
   left: 667px;
}

#formarea {
display:none;
overflow:hidden;
width:1px;
height:1px;
}

#congratulationsback  {
   background: url(profileimages/layer24copy.gif) no-repeat;
   
   position: absolute;
   left: 5px;
   top: 368px;
   z-index: 2;
   width: 951px;
   height: 42px;
}

#producttitleback  {
   background: url(profileimages/layer5copy6.gif) no-repeat;
   
   position: absolute;
   left: 48px;
   top: 156px;
   z-index: 2;
   width: 507px;
   height: 25px;
}

#layer1copy  {
   background: url(profileimages/layer1copy.gif) no-repeat;
   
   position: absolute;
   left: 373px;
   top: 68px;
   z-index: 3;
   width: 400px;
   height: 5px;
}

#profilesecurityback  {
   background: url(profileimages/layer5copy.gif) no-repeat;
   
   position: absolute;
   left: 19px;
   top: 278px;
   z-index: 2;
   width: 395px;
   height: 40px;
}

#area  {
   margin: 0px auto 0px auto;
   background: url(profileimages/background.gif) no-repeat;  
   height:100%;
   width: 960px;
   position: relative;
}

#shipping  {
   
   position: absolute;
   left: 583px;
   top: 162px;
   z-index: 3;
   width: 54px;
   height: 14px;
   font-size:14px;
   font-weight:bold;
   color:#272727;
}

#yourcart  {
   
   position: absolute;
   left: 10px;
   top: 132px;
   z-index: 2;
   width: 106px;
   height: 17px;
   font-size:20px;
   font-weight:bold;
   color:#272727;
}

#profileshadow  {
   background: url(profileimages/layer16.gif) no-repeat;
   
   position: absolute;
   left: 29px;
   top: 326px;
   z-index: 2;
   width: 32px;
   height: 4px;
}

#fedex  {
   background: url(profileimages/layer30.gif) no-repeat;
   
   position: absolute;
   left: 579px;
   top: 221px;
   z-index: 4;
   width: 66px;
   height: 18px;
}

#paymenttypes  {
   background: url(profileimages/layer18.gif) no-repeat;
   
   position: absolute;
   left: 490px;
   top: 291px;
   z-index: 2;
   width: 174px;
   height: 27px;
}

#profileproductback  {
   background: url(profileimages/layer24.gif) no-repeat;
   left: 223px;
   top: 467px;
   z-index: 2;
   width: 323px;
   height: 243px;
}

#profileproductimage {
   /*background: url(profileimages/layer25.gif) no-repeat;*/
   
   position: absolute;
   left: 227px;
   top: 491px;
   z-index: 3;
   width: 305px;
   height: 200px;
}

#topbar {
	background: url(profileimages/topbar.png) no-repeat;
	position: absolute;
	left: 15px;
	top: 73px;
	z-index: 5;
	width: 952px;
	height: 41px;
}

#freedivide  {
   background: url(profileimages/layer32.gif) no-repeat;
   
   position: absolute;
   left: 567px;
   top: 213px;
   z-index: 4;
   width: 88px;
   height: 1px;
}

#fedexback  {
   background: url(profileimages/layer31.gif) no-repeat;
   
   position: absolute;
   left: 567px;
   top: 214px;
   z-index: 3;
   width: 88px;
   height: 33px;
}

#checkbackbutton  {
   /*background: url(profileimages/layer21.gif) no-repeat;*/
   
   position: absolute;
   left: 835px;
   top: 293px;
   z-index: 3;
   width: 72px;
   height: 26px;
}

#lowerarrow {
   background: url(profileimages/layer34.gif) no-repeat;
   
   position: absolute;
   left: 862px;
   top: 344px;
   z-index: 3;
   width: 24px;
   height: 6px;
}

#paymentline  {
   background: url(profileimages/layer20.gif) no-repeat;
   
   position: absolute;
   left: 490px;
   top: 285px;
   z-index: 2;
   width: 173px;
   height: 1px;
}

#form  {
   /*background: url(profileimages/layer23.gif) no-repeat;*/
   
   position: absolute;
   left: 571px;
   top: 480px;
   z-index: 3;
   width: 349px;
   height: 354px;
}

#checkoutbuttonback  {
/*background: url(profileimages/layer6.gif) no-repeat;*/
   
   position: absolute;
   left: 556px;
   top: 854px;
   z-index: 2;
   width: 382px;
   height: 50px;
}

#total  {
   
   position: absolute;
   left: 806px;
   top: 163px;
   z-index: 3;
   width: 28px;
   height: 10px;
   font-size:14px;
   font-weight:bold;
   color:#272727;
}

#price  {
   
   position: absolute;
   left: 673px;
   top: 163px;
   z-index: 3;
   width: 30px;
   height: 11px;
   font-size:14px;
   font-weight:bold;
   color:#272727;
}

#free  {
   
   position: absolute;
   left: 598px;
   top: 191px;
   z-index: 3;
   width: 34px;
   height: 10px;
   font-size:14px;
   color:#2e2e2e;
   font-weight:bold;
}

#radiobutton  {
   
   position: absolute;
   left: 571px;
   top: 190px;
   z-index: 3;
   width: 13px;
   height: 13px;
}

#qty  {
   
   position: absolute;
   left: 15px;
   top: 162px;
   z-index: 3;
   width: 25px;
   height: 14px;
   font-size:14px;
   font-weight:bold;
   color:#272727;
}

#itemnumber  {
   
   position: absolute;
   left: 24px;
   top: 190px;
   z-index: 3;
   width: 5px;
   height: 13px;
   font-size:18px;
   color:#272727;
}

#copyright  {
	position: absolute;
	left: 13px;
	top: 971px;
	z-index: 2;
	width: 940px;
	height: 126px;
	font-size:11px;
	
}

.copyrighttext {
text-align:center;
}

.copyrightlinks {
text-decoration:underline;
color:#000000;
} 

Is there a way to hide part of my css from Firefox but show up in IE?

I have a problem... I have text in a div class "schedule" which is dragged in dynamically. Basically all the headers are in span tags with the style "font-weight:bold" on them. I want to hide all the non-bold text, ie all the text in the div class .schedule that doesn't have a <span> tag around it. Any ideas?

hi
in Internet Explorer, this style works fine and when i print it prints the div and hides it on screen. however, in firefox, it does not hide the div on screen. can anyone help with this? many thanks

Code:

<style media="print">
.noPrint { display:none;}
.Hidden { display:inline;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
}
 
</style>
<style media="screen">
.Hidden { display:none;}
</style> 
 
<div class="Hidden">Just an example of text in a div.<br /><br />Thank you</div>
</p>
<p><input type="button" value="Print this page" onclick="printpage()" /></p>

Hello,
So I have a page built that displays correctly in all modern browsers. However in IE6 the right floated div does not float right and throws the page off.

If I could just hide the right and left columns from IE6 it would work fine.

I have tried several bug fixes but nothing so far works.
the page is :
woodbuiltright
com/
test2
php

If it would layout correctly in IE6 with a fix/hack that would be great if not could I just make the right and left divs just not display?

I even tried using some php to redirect IE6 to a different page. I guess I did not insert the php correctly because I could never get it to work.

I would not even support IE6 but I know people who still use it...despite my recommendations.

Just so you know, I have spent hours trying stuff before asking.

Thanks!

Well, I can't post links so this is going to be hard as hell to type out. I have a layer within that page that I want in a certain position, yet when I move the width of my browser the layer does not stay where I want it. Obviousely, this does not make any sense because its something you have to see.

I checked the rules for the forums and I can't find where it states anything about URLs, if someone would be so kind to show me, I'd appericiate it.


Not that it matters witout seeing it on the page but my code for this layer is:

Code:

<div id="Layer1" style="position:absolute; left:848px; top:85px; width:118px; height:167px; z-index:1">    
	  <div class="mltop">schedule +4hrs </div>
	  <p>00:00 - Music <br>
	    01:00 - Music <br>
	    02:00 - Music <br>
	  03:00 - <a href="">BRR</a></p>
	  <p><b>Current time: 00:00</b><br>
	    Times in CST/CDT
	    <br>
      </p>
	</div>

Hi!

Does anybody have some great link or book advice about all the properties of the DIV and/or LAYER - tags? Inspiring examples with javascript to this are also welcome. I will use it to build advanced layer functionality.

Regards
Bjorn

Hello All,

Im currently stuck trying to get a layer on top of a layer. The image below shows the problem.

img68.imageshack.us/img68/5579/picture3cl2.png

And here is a link to a code version:

thenpcs.com/beta/

Any help greatfully appreciated!

I want to take a layer and center on a page. In other words if I have the margins top = 0 and left=0 then inside the main layer which takes into account the entire page I want it to be centered on the page. At present I can center a table on a page but not a layer???? how to do this? thanks

http://balmarketing.com/new/

I think actually the trouble lies in my content layer not centering itself correctly and its being pushed to the right by the nav layer. It looks semi what I want it to look like in FF but not in IE. Any suggestions on how I can fix this?

I need to position a 200px high by 300px wide layer in the center of the page.

does anyone know a simple way to do this, i have thought about using JS to calculate the width of the page, take off the 200px, and halve it, but that seems like overkill, isnt there a simple CSS command?

Thanks

Xaphan

I have a webpage located at http://www.niu-sae.com

I have a drop down menu image, in a div layer that will pop up when you roll over the first link "Active Chapter".

First of all the positioning is all weird... when I am at full screen I have to set the div left at 285... even though it is really only about 116. any idea what I am doing wrong?

Second even when I get it lined up... the way it is now... it changes if you resize the window.

HELP. please.

Hi Guys,

Basically I'm having trouble with getting the 'Content' div layer to wrap around the switching div layers.

The grey background colour represents the 'Content' div layer which wraps around the button menu OK but doesn't wrap around the layers which switch.

The bodged way of doing it is to have a fixed height but then it leaves a blank area underneath the divs that are short of text...If you get what I mean?

Code:

<div id="content_test">
	<div id="rollovercontentwrapper">

		<div id="tabwrapper">
			<ul id="tabmenu">
				<li><p><a href="#" onClick="javascript:showTabContentOne('TabContentOne')">Summary</p></a></li>
				<li><p><a href="#" onClick="javascript:showTabContentTwo('TabContentTwo')">Benefits</p></a></li>
			</ul><!--TABMENU-->
		</div><!--TABWRAPPER-->

		<div id="TabContentOne" class="TabContentOne" style="visibility: hidden">
						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer lacus risus, 
						porttitor non aliquam non, scelerisque vitae turpis. Duis venenatis nisl lectus, 
						et aliquam eros. Nam commodo, ligula sed ultrices vehicula, justo augue ultricies 
						urna, sed rhoncus nisi dui sed risus. Nullam commodo risus nec justo sagittis eu 
						cursus nisi interdum.</p>
						<br>
						<p>In hac habitasse platea dictumst. Sed vulputate auctor cursus. Morbi ac 
						ullamcorper dui. In sem velit, pulvinar sit amet cursus id, vulputate fringilla 
						erat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere 
						cubilia Curae; Sed lorem urna, imperdiet eget fringilla eget, molestie nec justo. 
						Fusce diam nulla, fringilla a sodales at, rhoncus vitae massa. Donec tincidunt, 
						leo quis fermentum venenatis, purus elit tincidunt ipsum, vitae sollicitudin nulla 
						orci nec arcu. Sed non neque neque, ac pharetra lectus. Donec a massa mauris. Sed 
						vel magna eget tellus commodo placerat in quis risus. Aenean velit lectus, aliquam 
						quis dictum ac, pellentesque sed diam.</p>
		</div><!--TabContentOne-->
		<div id="TabContentTwo" class="TabContentTwo" style="visibility: hidden">
						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer lacus risus, 
						porttitor non aliquam non, scelerisque vitae turpis. Duis venenatis nisl lectus, 
						et aliquam eros. Nam commodo, ligula sed ultrices vehicula, justo augue ultricies 
						urna, sed rhoncus nisi dui sed risus. Nullam commodo risus nec justo sagittis eu 
						cursus nisi interdum.</p>
		</div><!--TabContentTwo-->

	</div><!--ROLLOVERCONTENTWRAPPER-->
</div>	<!----CONTENT_TEST---->

<div id="onebyone" style="visibility:hidden;">
<img src="onebyonepixel.gif" onLoad="javascript:showTabContentOne('TabContentOne')" width="1" height="1">
</div>

Code:

div#rollovercontentwrapper {
	float: left;
	width: 630px;
	background-color: #E9E9E8
}

div#tabwrapper {
	width: 630px;
}

ul#tabmenu {
	display: block;
	float: left;
	width: 630px;
	list-style-type: none;
	border-bottom: 1px solid #0048A7;
}

ul#tabmenu li {
	display: block;
	float: left;
	background-color: #E9E9E8;
}

ul#tabmenu li a {
	display: block;
	float: left;
	padding: 10px;
	background-color: #E9E9E8;
	border-top: 1px dashed #0048A7;
	border-right: 1px dashed #0048A7;
}

ul#tabmenu li a:focus {
	display: block;
	float: left;
	padding: 10px;
	background-color: #3383CD;
	border-top: 1px dashed #0048A7;
	border-right: 1px dashed #0048A7;
}

#TabContentOne {
	float: left;
	position: absolute;
	top: 350px;
	width: 628px;
	z-index: 1;
	padding-top: 10px;
	padding-bottom: 10px;
}

#TabContentTwo {
	float: left;
	position: absolute;
	top: 350px;
	width: 628px;
	z-index: 1;
	padding-top: 10px;
	padding-bottom: 10px;
}

div#onebyone {
	float: left;
}

div#content_test {
	float: left;
	width: 900px;
	padding: 20px;
	background-color: #CCCCCC;
}

Can anybody help me out on this?

Many thanks,

Mark

Hi,

Does anyone know how I can do drop down layer with in a table. I have table whihc has the class name I want to show the description in a drop down fashion when user click on the class name.

Does anyone knows How I can do this. Please help me. I am new to Css

thanks