CSS - Table Background Transparancy

does anyone know how i can get 4 background images in my table, one for each corner of the table?

they are curved images, as i am aiming for the table to have curved edges.

Thanks

Hey all, a fairly simple situation which is driving me crazy! =p

I have a table row which has two columns.
Now using css I have set the row to have a background image like so:
Code:

background-image:url(images/newsmiddle.jpg);
background-repeat:repeat-y; }

Now in firefox this works fine ( he content box has the image run through both columns as intended ). But in Internet Explorer on the second column the bg image starts again as if I had set the background image for that cell which is not what I want.

Anyone able to help for an IE solution?
Thanks

I was wondering on this table I have I want it to have black background colour but I want to change the opacity to where you could see the background image too

I am creating a table of a school's schedule, Mon-Friday across the top and 8:30-3:00 along the side, one row for every 15 min increment.

I am using a td with rowspan=3 (or 2, or 4) to represent an activity that lasts for more than 15 minutes, which most do. I have a border around each td so it shows how long each activity lasts. I have had no problem creating this table.

However, what I'm having trouble with is having each 15 minute row alternate different background colors (e.g. gray/white) within the td. So if the activity td spans three rows, I'd like the row background colors to show white/gray/white within the td. The effect should be like the old alternating color computer paper -- different color for each line, yet each activity has a black border around it that spans more than one line.

I've tried setting each 15 min tr to alternating classes, <tr class="white"> then <tr class="shaded"> etc. but this only has the effect of changing the color of a td that begins in this row. Any td defined above that's spanning this row retains the color from the original row it was created in.

I know I could achieve this by doing away with the rowspans, but then things get a bit more complicated -- manually having to set top and bottom borders for each activity and also losing the vertical-align properties within the td. Would like to avoid this if there is a better way.

I am working on modifying a drupal theme style sheet. I am having trouble over riding a table row hover background color.

The style sheet has the background color defined as
Code:

.block .menu a:hover { background-color:#ecf4f8; }

I am working in the footer block trying to over ride the background color as transparent. Everything I try is not working. The theme has a bunch of these classes defined as "Power" Hover Classes.

So, back to my footer block modification. Here are the inherited classes when I inspect the element, pinpointing the background-color for hover that is not being overridden for transparent.
Code:

 div.node .field .field-label-inline, div.node .field .field-label-inline-first, .node-links ul.links:hover, .comment-links ul.links:hover, .view .grouped-admin:hover, .multistep li.active-step, .form-text:focus, .form-textarea:focus, .form-select:focus, .prose a:hover, table tr:hover td, table td.active, .block table tr.active, .block .menu a:hover { background-color: #ECF4F8; }

Can anyone help me write a css over-ride in my footer block for this?

i have table in which i display bunch of query results. i use
<table width="80%" ....background="something.gif">

when the user's screen resolution is high the table still takes 80% of the space but the background image starts repeating. is there a way to automatically extend the image width in case the user's screen resolution is high?

thanks for the help in advance

hello,

i have a few tables with different background-image (style attribute) in my page.
how can i print the page with the background images
i know @media print should help, but i don't know how.

* does the css have to be external, or can i use the tag <style>

PLEASE HELP

Hey,

I have a problem with IE and my CSS.

I have a table with a background-image and I wan that to change to a certain color on rollover.

div.special {background-image: url(../images/pinkfade_bg.gif);}
div.special:hover {
background:#F8F8F8;
}
div.normal {
background:#FFFFFF;
}
div.normal:hover {
background:#F8F8F8;
}

Now this works fine in Mozilla, Safari etc. Just not IE

Any ideas?

So I know that tables are a no-no now-a-days, but I am trying to help troubleshoot this problem without having to rebuild the site.

So this problem only occurs in IE, of course!

When you go to this page: http://dysonracing .com/company/news/archive.php?archive_year=2010

The grey box on the left that displays the news/events nav get a bit out of wack. What I mean by that is that the grey background on the table does not totally flow anymore. The left and right edges of the table dislay white at the top, then the grey about 1/2 way down and then black at the bottom, when the whole thing should be grey. It has a repeating background image. Even if I remove the image and just us the #333333 for the background color, issue is not solve.

It is strange because this problem only happens if you are viewing one of the archive links at the bottom of the page. If you just click News+Events from the main nav, it looks fine. But go to an archive link and it get funky.

Any ideas why this is displaying this way...and only in IE?!

I have a table that contains a links in each cell. However, when I set a style to change the background with 'a:hover' it only changes the area around the link text. What I want is to change the background of the entire cell containing the link. TIA.

I have two problems. First issue is that I cant seem to get a background image to repeat in IE when it works fine in FF. I tried to reproduce the bug on another server using the same exact CSS and to my shock, the background repeat rule works fine.

So, it doesnt work on my server at home with a much more complicated stylesheet (albiet the reference to the background image and repeat rule are exactly the same .. and simple) .. but when I port the same stylesheet to another server with simpler markup, boom, it works fine. Cant wrap my head around this one.

Is there a commonly known IE bug/problem with background image/CSS/background-repeat rules? My site that does not work through IE shows the image once .. and thats it. No repeating like tell it to.

My other issue (if youre still interested) is a problem with the CSS command:

Code:

table
{
  empty-cells: show;
}

which does not work at all. As you can see on this page in IE, (http://www.doublethinkdesigns.com/development/ ) ive specified the rule, but lo and behold, the cells are still missing. Can someone kindly lend me some perspective perhaps?

Thank you much in advance.

I would like to have the background-color of a complete table row changed when I move the mouse over it.

Any ideas how to realize this within a CSS file (not with javascript)

Thanks in advance

Hello,

I recently started creating websites again and I have been pulling my hair out on this Firefox compatibility issue. The site navigation looks great in IE but in Firefox a couple of the background images are skewed down and to the left.

Since all my tricks from years ago are so outdated now, I decided to try CSS for a simplified navigation setup. The code is probably pretty messy since I chopped it together from numerous sources and still am not completely sure how it works.

Background:
I created a large 794x1200 PNG image that contains two complete border and navigation sets. I am using CSS to both position the appropriate portion in each table/cell as well as switching to a slice on the 2nd image set for rollover purposes.

An example of the current test is he (URL address blocked: See forum rules)
*not sure if this is okay but would be best to see the example. If it is not allowed as a non-clickable then feel free to delete.

It is here - classtime . org / test6 . htm

and the navigation image is he
(URL address blocked: See forum rules)
*classtime . org / navigate . png

I would be eternally grateful to anyone that can help me figure out why the site works great in IE but is coming up skewed in Firefox.

As a side note, when I pull up the site in Frontpage, it shows the left-most cell as being larger than it is supposed to be even though it is hardcoded. To get my left image bar to show up in the correct place I had to use a value of "left: -40px;" I'm not sure why that is but I suspect it has something to do with the problem.

Thank you very much for taking a look. My jumbled code is as follows:
Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"(URL address blocked: See forum rules)">
<html>
<head>
<meta http-equiv="Content-Language" content="en-us">

<title>Ultrasonic Blind Company - Elk Grove Village, Illinois</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<style type="text/css" media="screen">

a:link {color: #FFF4D1;}
a:visited {color: #FFF4D1;}
a:hover {color: #74060c;}
a:active {color: #FFF4D1;}


.top a
{
display: block;
width: 794px;
height: 120px;
background-image: url('navigate.png');
}

.top a:hover { 
background-position: 0px -601px; 
}



#left {
 left: -40px;
 width: 150px;
 height: 460px;
 display: block;
 background: url('navigate.png');
 background-repeat: no-repeat;
 background-position: 0px -120px;
 position: relative;
 }

#left li {margin: 0px; padding: 0px; list-style: none; position: absolute;
text-align: center;
font: bold 18px Batang;
line-height: 50px;
}


#left li, #left a {height: 50px; width: 146px; display: block;}
#panel1b {top: 10px;}
#panel2b {top: 63px;}
#panel3b {top: 116px;}
#panel4b {top: 169px;}
#panel5b {top: 223px;}

#panel1b a:hover {background: transparent url('navigate.png') 0px -730px no-repeat}
#panel2b a:hover {background: transparent url('navigate.png') 0px -785px no-repeat}
#panel3b a:hover {background: transparent url('navigate.png') 0px -839px no-repeat}
#panel4b a:hover {background: transparent url('navigate.png') 0px -890px no-repeat}
#panel5b a:hover {background: transparent url('navigate.png') 0px -945px no-repeat}

#right {
 width: 154px;
 height: 460px;
 display: block;
 background: url('navigate.png');
 background-repeat: no-repeat;
 background-position: -640px -120px;
 position: relative;
 }

#right li {margin: 0px; padding: 0px; list-style: none; position: absolute;
text-align: right;
font: bold 18px Batang;
}

#right li, #right a {height: 85px; width: 154px; display: block;}
#panel1r {top: 0px;}
#panel2r {top: 100px;}
#panel3r {top: 200px;}
#panel4r {top: 300px;}

#panel1r a:hover {background: transparent url('navigate.png') -640px -721px no-repeat}
#panel2r a:hover {background: transparent url('navigate.png') -640px -821px no-repeat}
#panel3r a:hover {background: transparent url('navigate.png') -640px -921px no-repeat}
#panel4r a:hover {background: transparent url('navigate.png') -640px -1021px no-repeat}


</style>
</head>
<body bgcolor=#74060c>
<div align=center>
<table id="Table_01" width=794px height=600px border=0 cellpadding=0 cellspacing=0>
<tr>
		<td colspan="3" height="120" width="794" bgcolor="#FFF4D1">
			<div class="top"> 
			<a href="(URL address blocked: See forum rules)"></a> 
			</div>
		</td>
</tr>
<tr>
		<td align=left valign=top height=674px width=150px bgcolor="#FFF4D1">
		 	<ul id="left">
  			<li id="panel1b"><a href="(URL address blocked: See forum rules)" style="text-decoration: none">Contact</a></li>
 		 	<li id="panel2b"><a href="(URL address blocked: See forum rules)" style="text-decoration: none">Residential</a></li>
  			<li id="panel3b"><a href="(URL address blocked: See forum rules)" style="text-decoration: none">Commercial</a></li>
  			<li id="panel4b"><a href="(URL address blocked: See forum rules)" style="text-decoration: none">Coupons</a></li>
  			<li id="panel5b"><a href="(URL address blocked: See forum rules)" style="text-decoration: none">Questions</a></li>
 			</ul>
		</td>
		<td align=left valign=top width=490px height=674px bgcolor="#FFF4D1">
		aaa</td>
		<td align=left valign=top width=154px height=674px bgcolor="#FFF4D1">
			<p align=right> <ul id="right">
  			<li id="panel1r"><a href="(URL address blocked: See forum rules)" style="text-decoration: none"></a></li>
  			<li id="panel2r"><a href="(URL address blocked: See forum rules)" style="text-decoration: none"></a></li>
  			<li id="panel3r"><a href="(URL address blocked: See forum rules)" style="text-decoration: none"></a></li>
  			<li id="panel4r"><a href="(URL address blocked: See forum rules)" style="text-decoration: none"></a></li>
 			</ul>
 		</td>
</tr>
	
</table>
</div>
</body>
</html>

I have a div with a background color set, that I want to have slightly transparent. Inside that div, is essentially my entire website. Now if I apply the opacity to the main outer div, all the divs inside inherit that transparency. Any ways to get around this?

The outer Div with the transparency is the "content_wrapper" div. It excludes the header and footer. So the only issue is correcting everything wrapped inside the "content_wrapper" and "content" div. I tried setting the "content" div to opacity: 1; but it had no effect whatsoever.

http://www.area51entertainment.co/index.php?about

So I have a design where the background is a large (1400x1100) image that fades into a vertical gradient at the edges.

I've set up the css as follows:

body {
background: #000 url(gradient.jpg) repeat-x;
margin: 0;
}

Here's where I run into my problem...

I've created an empty DIV to hold the large image which will appear on top of the gradient and positioned it absolutely.

<div id="bg_image"></div>

#bg_image {
width: 100%;
height: 1100px;
background: url(images/bg_image.jpg) no-repeat top center;
margin: 0;
position:absolute;
}

This works and the background looks like it should, however because the large image is inside a DIV, any time the browser window is smaller than that div (which will be the case for most users considering the image size) there will be scrollbars.

This makes perfect sense of course I just can't come up with an alternative.

If there was a way to extend a background image beyond the borders of a DIV that would work but overflow:visible; doesn't seem to work with background images only content.

I wish I could set a repeating background AND a static background in the body style, because that is exactly the effect I'm trying to achieve.

Any suggestions would be greatly appreciated!

Thanks,
Josh