CSS - Simple: Hiding A Layer Onclick! Help Please!

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

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!

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>

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;
} 

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~

I've been re-designing my site in valid XHTML 1.1 and CSS, and I've hit a bit of a problem....

Everything works perfectly in Firefox, but IE isn't liking things at all. The navbar at the left should stretch all the way to the bottom image, but it isnt having it. I've tried messing with it for about an hour now, and can't fix it....

The page can be found at URL and the stylesheet at URL

Oh, and I know the colours are all messed up, I'll fix that later :P

Edit: Fixed bbCode

Hi. Any help would be appreciated. I am trying to cut down on my image sizes on my website: http://toptiertemplates.com, but i am having a few difficulties. I have this table which was created in photoshop which is off to the side. I would like to take just a slice of the table and repeat the image the full length of the table's original length. The page is written by placing everything with divs. I know how to set the image as a background and all and repeat it, however, when i do so, it replaces my website's background and just shows up as a white space.

So i am wondering if I have to use layers of some sort or anything else. I'd appreciate some help. Thanks.

I have a web page containing 3 layers. There are placed side by side with absolute positions. The middle layer contains a image with a fixed size.

Now I have to change the image based on user's selection, so it is no longer fixed sized. I want to let the third (right) layer to re-adjust its position when image is smaller. How to make it work?

This is my first time working with layers, please help.

Thanks.

Matt

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?

Hi,

I'm trying to set up a side menu, which appears on the right-hand side of the page.

Code:

<style type="text/css">
#SideMenu {
	color: #639;
	background-color: #FBFBFB;
	position: absolute;
	top: 275px;
	left: 630px;
	width: 190px;
	height: 250px;
	}
</style>

However, when the browser window is resized, the layer then obstructs the main content (by floating over it), and does not remain in its place as it should. This is how it should look like::



However, as the browser is resized, the layer does this:



I'm tring to remedy this using CSS only, so please send any suggestions to me. The code for the sidebar is:

Code:

  <div id="SideMenu">
  <p>Side Content. I like to eat food.</p>
  </div>

Any ideas guys?!

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!