Welcome Guest   ·   Login   ·   Register   ·   Member List
Forum Home  >  CSS help  >  Help with CSS  >  Thread
Search  
  
  Advanced Search
   
 
Help with CSS: PNG semi-tranparent background for tables SORTA working
 
godfallen
Posted: 30 November 2007 04:10 PM   [ Ignore ]
Newbie
Rank
Total Posts:  2
Joined  2007-11-30

ok…as bad as this seems, I am something of a myspace geek, but none of their help boards seem ot asnwer this problem I am having.

I created a semi transparent PNG file for the background on my tables section. Thats working GREAT..exactly what I wanted, but now I am having this problem where there is blocks of darker color surrounding my text and any other objects WITHIN the tables..and it’s just making it look crappy, especially when it is only happening to about 75% of the page.

http://www.myspace.com/godfallen_layouts

here is the code

<Style type="text/css"> body{ background-color:FFFFFF;
background-image:url(http://img.photobucket.com/albums/v286/Godfall/japanese_****_geisha.jpg);
background-position:bottom right; 
background-attachment:fixed;
 background-repeat:no-repeat; } 

Table, Td
{ background-color:transparent; } 

table table table
{ width:auto;
background color:transparent;
background-image:url(http://img.photobucket.com/albums/v286/Godfall/stuff/fader.png);
background-repeat:no-repeat;
border-color:7CFC00; 
border-style:dashed; 
border-width:3px; } 

table table table table td 
{width:auto; 
background-image:none; } 

table table table table, table table table td
{ border-style:none; } 
body, div, p, strong, td, .text, .blacktext10, .blacktext12, 
a.searchlinkSmall, a.searchlinkSmall:link, a.searchlinkSmall:visited
{ color:8A3324; 
font-size:12pt; 
font-weight:bold; 
font-style:normal; 
font-family:Helvetica, verdana, arial, sans-serif; } 
.orangetext15, .lightbluetext8, .whitetext12, 
.nametext, .btext, .redtext, .redbtext
{ color:000000; 
font-size:8pt; 
font-weight:bold; 
font-style:normal; 
font-family:Helvetica, verdana, arial, sans-serif; } 
a, a:link, a:visited, a.navbar, a.navbar:link, a.navbar:visited, 
a.man, a.man:link, a.man:visited, a.redlink, a.redlink:visited
{ color:C11B17; 
font-size:8pt; 
font-weight:normal; 
text-decoration:underline; 
font-style:normal; 
font-family:Helvetica, verdana, arial, sans-serif; } 
a:hover, a:active, a.navbar:hover, a.navbar:active, a.man:hover, 
a.man:active, a.searchlinkSmall:hover, a.searchlinkSmall:active, 
a.redlink:hover, a.redlink:hover
{ color:C11B17; 
font-size:8pt; 
font-weight:normal; 
text-decoration:underline; 
font-style:normal; 
font-family:Helvetica, verdana, arial, sans-serif; } 
.contactTable 
{ width:295px !important; height:131px !important;
background-image:url("http://img.photobucket.com/albums/v286/Godfall/contact%20tables/Geisha.jpg"); 
background-repeat:no-repeat;
background-color:transparent; 
background-attachment:scroll; 
background-position:center center; padding:0px !important;} 
.contactTable table, table.contactTable td 
{ background-color:transparent; background-image:none; 
padding:0px !important;} 
.contactTable a {display:block; height:28px; width:115px;} 
.contactTable a img {visibility:hidden; border:0px !important;} 
.contactTable .text {font-size:1px !important;}</Style>
<div style="width: 100%;text-align: center;"></div> 


thats the site and the code…if anyone can help me out, I would be very grateful. I’m unfortunately just don’t have the time to sit down and invest my mind into learning CSS right now, as I am a booking agent for national acts as well. Please help!!!

Profile
 
 
godfallen
Posted: 10 December 2007 02:09 PM   [ Ignore ]   [ # 1 ]
Newbie
Rank
Total Posts:  2
Joined  2007-11-30

ummm…are you seriously telling me that there is NO ONE that can help me with this??...is it really that much of a problem??

Profile
 
 
Webmaster Pete
Posted: 22 December 2007 06:09 AM   [ Ignore ]   [ # 2 ]
Newbie
Rank
Total Posts:  18
Joined  2005-07-19

GF,

My/CSSDrive’s apologies for not being so…quick to act/respond.  To answer your question (to a degree), the problem is in that your image is ‘semi-transparent’.  Because of this, when you have two ‘semi-transparent’ images which overlap, the color becomes more opaque (darker tint). You can relate this to (in the physical world) polarized glass/film.  The problem seems to be in how your background image is applied. It is set for the third table in a nest of tables, yet if any child (text/elements within/beyond the third table in a nest of tables) is set to ‘inherit’ the background image of its parent (in this case a table or something along those lines) the problem may create this (undesired) effect.  If you wish to (temporarily) see whether this is the case or not, simply put in, somewhere *after* the “table table table” code, this line of CSS:

table table table * {background:transparent;} 

I hope that works.  It should make everything (*) within the third nested table (“table table table”) have a background (background:) which is transparent(transparent).

If you have other backgrounds deeper in (such as an element within four or more tables with a background) then you should set this code first if you wish to use it.  If it does not work, let me know.

PS: I’m not happy with this post for the fact that (1) I am overly parenthetical, (2) I may not explain it well enough, and (3) It is late, and very little can satisfy me aside from sleep!

Profile
 
 
   
 
 
‹‹ Force images in a horizontal row without linebreak in a limited width DIV >>> scroll box      layout a blog with CSS - image question -UPDATE ››