CSS - Opacity Property Throwing An Error

Thought I'd run a page I'm working on through the W3C CSS validator... it doesn't seem to recognise decimals for the opacity property? Is this a bug, I don't think I've written anything incorrectly?

Hi,

How do I fix this?

My Stylesheet validates except for this one issue. It bugs me

Here's the HTML page:

Code:

 
 <div id="nav">
   <img class="navrightendbutton" src="images/buttonleftend.jpg" alt="Graphic Helper" /> 
   <a href="index.html"><img class="navbox" src="images/homelight.jpg" alt="Takes You to Home Page" style="filter:alpha(opacity=0)" onmouseover="pWidgets(this,100,50,5)" onmouseout="pWidgets(this,0,50,5)" /></a>
   <a href="guardian_angel_figurines_store.html"><img class="navbox" src="images/storelight.jpg" alt="Guardian Angel Store" style="filter:alpha(opacity=0)" onmouseover="pWidgets(this,100,50,5)" onmouseout="pWidgets(this,0,50,5)" /></a>
   <a href="about_figurines.html"><img class="navbox" src="images/aboutfigurineslight.jpg" alt="For More Information About Figurines" style="filter:alpha(opacity=0)" onmouseover="pWidgets(this,100,50,5)" onmouseout="pWidgets(this,0,50,5)" /></a>
   <a href="about_angels.html"><img class="navbox" src="images/aboutangelslight.jpg" alt="For Angelic Understandings, Mysteries and More" style="filter:alpha(opacity=0)" onmouseover="pWidgets(this,100,50,5)" onmouseout="pWidgets(this,0,50,5)" /></a>
   <a href="privacy_policy_statement.html"><img class="navbox" src="images/contactuslight.jpg" alt="To Contact Us with Your Questions, Sugestions, Ect" style="filter:alpha(opacity=0)" onmouseover="pWidgets(this,100,50,5)" onmouseout="pWidgets(this,0,50,5)" /></a>
   <img class="navbox" src="images/buttonrightend.jpg" alt="Graphic Helper" />
  </div>

Here's the CSS code:
Code:

#bodycontainerbox {
        float:left;
        background: #993399;
        width: 900px;
        padding-bottom: 7px;
        }

.navbox {
       float:left;
       width: 126px;
       } 

.navrightendbutton {
       float: left;
       width: 125px;
       }

W3C gives me this error fives times:

Parse Error opacity=0)

Thank you

Ok, I am creating an image gallery that is composed of a square layer that has opacity of 50. I have created 9 other div layers within that layer to hold thumbnails. When I put images in those thumbnail divs, the image shows up as semi-transparent. I do not want this. Here is my code, how can I turn off opacity just in those div thumbnail squares?


CSS
Code:

    
    DIV.outer
      {
      position:absolute;
      left: 50%;
      top: 50%;
      width: 500px;
      height: 488px;
	  border:2px solid white;
      margin-left: -250px; /* half of width */
      margin-top: -244px;  /* half of height */
      }
    DIV.inner
      {
      position:absolute;
      left: 50%;
      top :50%;
   	  width: 500px;
      height: 488px;
      margin-left: -250px; /* half of width */
      margin-top: -244px;  /* half of height */
      background-color:#CC6666;
	  filter:alpha(opacity=50);
	  -moz-opacity:.50;
	  opacity:.50;		
      }

	div.tn
	{
	position:absolute;
	width:115px; 
	height:115px;
	background-color: #660000; 
	layer-background-color: #660000; 
	border: 1px none #000000;

	}

HTML
Code:

<div class="outer">        
     <p>&nbsp;</p>
   <div class="inner">  
 <!--row 1!-->
     <div class="tn" style="z-index:2; left: 50px; top: 17px;"><img src="tn/tn_fountain.gif"></div>
     <div class="tn" style="z-index:2; left: 192.5px; top: 17px;"><img src="tn/tn_fountain.gif"></div>
     <div class="tn" style="z-index:3; left: 335px; top: 17px;"><img src="tn/tn_fountain.gif"></div>
 <!--row 2!-->	 
	 <div class="tn" style="z-index:2; left: 50px; top: 185px;"><img src="tn/tn_fountain.gif"></div>
     <div class="tn" style="z-index:2; left: 192.5px; top: 185px;"><img src="tn/tn_fountain.gif"></div>
     <div class="tn" style="z-index:3; left: 335px; top: 185px;"><img src="tn/tn_fountain.gif"></div>
 <!--row 3!-->
	 <div class="tn" style="z-index:2; left: 50px; top: 352px;"><img src="tn/tn_jackpot.gif"></div>
     <div class="tn" style="z-index:2; left: 192.5px; top: 352px;"><img src="tn/tn_jackpot.gif"></div>
     <div class="tn" style="z-index:3; left: 335px; top: 352px;"><img src="tn/tn_jackpot.gif"></div>
  </div>  
</div>

What i'm trying to get at here is how do I get non transparent items in a transparent div box?

Hi, I have a div which is somewhat transparent. There is no problem there. Then I have textin this div, which is also showing up with transparency, and this is the problem. I need the text to be 100% opaque.

Here's the div css: Code:

.rounded_STYLE
{
	filter:alpha(opacity=60);
	-moz-opacity:.60;
	opacity:.60;
	width: 224px;
    background-color: #616161;          /* if needed */
    /* border: 1px solid BORDER_COLOR; */  /* if needed */
    -webkit-border-radius: 4px;    /* for Safari */
    -moz-border-radius: 4px;       /* for Firefox */
}

Here's the text css: Code:

.bodywhite{
margin:0px, 4px, 4px, 4px;
opacity:1;
font-size:10px;
color:#FFFFFF;
font-weight:normal;
}

I've tried different numbers in the opacity value, but to no avail.
Here's the site:site

any ideas?

thanks

I cut my teeth on css1 and tables years ago. I am creating a sophisticated and very graphical web site. So, I have spent the last week reading all I can find on using CSS alone to do the layout and am convinced by the many good arguments to not use tables. Although I have found good resources I still cannot get the following two layouts to work cross-browser (IE6+, Mozilla 1.6+) using CSS alone (hacks or not, don't care) nor have I found examples or explanations that lead me to believe they are possible. I want to be wrong, however I suspect no one will be able to achieve these common, although somewhat complex layouts, using CSS-P alone. Can you do it? I really hope so. Any help is greatly appreciated.

Rule #1: each layout must work whether the parent is the body or the layout is nested inside of another div

Rule #2: using the argument that the layout is either undesireable or inappropriate for the web does not constitute success

NOTE: I'm a new subscriber and am prohibited from posting URLS so I've had to put a comma instead of a dot in the base url. Just cut and paste them and replace the commas with dots.

Layout 1

http://www,scotthawker,com/images/2007/bxg/simplelayout.png

I have a parent container (body or div) that needs to have three regions inside of it: header, content and footer. All three regions take 100% of the width of their parent container, even if the parent conainer is resized.

The header region is anchored to the top and has a specified height (lets say 50px). The footer region is anchored to the very bottom of the parent container and also has a specified height (again 50px). The content region takes all vertical space of the parent container not used by the header and footer regions. So, in this example the content region's height is <parent container height> - 50px - 50px. That's it.

Layout 2

http://www,scotthawker,com/images/2007/bxg/complexlayout.png

This layout is identical to the first. The difference is that inside each of the three regions there are additional numbered regions:

Header Region: Region1 has a specified width and height (25px by 25px). It remains at the left-most position of the header region. Region3 remains the right-most position of the header region also with a specified width and height (25px by 25px). Region2 takes up all the horizontal space between Region1 and Region3 and so its width in this case is <header region width> - 25px - 25px.

Content Region: Contains three regions (4,5,6) all of which assume the height of its parent the content region. Region4 has a specified width (10px) and remains at the left-most position of the content region. Region6 remains the right-most position of the content region also with a specified width (10px). Region5 takes up all the horizontal space between Region4 and Region6 and so its width in this case is <content region width> - 10px - 10px.

Footer Region: Region7 has a specified width and height (45px by 45px). It remains at the left-most position of the footer region. Region9 remains the right-most position of the footer region also with a specified width and height (45px by 45px). Region8 takes up all the horizontal space between Region7 and Region9 and so its width in this case is <footer region width> - 45px - 45px.