Member Avatar for azegurb

hi all,
I have a table inside another table

I have problem with table background image
I have a site in html i have table inside another table's td tag.
but i can not give bg image to the table which is inisde another table. the code is below
when i give separately each td tag it displays but from the borders of the table it is displayed body bgcolor
Can anyone help me
thank you for attention
index.html file

<html><head><title>Home</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link  rel="stylesheet" type="text/css" href="style.css" />
<script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
<style type="text/css">

.style1 {color: #FFFFFF}
.style2 {
	color: #A22B03;
	font-size: 12px;
	background-image: url(img/fon1.jpg);
	background-repeat: repeat-y;
	background-position: center center;
	background-attachment: scroll;
}
.style3 {color: #A22B03}
.style4 {
	color: #A22B03;
	font-size: 12px;
	background-image: url(img/teze.jpg);
	background-repeat: repeat-y;
	background-position: center center;
	background-attachment: scroll;
}

</style>
</head>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">

<table width="1053" border="0" cellpadding="0" cellspacing="0" bgcolor="#a22b03" align="center">
	<tr valign="top">
	  <td width="261" align="center">
			<img src="img/index_01.jpg" width="261" height="228"><br>
<img src="img/index_04.jpg" width="261" height="265" border="0" usemap="#menu"><br>
			<span class="style1"><img src="index_13.jpg" width="188" height="183" style="margin-top: -10px"><br>
			</span>
			<div style="-moz-box-sizing: padding-box; text-align: left; width: 188px">
				<span style="color: #FFFFFF"><br>
				Saini Herbal Scalp & Hair Conditioner®, which has helped thousands; both women and men stop hair loss and even re-grow natural hair, safely and permanently.<br>
				</span><br>
			  <br><br>
			</div>		</td>
	  <td width="531" align="left" style="background: eurl(img/vr.gif) repeat-y left">
  <script type="text/javascript">
AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,65,0','width','529','height','280','src','img/header4','menu','false','quality','high','pluginspage','http://www.macromedia.com/go/getflashplayer','movie','img/header4' ); //end AC code
</script><noscript><object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,65,0" width="557" height="280">
<param name=movie value="img/header4.swf">
				<param name=menu value="false">
				<param name=quality value="high">
				<embed src="img/header4.swf" menu="false" quality="high" width="557" height="280" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer">
			</object></noscript>
<br>
<div style="background-image: url('test.jpg');"> 
<table border="0" align="">
<tr>
  <td class="style4" bordercolor="#993300">asfsfsfsfsfsfsfsfsfsfsfda</td>
  <td width="328" class="style2"><img src="benelli/balaca/benelli crio 12k.jpg" width="325" height="107"></td><td class="style2">dgdgfdgdfg</td></tr>
          <tr><td class="style4"></td><td class="style2"><img src="benelli/balaca/benelli m3s90.jpg" width="325" height="75"></td><td class="style2">&nbsp;</td></tr>
          <tr><td class="style4"></td><td class="style2"><img src="benelli/balaca/Benelli Rafaello Elegant.jpg" width="325" height="68"></td><td  class="style2">Azer</td></tr>
          <tr><td class="style4"></td><td class="style2"><img src="benelli/balaca/benelli_m2practical_comfortech.jpg" width="325" height="75"></td><td  class="style2">&nbsp;</td></tr>
        <tr><td class="style4"></td>
          <td class="style2"><img src="benelli/balaca/BenelliM2Camo.jpg" width="326" height="109"></td><td class="style2">&nbsp;</td></tr>
          <tr><td class="style4"></td>
            <td class="style2">&nbsp;</td><td  class="style2">Azer</td></tr>
          <tr><td class="style4"></td>
            <td class="style2">&nbsp;</td><td  class="style2">    
                  
        </table></div>




</td>

<td width="261" align="center" background="img/fon1.jpg" style="background: url(img/vr.jpg) repeat-y left"><img src="img/index_03.jpg" width="269" height="353" border="0" usemap="#top"><br>
<span class="style1">|Aze|Eng|</span><br>
			 <div id="pageTxt"><marquee direction="up"> 
				<span class="style1">  <a href="#"> <b>Lorem ipsum dolor</b></a><br>
			   Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc eget neque. Nunc condimentum ipsum et orci. Aenean est. Cras eget diam. Phasellus vitae magna. Sed dictum.<br>
      </span><br> </marquee>
				<img src="img/spa.gif" id="hr"><br>
				<a href="#"><b>Lorem ipsum dolor</b></a><br>
				<img src="img/pic2.jpg" width="85" height="83" align="left" style="margin-right: 8px"><span class="style1">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc eget neque. Nunc condimentum ipsum et orci. Aenean est.<br>
				</span><br>
    <br>
				<a href="#" class="arr2">All news</a>			</div><br><br><br><br><br>
	  <div style="background: url(img/form.gif) no-repeat"></div>		</td>
  </tr>
	<tr bgcolor="#7E9CB6">
		<td height="80" bgcolor="#A22B03" style="padding-left: 40px; background: #7E9CB6 url(img/l3.png) no-repeat">
			<font color="white">2010 © Copyright Piramida design group<br>
	  All rights reserved. Read <a href="#"><font color="white">Privacy policy</a></font>.</td>
	  <td colspan="2" align="left" valign="top" nowrap bgcolor="#A22B03"><br> 
        <span class="style1"> <span class="style3">| aaaaaaaaaaaaaaaaaaaaaa<span class="style1">|</span></span>Ana S&#601;hif&#601; | Kataloq | Yenilikl&#601;r | Qanunlar | &Uuml;nvan&#305;m&#305;z |</span></td>
  </tr>
</table>

<map name="top">
<area shape="rect" alt="E-mail" coords="202,0,237,24" href="#">
	<area shape="rect" alt="Home" coords="155,0,191,24" href="index.html">
</map>
<map name="menu">
	<area shape="rect" alt="Contacts" coords="44,148,229,174" href="contact.html">
	<area shape="rect" alt="Career Center" coords="44,119,229,145" href="#">
	<area shape="rect" alt="Our Cervices" coords="43,92,228,118" href="#">
	<area shape="rect" alt="Patent Care" coords="44,63,229,89" href="new.html">
	<area shape="rect" alt="About Us" coords="44,35,229,61" href="about.html">
	<area shape="rect" alt="Home" coords="44,5,229,31" href="index.html">
</map>

</body>
</html>

style.css file

html, body { height: 100%}
body, td {
	color: #3D3B40;
	background-color: #a22b03;
	font-family: Tahoma, Arial;
	font-size: 11px;
	font-style: normal;
}
a:link, a:visited, a:active {font: 11px Tahoma, Arial; color: #FFFFFF}
a:hover {color: red}
#pageTxt {-moz-box-sizing: padding-box; padding: 0px 15px 0px 25px;}
.arr1:link, .arr1:visited, .arr1:active {background: url(img/arr1.gif) no-repeat left; padding-left: 12px; line-height: 17px}
.arr2:link, .arr2:visited, .arr2:active {background: url(img/arr2.gif) no-repeat left; padding-left: 12px; font-weight: bold}
.arr3:link, .arr3:visited, .arr3:active {background: url(img/arr3.gif) no-repeat left; padding-left: 12px}
.arr4:link, .arr4:visited, .arr4:active {
	background: url(img/arr4.gif) no-repeat left;
	padding-left: 15px;
	padding-top: 45px;
	margin-right: 14px;
	color: #A22B03;
	line-height: 89px
}
h2 {font: 18px Tahoma, Arial; color: #CCCCCC; margin-bottom: 10px}
#hr {background: url(img/hr.gif) repeat-x; width: 100%; height: 1px; margin-bottom: 15px}

thanks for attention

Edited by azegurb because: n/a
  • 4 Contributors
  • 10 Replies
  • 125 Views
  • 3 Days Discussion Span
  • Latest Post Latest Post by Veneficae

Recommended Answers

All 10 Replies

Member Avatar for tanoru

Line 43.

<td width="531" align="left" style="background: eurl(img/vr.gif) repeat-y left">

Theres an extra e in there.

Member Avatar for azegurb

thank you for attention but the problems is it shows in IE different than Mozilla
if possible could you go to this link both with IE and Mozilla
http://oxota.toylar.info/benelli1.html
i want as shown in mozilla but there are shown page borders
but in IE it absolitely doesn't show my gradient picture
if you have any suggestion
thank you for attention
i will your responces

Member Avatar for Chosen13

Does it show the image, just not gradient? If it shows the image but not the gradient it's the browsers problem.

Member Avatar for Veneficae

It looks like alignment problems, in IE8 the table is more left than normal, and the text is hidden against the background colour. I'm not too hot when tables as I moved to CSS and XHTML long ago, all I can suggest is doing the same as it's a lot easier to modify and get working cross-browser.

Member Avatar for azegurb

thank you for attention
but now i need to give rounded corner style it
here is url www.oxota.toylar.info/benelli.html
can you help me if possible
all code could be shown from the source. the external css style stays as if before
thanks again for attention

Member Avatar for Veneficae

Do you mean rounded corners at the top and bottom of the white table? If so, that's easily done. Because your table is a fixed width, all you need to do is make an image for the top and bottom of the table in Photoshop, and put them in a new table row.

So, for the top one, make the top image with rounded corners, and add it into a new row at the top of your table.

<tr>
<td colspan="2" style="text-align: center;">
<img src="imagepath/filename.jpg" alt="filedesc" />
</td>
</tr>

Do that also for a row at the bottom of the table, with the bottom rounded corner image. Make sure that since it'll have rounded corners, on the areas around those corners they have the colour of the background.

Member Avatar for azegurb

thank you very much
from here i understand that i must create two images one for right corner and the other one for left corner
but how i must do that images background displays transparently
i must create png or jpg file
thank for attention

Member Avatar for Veneficae

You're on the right track. Because you have a table that doesn't stretch bigger, you can just make the whole top of the table with rounded left and right corners. Instead of only making the left and right corner, you can make both and the middle part as well.

So your image can have the entire shape of this, /----------------\, instead of only corners. Just make a bottom one as well.

On my screen your table was white, so you don't need transparency. If you have a gradient or anything, you can still make the entire top of the table, but you'll have to copy the gradient into the same layer.

Then you can put it into the page using the code in my previous post.

Edited by Veneficae because: n/a
Member Avatar for azegurb

Thank you veru much
but did like that. i created new td tags so that between entire tr tag and i placed into it picture for both right corner and left corner
i looks like that how i can do that the white color of the table not to display.
here is url
http://oxota.toylar.info/benelli.html
thanks again
i will wait your responces

Member Avatar for Veneficae

Make sure the td and tr of the top images do not have borders. Then, because you have the background colour in the images, you can just put a style on the tr tag like this:

<tr style="background-color: #ffffff;">

Also make sure your table has no cell padding or spacing as that will make a gap between the rows.

<table cellpadding="0" cellspacing="0">

It should then have the top row with a white background colour, with the brown in the corners because it's in the image. Depending on how you have elements inside the tds positioned, you may need to fix them when the padding and spacing is removed.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.