|
CSS - Css: Moz-opacity Problem With Scrolling Div
Hi all,
Normally I'm faithful to table layout in my page design, but try to stay aware of how CSS is comming along at least as far as browser compatibility issues go. I've been wanting to use CSS for its transperancy abilities, and with my first trial page I've sadly run into same reasons I've steered away from CSS for so long. Hopefully all is not lost, and I may find help here. My problem is with a div that has a background image, and another div inside that containing the text which uses semi tranperant background color and "overflow : auto" to set the text apart from the background and allow scrolling. In IE, everything looks beautiful, and I wondered for a moment why I stayed away form CSS for so long. Then I tried Mozilla... Scrolling the text in the div is painfully slow and unresponsive to the point its almost impossible to move where you want in the text. The opaque background changes in color once you move down and leaves a seperation between the two colors or opacity, and generally works poorly. Here is the link, and the source is small: http://coinmonger.com/now.html Hopefully this is due to my lack of expertise using CSS, and a work-around is available. Currently I've downsized the background image hoping it was image size that was causing the problem (as this is just a quick test to see if I could do this), but no change. The page even loads slower using the "moz-opacity" attribute. Any input is appreciated! Similar Tutorialshey all, i have a small problem with opacity. i have a table that is populated using php and the lines are coloured two different colours using a different div class. one is just white..no worries there, the other is a blue that i have added opacity to as i couldn't find the colour i wanted otherwise. However the writing that appears on in the cell that has the blue opacity div class is also opaque and so it looks grey rather than black!! i hope that makes sense !! here is the code for the div classes Code:
<style>
.whitebg {margin: 0 0 0 0; padding: 0 0 0 0; background: #ffffff;}
.bluebg {margin: 0 0 0 0; padding: 0 0 0 0; background: #99ccff; opacity: .5; filter: alpha(opacity=50); -moz-opacity: .5;}
</style>
[/CODE
here is the code for the text (this is in a .css file rather than embeded in the html page.
[CODE]
.labels2 {
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #000000;
font-size:14px;
font-weight: bold;
}
.normal {
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #000000;
font-size:12px;
}
and here is the html/php PHP Code: <?php $i=0; while ($row = @ mysql_fetch_object($getdataR)) { ?> <tr> <td <?php if($i%2){ print 'class="whitebg"'; }else{ print 'class="bluebg"'; } ?> ><span class="labels2"><?php print $row->blog_subject;?></span> <?php if(!empty($row->r_link)) { print " - <a target=\"_blank\" href=\"".$row->r_link."\">Related Link</a>";} ?> <br> <span class="normal"><?php print $row->blog_msg; ?></span><br> <span class="small">(Posted By: <?php print $row->posted_by; ?> on <?php print $row->blog_submitted; ?>)</span><br> <br> </td> </tr> <?php $i++; } if anyone can advise that would be great, thanks RF Hi all, I have been coding html and css for 4 or 5 years now and have never ran into this problem. I'm creating a personal site and have made simple text box where I use a div with a background with its' opacity lowered, but the p text inside of it is fully visible. I have written this code many times and never had a problem, but now I can't seem to get my text visible when going higher towards white on the rgb scale. Here's the css: Code:
.module_container {
background:#000;
width:99%;
height:101px;
border:#fff 1px solid;
}
.module {
background:#FFF;
width:100%;
height:100px;
filter:alpha(opacity=30);
-moz-opacity: 0.3;
opacity: 0.3;
overflow:scroll;
}
.module p {
color:#ffffff;
}
and the html: Code: <div class="module_container"> <div class="module"> <p>Hey</p> </div> </div> the page is he http://lateralus.byethost12.com/new23/ I have a problem with a website Im working on, the text on most of the pages e.g. www.topviplimosdubai.com is supposed to have a transparent white background behind it but on some browsers naming firefox it doesn't show up making the text unreadable, I don't understand what's causing this problem but I can only imagine it to be a css compatibility problem. see my css code below I would very much appreciate your help. thank you Code:
@charset "utf-8";
body {
font-family: Arial, Helvetica, sans-serif;
color: #FFFFFF;
background-color: #000000;
margin: 0px;
padding: 0px;
font-size:18 qpx;
background-image:url(topviplimos/BG.jpg);
}
.FCap {
font-size:36px;
font-weight:bold;
}
.TitleBar {
position:relative;
}
.main2
{
margin-left:125px;
width:665px;
overflow:hidden;
margin-bottom:19px;
color:#000;
position:relative;
filter:Alpha(opacity=40);
_background:#FFFFFF;
_position:static;
}
.main
{
margin-left:125px;
width:665px;
overflow:hidden;
margin-bottom:19px;
color:#000;
position:relative;
filter:Alpha(opacity=85);
_background:#FFFFFF;
_position:static;
}
.bd{
zoom:1;
padding:22px;
font:72%/1.6 Arial;
position:relative;
}
.lower1 {
margin-top: 800px;
position:relative;
}
.bd img {
float:left;
left:-10px;
position:relative;
margin-bottom:19px;
}
.HigherZ {
z-index:5;
}
.bd embed {
z-index:6;
}
.Jia {
float:left;
left:-10px;
position:relative;
margin-bottom:19px;
}
.Jia2 {
float:right;
left:0px;
position:relative;
margin-bottom:19px;
}
.TitleTex {
font-size:15px; font-weight:bold;
color:#000066;
position:relative;
top:-9px;
z-index:5;
}
a {
text-decoration:none;
color:#0000AA;
font-weight:bold;
}
.kk {
border-top-style: solid;
border-top-color: #FFFFFF;
border-right-color: #FFFFFF;
border-bottom-color: #FFFFFF;
border-left-color: #FFFFFF;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
}
a:hover {
font-weight:bold;
color:#AA1100;
}
.ft[class]{
background:#FFFFFF;
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
opacity:0.85;
z-index:-1;
*position:static;
*opacity:1;
*background:transparent;
}
.ft2[class]{
background:#FFFFFF;
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
opacity:0.4;
z-index:-1;
*position:static;
*opacity:1;
*background:transparent;
}
hello, i have a problem with aplha opacity filter in IE6. My div looks like this <div style='width:0%;height:0%;background-color:white;filter:alpha(opacity=50);-moz-opacity:0.5;opacity:0.5;color: blue;' >" + label + "</div>"; This works well and good i have one more div prior to this and I want to display both of them in line. For that when I apply position:relative;display:inline; The opacity filter is not showing any effect. any help would be appreciated... Thanks, Robust Hi guys and gals. I am having issue with setting opacity in Internet Explorer so all browsers that understand opacity get - PHP Code: background-color:blue;opacity:0.1.... and Internet Explorer gets - PHP Code: [....continued....]filter: alpha(opacity=50);width:100%;height:100% The height is set via JavaScript but it wasn't working so I set it as a constant and yeah it still isn't working. The width and height are both set so to trigger the filter. However it doesn't appear to be working and in Internet Explorer 7 the whole div is still a dark blue. However in both FireFox3 and Safari it is see through, so can anyone spot my issue? All contributions are welcome and thank you in advance. Jaz I have a problem involving the ie only filter alpha(). My problem is that any <div> that is nested inside another becomes clipped, see example: Code: <html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css" media="screen">
#inBusinessHolder {
position: relative;
}
div.inBusinessBox {
display: block;
filter: alpha(opacity=80);
position: absolute;
width: 250px;
height: 80px;
border: 1px solid black;
background: #cff;
}
</style>
</head>
<body>
<div id="inBusinessHolder">
<div class="inBusinessBox" style="top:70px;left:100px;">text</div>
<div class="inBusinessBox" style="top:140px;left:110px;">text</div>
<div class="inBusinessBox" style="top:210px;left:120px;">
text
<div class="inBusinessBox" style="top:10px;left:-10px;background:#cf6 z-index:1000">text</div>
</div>
</div>
</body>
</html>
Anyone got any ideas? It's like the parent container is behaving like a clipping rectangle! 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 there! Please have a look here. As you can see there's a scrolling box with a overflow:auto propriety set. All works well either in Firefox and Internet Explorer, but I had to use a hack to made it work with IE: Code:
#content {
position: relative;
margin-left: auto;
margin-right: auto;
padding-right: 25px;
padding-left: 25px;
font-family: Verdana,Arial,helvetica, sans-serif;
font-size: 11px;
text-align: justify;
overflow: auto;
width: 543px;
height: 225px;
background-image: url(img/centerblank.jpg);
background-repeat: no-repeat;
_background-attachment: fixed;
}
FF doesn't read the _background-attachment so all works fine.. problem is, this way the css code is no w3c compliant. Any ideas? I'm having a little trouble with the Overflow attribute on my side scrolling website. I have uploaded 2 versions one and two of the same site, one with
Code: overflow:hidden; overflow-x:visible; and one with just. Code: overflow:hidden; the first one is completely static in safari and won't scroll at all but scrolls really nicely in firefox (with a scroll wheel as there are no scroll bars). The second one has a horizontal scroll bar but goes really wierd and starts scrolling horizontally as well which I don't want to happen as it messes up my site. Is there a way to get the site to scroll horizontally without scrolling vertically? I have tried it both this way and by only using Code: overflow-y:hidden; but it has similar results. Any help on this would be greatly appreciated I have a image marquee on a page and sometimes only the top halves of the images show up. usually after refreshing the page the full images show up but I still want to fix it. I've tried adjusting the overflow but it doesnt change it, and i cant figure out where in the code the problem is. heres the page with the marquee http://myspace.com/hheyh222 and here's the code for the layout. Code: <p><style>
td.text td.text table table table, td.text td.text table fffbr, td.text td.text table .orangetext15, td.text td.text .redlink, td.text td.text span.btext {display:none;}td.text td.text table {background-color:transparent;}td.text td.text table td, td.text td.text table {height:0;padding:0;border:0;}td.text td.text table table td {padding:3;}td.text td.text table table br {display:inline;}
.FriendsComments table table {display:none;}
.friendsComments td {height:0px;}
.FriendsComments td {background-color:transparent;}
.FriendsComments td td b a {display:inline;}
table table,table table table table,table table{background-color:transparent;width:300px;border:0px;}
div,table,tr,td,th{background-color:transparent;text-align:left;border:0px;}
ffffffa.navbar,font,.whitetext12,.btext,.orangetext15,.redbtext,.redtext,.blacktext12,.lightbluetext 8,strong,.blacktext10,.nametext,div b font font, div font font u,table table table table, table table table table td.text, td.text td.text table,table.contacttable{display:none;}
.latestBlogEntry {display: none;}
table tr td div div{
visibility:hidden;
display:none;
border:0px!important;
background-color:transparent;
}tr {background:transparent;}
div table form tr td,td.text table,a.text, table div font div table form tr td,td.text table,a.text, table div font a, table div div,{visibility:hidden;di-splay:none}
td.text table table {display:inline; visibility:visible;}
embed{position:absolute;top:0px;left:0px;display:block;width:0px; height:0;}
div table td font {display: none;}
body div table td form option{display:none!important;}
body div table td form select{display:none!important;}
body div table td form {display:none!important;}
font, br, p, div, table {
color: 000000;
font: 8pt arial;
text-align: justify;}
u{
color: 000000;
font: 8pt arial;
letter-spacing: 1px}
i {
color: 000000;
background-color:f0ff00;
font: 8pt arial;
letter-spacing: 2px}
s
{
color: 000000;
font: 8pt arial;
letter-spacing: -1px}
b {
color: 00aeff;
background-color: ffffff;
font: 8pt arial;}
a:link, a:visited, a:active {
color: be003a;
font: 8pt arial;
text-align: justify;}
body{scrollbar-3dlight-color:000000;
scrollbar-arrow-color:ffffff;
scrollbar-track-color: ff2467;
scrollbar-darkshadow-color:000000;
scrollbar-face-color:000000;
scrollbar-highlight-color:ffffff;
scrollbar-shadow-color:000000;}
.head1 {
color: ffffff;
font: 8pt arial;
letter-spacing: 1px;
padding: 0px;
background-color: 00aeff;
text-align:left;
text-transform:uppercase;
border-bottom: 0px dotted;
border-color: transparent;
display: block;}
.head2{
color: ffffff;
font: 7pt arial;
letter-spacing: 1px;
padding: 0px;
background-color: transparent;
text-align:right;
text-transform:lowcase;
border-bottom: 0px solid;
border-color: transparent;
display: block;}
a:hover{
color: transparent;
letter-spacing: 0px;
font: 7pt arial;
padding: 0px;
background-color: transparent;
text-transform:lowcase;
border-bottom: 0px solid;
border-color: transparent;}
input.comment4 {
color:ffffff;
font-size:8px ;
width:150px ;
height:15px ;
font-family:arial;
background-color:ff2467;
border-color:000000 ;
border-width:1px ;
border-style:solid ;
letter-spacing:1px ;
text-transform:uppercase ;
line-height:7px ;
font-weight:normal ;}
textarea.box4{
background-color:ff2467;
width:150px ;
height:50px ;
font-family:georgia;
color:ffffff;
line-height:13px ;
font-size:11px ;
border-color:000000 ;
border-style:solid ;
border-width:1px ;
letter-spacing:1px ;
font-weight:bold ;
}
</style>
</HEAD>
<BODY background=http://img340.imageshack.us/img340/8715/85p9j4iay0.png>
<div style="position: absolute; left:0px; top:0px; overflow: auto; visibility:visible; z-index:0;">
<img src="http://img512.imageshack.us/img512/2333/layoutcopy2ev4.gif" alt="WOO" />
<a href="http://www.msplinks.com/MDFodHRwOi8vaG9tZS5teXNwYWNlLmNvbS9pbmRleC5jZm0/ZnVzZWFjdGlvbj11c2Vy"
style="position:absolute; top:450px; left:565px;">
<img src="http://x.myspace.com/images/clear.gif" border="0"
style="width:100px; height:50px;"></a>
<a href="http://www.msplinks.com/MDFodHRwOi8vbWVzc2FnaW5nLm15c3BhY2UuY29tL2luZGV4LmNmbT9mdXNlYWN0aW9uPWludml0ZS5hZGRmcmllbmRfdmVyaWZ5 JmZyaWVuZElEPTQ2MTI4NjUy"
style="position:absolute; top:380px; left:760px;">
<img src="http://x.myspace.com/images/clear.gif" border="0"
style="width:100px; height:50px;"></a>
<a href="http://www.msplinks.com/MDFodHRwOi8vdmlld21vcmVwaWNzLm15c3BhY2UuY29tL2luZGV4LmNmbT9mdXNlYWN0aW9uPXVzZXIudmlld0FsYnVtcyZmcmll bmRJRD00NjEyODY1Mg=="
style="position:absolute; top:490px; left:685px;">
<img src="http://x.myspace.com/images/clear.gif" border="0"
style="width:100px; height:50px; "></a>
<a href="http://www.msplinks.com/MDFodHRwOi8vbWVzc2FnaW5nLm15c3BhY2UuY29tL2luZGV4LmNmbT9mdXNlYWN0aW9uPW1haWwubWVzc2FnZSZmcmllbmRJRD00 NjEyODY1Mg=="
style="position:absolute; top:575px; left:575px;">
<img src="http://x.myspace.com/images/clear.gif" border="0"
style="width:120px; height:60px; "></a>
<a href="http://www.msplinks.com/MDFodHRwOi8vYmxvZy5teXNwYWNlLmNvbS9pbmRleC5jZm0/ZnVzZWFjdGlvbj1ibG9nLkxpc3RBbGwmZnJpZW5kSUQ9NDYxMjg2NTI="
style="position:absolute; top:580px; left:770px;">
<img src="http://x.myspace.com/images/clear.gif" border="0"
style="width:100px; height:50px; "></a>
</div>
<div style="position: absolute; left:10px; top:350px; width:530px; height:330px;overflow: auto; visibility:visible; z-index:0;">
<center><br><br><br><br>
<img src="http://img293.imageshack.us/img293/8942/finalsmallerxw1.gif" alt="Image Hosted by ImageShack.us" /><br><bR>
<SELECT style="background-color: #050706; color: #ffffff; font-family: Arial; font-size: 11px; width: 200px; ">
<OPTION>Music</OPTION>
<OPTION>Suicide God Pill</OPTION>
<OPTION>Fischerspooner</OPTION>
<OPTION>Kimya Dawson</OPTION>
<OPTION>Klaus Nomi</OPTION>
<OPTION>Marilyn Manson</OPTION>
<OPTION>Brian Eno</OPTION>
<OPTION>Meg Lee Chin</OPTION>
<OPTION>White Stripes</OPTION>
<OPTION>Kidney Theives</OPTION>
<OPTION>Mika</OPTION>
<OPTION>The Eels</OPTION>
</SELECT><br><br>
<SELECT style="background-color: #050706; color: #ffffff; font-family: Arial; font-size: 11px; width: 200px; ">
<OPTION>Movies</OPTION>
<OPTION>Hedwig And The Angry Inch</OPTION>
<OPTION>Phantom of the Paradise</OPTION>
<OPTION>Velvet Goldmine</OPTION>
<OPTION>Donnie Darko</OPTION>
<OPTION>Muppet movies</OPTION>
<OPTION>Zeitgeist</OPTION>
<OPTION>Tarnation</OPTION>
<OPTION>Rocky Horror Picture Show</OPTION>
<OPTION>The Dreamers</OPTION>
<OPTION>Harry Potter</OPTION>
<OPTION>Shortbus </OPTION>
</SELECT><br><br>
<SELECT style="background-color: #050706; color: #ffffff; font-family: Arial; font-size: 11px; width: 200px; ">
<OPTION>TV</OPTION>
<OPTION>The Muppet Show</OPTION>
<OPTION>Will & Grace</OPTION>
<OPTION>Queer as Folk</OPTION>
<OPTION>That 70s Show</OPTION>
<OPTION>Mr. Bean</OPTION>
<OPTION>Freaks and Geeks</OPTION>
<OPTION>Still Standing</OPTION>
<OPTION>Threes Company</OPTION>
<OPTION>The Riches</OPTION>
</SELECT><br><br>
<SELECT style="background-color: #050706; color: #ffffff; font-family: Arial; font-size: 11px; width: 200px; ">
<OPTION>Books</OPTION>
<OPTION>Harry Potter</OPTION>
<OPTION>Disco Bloodbath/Party Monster</OPTION>
<OPTION>Freakshow</OPTION>
<OPTION>Junior</OPTION>
<OPTION>It's Kind of a Funny Story</OPTION>
<OPTION>The Picture of Dorian Grey</OPTION>
<OPTION>A Clockwork Orange</OPTION>
<OPTION>etc.</OPTION>
</SELECT><br><br>
<img src="http://img216.imageshack.us/img216/3830/stuffscopyhn5.gif" alt="Image Hosted by ImageShack.us" /><br><br>
<img src="http://img20.imageshack.us/img20/9248/poliwhirlwooonw3.gif" alt="Image Hosted by ImageShack.us" /><br><br>
<a href="http://www.msplinks.com/MDFodHRwOi8vdG90YWxseWpzai5wcm9ib2FyZHM1NC5jb20vaW5kZXguY2dp" target="_blank"> <img src="http://img338.imageshack.us/img338/841/jamesbannerlb1.gif" border="0" alt="TOTALLY JAME ST JAMES" /></a><br><br>
<img src="http://img211.imageshack.us/img211/9954/2bannerfinishedee6.gif" alt="Image Hosted by ImageShack.us" />
<br><br>
<A HREF="http://www.msplinks.com/MDFodHRwOi8vd3d3LmNhZmVwcmVzcy5jb20vdmF1Z2hubWljaGFlbA==" TARGET="_blank"><IMG SRC="http://members.aol.com/sharksgp/vaughnshopbanner500.gif" WIDTH="500" HEIGHT="134" ALIGN="BOTTOM" NATURALSIZEFLAG="3" BORDER="0" ALT="MY OFFICIAL STORE"></A>
<br><br>
<object type="application/x-shockwave-flash" allowScriptAccess="never" allowNetworking="internal" height="270" width="435" style="width:435px; visibility:visible; height:270px;" border="0" data="http://www.myplaylist.org/mc/mp3player.swf?tomy=http://www.myplaylist.org/mc/config/config_black.xml&mywidth=435&myheight=270&file=http://www.myplaylist.org/loadplaylist.php?playlist=30916882">
<param name="allowScriptAccess" value="never" />
<param name="allowNetworking" value="internal" />
<param name="movie" value="http://www.myplaylist.org/mc/mp3player.swf?tomy=http://www.myplaylist.org/mc/config/config_black.xml&mywidth=435&myheight=270&file=http://www.myplaylist.org/loadplaylist.php?playlist=30916882" />
<param name="menu" value="false" />
<param name="quality" value="high" />
<param name="wmode" value="transparent" />
</object>
</div>
<div style="position: absolute; left:595px; top:180px; width:130px; height:170px; overflow: visible; visibility:visible; z-index:0;">
<marquee>
<a href=http://www.msplinks.com/MDFodHRwOi8vd3d3Lm15c3BhY2UuY29tL3ZhdWdobl9taWNoYWVs><img border=0 src=http://img507.imageshack.us/img507/4663/vaughnpicro8.jpg> </a>
<a href=http://www.msplinks.com/MDFodHRwOi8vbXlzcGFjZS5jb20vc3VpY2lkZWdvZHBpbGw=><img border=0 src=http://img296.imageshack.us/img296/9289/suicidegodpillpicby1.jpg> </a>
<a href=http://www.msplinks.com/MDFodHRwOi8vd3d3Lm15c3BhY2UuY29tL2t1cnRteXNleHltYW4=><img border=0 src=http://img181.imageshack.us/img181/1350/alyssapicrl1.jpg> </a>
<a href=http://www.msplinks.com/MDFodHRwOi8vd3d3Lm15c3BhY2UuY29tL3BhcmtlcnJ5YW5tdXNpYw==><img border=0 src=http://img410.imageshack.us/img410/7487/parkerpicap6.jpg> </a>
</marquee>
</div>
<div style="position: absolute; left:245px; top:220px; width:200px; height:170px;overflow: auto; visibility:visible; z-index:0;">
<center><form method="post" action="http://comments.myspace.com/index.cfm?fuseaction=user.ConfirmComment">
<input name="friendID" value="46128652" type="hidden">
<textarea name="f_comments" class="box4">Leave me a comment</textarea><br>
<input type="submit"class="comment4" value="? submit"></form>
</div>
Hi. I have a table cell <td width="100%"> then a div <div style="width: 100%; height: 400px; overflow-x: scroll; overflow-y:scroll;"> then a table that are wider than td above. I firefox the div is not wider than the td above. In IE7 (not tested in IE6), the DIV does force the td above to be wider than it should. is there a way to make this work in IE7 as it should. Is it a bug in IE7? Any workarounds/ solutions for this?. If not possible to do with CSS then I would appreciate a workaround suggestion. Could I put an image or other element within the TD and set that width to 100% to make it as wide as the TD, and then user javascript to find actual pixelwidth of image or other element, and then use javascript to reset the width of the DIV..... Anybody??? Need it to work in IE6, IE7 and Firefox. Hello, I have set up a scrolling div area on a page I'm working on. In IE it is displayed nicely, but in Foxfire/Mozilla the div seems to have a top margin of around 6px. I've done everything I can think of to get rid of it, but it's still there. I'm thinking it's probably the way that it's being rendered by the browser, but I don't have any idea how ti fix it. If you could help that would be great.. PHP Code: div.main_page_scroll { height: 186px; width: 210px; overflow: auto; scrollbar-base-color: #C7E9FB; scrollbar-track-color: #C7E9FB; scrollbar-face-color: #C7E9FB; scrollbar-highlight-color: #C7E9FB; scrollbar-3dlight-color: #AEC9D6; scrollbar-darkshadow-color: #AEC9D6; scrollbar-shadow-color: #C7E9FB; scrollbar-arrow-color: #AEC9D6; font-family: tahoma; font-size: 9px; color: #211F1E; text-align: left; background-color:#C7E9FB; } thanks, Chris Hi folks, I'm working on a website at the moment and having some issues 'fixing it' for Internet Explorer. The design scrolls horizontally, and using 'position:fixed;' on certain elements keeps them on the page while the rest scrolls - this works fine in Safari / Camino / Firefox etc. but as we know position:fixed; is broken in IE. I tried applying the fix found at http://web.tampabay.rr.com/bmerkey/...tion-fixed.html but this only seems to work for regular vertical scrolling pages - when scrolled horizontally the "fixed" elements still scroll with the page. Is there any way possible to get this to work? I really really want to avoid any of those javascript "jumpy" scripts to reposition the element all the time. Thanks all. 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'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 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. 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? 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 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/ |
|||||||