Tables - Opacity - Images

[CCR-XY-1001]

Hello, ok first I'll start off stating that I'm not very good in CSS. Second I'll state that I try to play with my coding, but that opacity is troubling me.

Here is the problem.

- I'm on MySpace
- I'm using the sites preset table area to hold all my codes
- I'm using a code set to specificly put a tiled image behind the tables
- Only when I try using the opacity coding for alpha filter and such do I see a problem; my tables load with the opacity correct, but then the tables get CUT IN HALF so only the left side of the datta in the table is visible.

I'm guessing I need to either not use an image to work opacity or maybe set a range the tiles have to span across to work? Am I thinking padding? I'm confused.

Other info
- Running IE
- I've seen a perfectly stable opacity job done with a SOLID COLOR, without tables being cut off (of course can't get in contact with that person).

Thank you if anyone can help. (maybe tell which tags I have to use to show the coding in the posts without it reading)

[jscheuer1]

The alpha opacity shouldn't change the layout or visibility of elements it is correctly applied to. If you want your opacity values to show up in other browsers besides IE, you should also set -moz-opacity and just plain opacity in the same style code:

style="filter:alpha(opacity=90);-moz-opacity:0.90;opacity:0.90;"

So we can see your code, either:

PLEASE: Include the URL to your problematic webpage that you want help with.

or:

Post your code here, put code tags:

[code]

code goes here

[/code]

around your code in messages here so that it appears as it was when you copied it from your page.

[CCR-XY-1001]

<Style type="text/css"> table table td{width:100%;} table table table td{width:auto;} table table table{width:100%;background-image:url(MY IMAGE HERE);background-position:Top Left;background-repeat:repeat;padding:4px;} table table table table{width:auto;background-image:none;background-color:transparent;border-style:none;} </Style>

I'm guessing I need the statement and not simply...

]<Style type="text/css"> table table td{width:100%;} table table table td{width:auto;} table table table{width:100%;background-image:url(MY IMAGE HERE));-moz-opacity:0.90;opacity:0.90;background-position:Top Left;background-repeat:repeat;padding:4px;} table table table table{width:auto;background-image:none;background-color:transparent;border-style:none;} </Style>

or something like that.

MySpace editors even fail in opacity and they give, oddly at the moment I'm trying to check their coding with what you state, the builders seem to be currently inactive/disabled for some reason.

I'll tweak my code a little trying again and see what happens. If it still fails I'll show what other coding might possibly be getting in the way. I got a lot of crud though, so it's going to be kinda annoying to track, but oh well.

Thanks for a responce though.

----

Granted I am unaware if this forum dislikes the titlted "double reply", I'll edit in.

I'm reading something here: http://www.mandarindesign.com/opacity.html

Yet, this writer is realy annoying me. No clear explaination IMO as to what the heck is going on. Not telling the readers easily what they are doing, just handing out stuff. I can't learn from this. But I'm going to try.

----

I think this answers the question: http://authors.phptr.com/essential/gimp/section2.html

If I'm reading that right, it means the trouble is I'm not setting an area for the filter to stretch to, and thus it needs a set boundry to propperly work, otherwise it will only work to a certain area (thus I get the cut off effect).

That's what I'm thinking...

[jscheuer1]

The nesting of table elements as implied by your style selectors (highlighted red):

<Style type="text/css">
 table table td{
width:100%;
}
 table table table td{
width:auto;
}
 table table table{
width:100%;
background-image:url(MY IMAGE HERE));
-moz-opacity:0.90;
opacity:0.90;
background-position:Top Left;
background-repeat:repeat;
padding:4px;
}
 table table table table{
width:auto;
background-image:none;
background-color:transparent;
border-style:none;
}
 </Style>

is almost always a bad idea, due to extra lag in loading the page. Depending upon your markup, it also can (and usually will) add confusion as to which style is being applied to which element.

My arbitrary choice of 0.90 for the opacity value is just that, arbitrary. Available values are from 0 to 1 in .01 increments or in the case of the filter:alpha method, 0 to 100 in increments of 1. I see you left out the filter:alpha method in the above, this means that no opacity effects will be observed in IE.

[phi]

CCR, i'm pretty sure i know what you're talking about here. i've also tried table opacity on myspace, and my About Me and Interests tables are cut short horizontally. The longest table by far, the comments table, is not cut short.

it may be important to note that this only happens on IE. i checked it on Firefox and the tables work fine, but there's significant scroll lag.

UPDATE:

I believe i have it fixed for IE. Add your opacity to table 1, NOT 3 (table table table), then add filter:none to all three other tables. here's mine:

table {
     direction: rtl; 
     filter: alpha(opacity=90); opacity:0.90; -moz-opacity:0.90; -khtml-opacity:0.90;
}
table, td {
     background-color: transparent; 
     border: none;
     border-width: 0;
} 
table, tr, td {
     background-color: transparent;
     border: 0px;
     padding: 2;
} 
table table { border: 0px; filter: none; }
table table table {
     background-color: ffeedf;
     border: 3px ridge;
     border-color: ffeedf;
     direction: ltr;
     padding: 1;
     filter: none;
}
table table table td { color: 774a22; } 
table table table table { border: 0px; filter: none; }

this tests flawlessly for me in IE. It looks fine in Firefox, but is still laggy for me. In Netscape 6.2, only a few small areas are transparent, and it lags. I don't have Netscape 8 right now, so i don't know.

i may mess around with it some more to see if i can eliminate the lag in Firefox, but i doubt i can. to jscheuer: yes, nested tables suck, but that's the way myspace is set up, and as far as i know there's no way to change it.

you can view my profile at http://www.myspace.com/fien

[sullensilhouette]

I used the opacity code that I saw in the forums, but then the tables get truncated. How can I fix it?

[bountyhunter_ep]

I just created a really cool layout, and i wanna use it for myspace, but the opacity won't change. I want it on 45%, but it doesn't go down when i view my profile. I used the layout generater on towercodes.com. Can someone please help me fix the opacity...the code is below

<div style="position:absolute;left:0px;top:0px;"><a href="http://www.towercodes.com/"><img src="http://www.towercodes.com/images/logo.gif" border="0" alt="MySpace Layouts" /></div><style type="text/css">
body {
background-color: rgb(255,255,255);
background-image: url(http://www.towercodes.com/uploads/20.../20060513_Love and Hate_1147548811591115.gif);
background-position: top left;
background-repeat: repeat;
background-attachment: fixed;
}
table, tr, td {
background-color: transparent;
border: 0px;
}

table table {
border: 0px;
}
table table table table{
border:0px;
}
table table table {
border-width: 1px;
border-color: rgb(122, 0, 0);
border-style: solid;
background-color: transparent;
}
table table table td {
background-color: rgb(255, 255, 255);
style="filter:alpha(opacity=40);-moz-opacity:0.40;opacity:0.40;"
}
table table table table td {
filter:alpha(.45);

}
body, div, span, td, p, .orangetext15, .whitetext12, .lightbluetext8, strong, b, u, .redtext, .redbtext, .btext, .text, .nametext, .blacktext10, .blacktext12 {
font-family: Trebuchet MS;
font-size: 12px;
color: rgb(0, 0, 180);
font-weight: bold;
font-style: italic;
text-decoration: none;
}
.nametext {
padding: 5px;
display:block;
font-family: Trebuchet MS;
font-size: 15px;
color: rgb(200, 0, 0);
font-weight: bold;
font-style: italic;
text-decoration: underline;
}
.whitetext12, .orangetext15 {
font-family: Trebuchet MS;
font-size: 15px;
color: rgb(200, 0, 0);
font-weight: bold;
font-style: italic;
text-decoration: none;
}
a.navbar:link, a.navbar:active, a.navbar:visited, a.navbar:hover, a.man:link, a.man:active, a.man:visited, a.man:hover, a, a:link, a:active, a:visited, a:hover, a.navbar:link, a.navbar:active, a.navbar:visited, a.navbar:hover, a.text:link, a.text:active, a.text:visited, a.text:hover, a.searchlinksmall:link, a.searchlinksmall:active, a.searchlinksmall:visited, a.searchlinksmall:hover, a.redlink:link, a.redlink:active, a.redlink:visited, a.redlink:hover {
color: rgb(0, 180, 0);
font-weight: bold;
font-style: italic;
text-decoration: none;
}
a.navbar:hover, a.man:hover, a:hover {
color: rgb(200, 0, 0);
font-weight: bold;
font-style: italic;
text-decoration: underline;
}
</style><br />Create your own custom <a href="http://www.towercodes.com/">MySpace Layouts</a><br /><br />

[ssylent]

hi guys.

no stranger to html, but certainly not a pro either. i DO know that i hate nested tables with a passion, and myspace is no different.

i simply could not be satisfied with the current board layout provided, so i took it upon myself to find a solution. it's a work in progress, but i think i'm getting there.

no you can't get rid of the nested tables, but you can get around them.

view my myspace to see what i mean www.myspace.com/ssylent

right now, i'm trying to find code that will let me center an image in each table i place one, and then adjust the opacity for that image so the overall background can still be seen.

like i said, i'm not a html pro, and css is pretty much greek to me, but i'm learning. haven't had to ask for help with any coding yet, but i also won't refuse it. if you have a solution to my 'opacity' problem, lemme know.

thanks,

ssy