|
CSS - Parse Error Opacity=0)
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 Similar TutorialsWhen I try to validate my site's CSS, a CSS file that works in conjunction with some JavaScript files I use to randomly rotate and fade my top banner images in and out throws this error message: Property opacity doesn't exist in CSS level 2.1 but exists in : 1 1 The validator throws twelve such error messages for twelve different lines of the CSS file, three of which are these: Code:
.slideshow-images-visible { opacity: 1;}
.slideshow-images-prev { opacity: 0; }
.slideshow-images-next { opacity: 0; }
In case it matters, I'm using the strict docType declaration at the top of my header: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> I'd like to continue using these files, and I also would like my CSS to validate. Can you tell me if there is a fix or work-around I can use? I am getting a CSS validation error It is: 251 * Parse Error / textarea { border: 1px solid silver; width: 80%; } If I comment the CSS in question out, it gives me another CSS error a little bit farther down in the stylesheet... not sure why it is doing that or how to just fix this validation error, as the ones that come up after it are similar. My end goal is to make the page look normal in FF2. Currently in FF2 some of the text in the purple "Sesame Street" box is blocked out. I didn't create this page, but have been asked to figure out why it looks like this in FF2. I am no CSS expert, but would love to hear from one! Thanks for your help. When trying to validate my CSS with W3C, I keep getting parse error on this code :- ul#menu li a.home:hover, ul#menu li a.home:active, ul#menu li a.port:hover, ul#menu li a.port:active, ul#menu li a.multi:hover, ul#menu li a.multi:active, ul#menu li a.web:hover, ul#menu li a.web:active, ul#menu li a.about:hover, ul#menu li a.about:active, { background-position: center center; } The code is part for a horizontal 3 state navigation menu using images. I have created my first css and all has worked well, but when I try to validate it I get the message: Parse error - Unrecognized : <style type="text/css"> body { margin:10px 10px 0px 10px; padding:0px; } Can someone please explain what I'm doing wrong and how do I fix it? Desperately a student, Hi all, Has anyone received a Line: 0 Parse error - Unrecognized : } with the rest of the CSS document validated under W3C validator? I can't work out why it's not happy. The beginning of my CSS is: /* This is the only CSS for the Waste RE3 website */ a:link { font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; font-size: 12px; font-style: normal; color: #008000; text-decoration: none} a:visited { font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; font-size: 12px; font-style: normal; color: #008000; text-decoration: none} a:hover { font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; font-size: 12px; font-style: normal; color: #FF9933; text-decoration: underline} 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 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> </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, ive been messing with opacity and want to know if i can achieve this. I would like to have a background image on my page, then lay some divs over it. I want the image to be full opacity around the divs and be faded in the divs. so i thought i'd add a class to the divs: .opaq { filter: alpha(opacity=50); opacity: 50%; -moz-opacity:0.5; } but the div inside with my content inherits the opacity and therefore is faded too is there a way of having the opacity on the background of the div yet have the content 'full' wat about z-index? to bring the content to the front heres a pic: I was wondering if anyone knows a way to have use Opacity witin a div tab but then have another div tag in side of it not affected by Opactiy. Here is the code i have I want background to be transparent but not transbox. But setting the opacity to 100 in transbox wont over ride background.: Code:
<html>
<head>
<style type="text/css">
div.background
{
width: 500px;
height: 250px;
background-color: 000000;
border: 2px solid black;
opacity:0.6;
}
div.transbox
{
width: 400px;
height: 180px;
margin: 30px 50px;
background-color: #ffffff;
border: 1px solid black;
opacity:0.100;
}
div.transbox p
{
margin: 30px 40px;
font-weight: bold;
color: #000000;
}
</style>
</head>
<body>
<div class="background">
<div class="transbox">
<p>This is some text that is placed in the transparent box.
This is some text that is placed in the transparent box.
This is some text that is placed in the transparent box.
This is some text that is placed in the transparent box.
This is some text that is placed in the transparent box.
</p>
</div>
</div>
</body>
</html>
i cant get IE to render opacity correctly. filter: alpha(opacity=50); opacity: .5; i know the filter is for Firefox and the opacity is for IE. but it doesnt seem to work. any ideas? I am trying to make the background transperency.. but the text on it should be bright and visible.. but i am not able to make the text brighter opacity:0.25; -moz-opacity:0.25; filter:alpha(opacity=25); u can look at the menu bar here http://www.harshamv.com/test/ I've set the main div content for opacity like this #content-main { margin-right:1%; margin-top:0; margin-bottom:2%; width:58%; background-color:#ffffff; filter:alpha(opacity=70); opacity:0.7; } but when I put an image in the div it acquires the opacity, and I want it to have none. I've tried to give it a style of opacity:1 and it didn't help. I tried alterting the image z-index to greater than 1 and it didn't help. How do I get the image not to acquire the opacity of the div? Thanks I have a weird problem. I've applied opacity in my stylesheet for a few elements. My opacity is working fine in FF, but not in IE. Here's the code I have: filter: alpha(opacity=75); -moz-opacity:0.75; opacity:.75; I've also applied it inline as well as in the stylesheet. Page is located at: ebonyevans.coastaldistribution.com/index.php The top center and top left music player should be opaque. Anyoen see what I'm doing wrong? I have opacity set for a column <td> but I only want the background image to be 50% opaque, not the text too. I tried the following... <td style="filter:alpha(opacity=50);"> <span style="filter:alpha(opacity=100);"> Text here...</span></td> Is there a reason why the 2nd style="filter:alpha()" has no effect on the text what so ever? The image is already transparent, I exported it as a PNG file with transparency allowed or what not. Can someone explain me how to set on a photo-background ( opacity 100% 640x480 ) a square of 320x320 as size and opacity @ 25% and on that square i have to put some text that is at 100% opacity. The problem is that when i set 100% opacity for the text... it gives me 100% of the 20% opacity... i need to get the full 100% of 100% opacity... can someone explain me ? And another question... how can i set an opacity for Opera Browsers ? What code would I have to write to make an image 50% opacity. Would I just place a class on the image on my html page and use my CSS stylesheet to add the opacity code. If so, what would it be on the CSS stylesheet? Will this work on all browsers and platforms or will it be buggy? Please look at this page - http://www.tmhdesign2.com See the nav bar with the green background and white font? I want that background to have an opacity of say 70% but when I do that the font also gets that opacity which is what I don't want. Hallo! I'm a newbie here, and in CSS too, and would like to be helped from you guys.. I want to make a content with a transparent/opacity background, and since i dont want the content to be transparent too, i make two divs. <div id="opacBkg" style=" position: absolute; z-index: 15; left: 10%; top: 155px; bottom: 20%; width: 80%; background-color:#999933; opacity: 0.50; filter: alpha(opacity = 0.50); -moz-opacity: 0.5; "></div> <div id="Content"> <h3 style="text-align:right;">Welcome to ABC Service</h3> <h1 style="text-align:right;">Wilkommen auf ABC Service</h1> </div> and i have put the Conten declaration in style.css. The #Content: #Content { position: absolute; z-index: 20; left: 10%; top: 155px; bottom: 20%; width: 80%; font-family: Garamond, "Times New Roman", Times, serif; font-size: 14px; color: #ffffff; overflow: auto; margin: 20px 10% 5px 10px; } And so i have make 2 overlapping divs.. And the problem is that the text appears to be slightly mispositioned, the text is out of the background div.... Hope you can help me... i have a css box that has opacity however when i display images inside it does it to the images too is there a way around that
Code: /* for IE */ filter:alpha(opacity=60); /* CSS3 standard */ opacity:0.6; Hello, I'm having a problem using opacity in IE. My opacity works fine in Mozilla but it doesn't want to work in IE. I don't think that it is my css code: Code: .ui-slider-disabled .ui-slider-handle { opacity: 0.5; filter: alpha(opacity=50); }
7.ui-slider-range { position: absolute; background: #fcff00; opacity: 0.3; filter: alpha(opacity=30); width: 100%; height: 100%; }
Can anyone help me? My website page: http://www.demo.iadvise.be/pls/apex11g/f?p=1006:40 Thanks in advance Kind regards, Oli |
|||||||