how to add images in tables on xhtml pages

I found this amazing example about css menus: http://www.htmldrive.net/items/demo/437/CSS3-only-horizontal-drop-line-tab-menu

Everything works great on that demo but when I try to add a table with images inside to practice this is the result: example1
this is the code of the example with my table:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

<head>
<style>
body {
  font: normal 85% arial,verdana,tahoma,sans-serif;
  color: #777;
  margin: 0;
  padding: 0;
  background: #f0f0f0;
}



/* MENU STYLE - IGNORE EVERYTHING ABOVE THIS LINE IF YOU WISH */

#menu {
  width: 960px;
  height: 40px;
  clear: both;
}

ul#nav {
  float: left;
  width: 960px;
  margin: 0;
  padding: 0;
  list-style: none;
  background: #dc0000 url(../img/menu-parent.png) repeat-x;
  -moz-border-radius-topright: 10px;
  -webkit-border-top-right-radius: 10px;
  -moz-border-radius-topleft: 10px;
  -webkit-border-top-left-radius: 10px;  
}

ul#nav li {
  display: inline;
}

ul#nav li a {
  float: left;
  font: bold 1.1em arial,verdana,tahoma,sans-serif;
  line-height: 40px;
  color: #fff;
  text-decoration: none;
  text-shadow: 1px 1px 1px #880000;
  margin: 0;
  padding: 0 30px;
  background: #dc0000 url(../img/menu-parent.png) repeat-x;
  -moz-border-radius-topright: 10px;
  -webkit-border-top-right-radius: 10px;
  -moz-border-radius-topleft: 10px;
  -webkit-border-top-left-radius: 10px;     
}

/* APPLIES THE ACTIVE STATE */
ul#nav .current a, ul#nav li:hover > a  {
  color: #fff;
  text-decoration: none;
  text-shadow: 1px 1px 1px #330000;
  background: #bb0000;
  -moz-border-radius-topright: 10px;
  -webkit-border-top-right-radius: 10px;
  -moz-border-radius-topleft: 10px;
  -webkit-border-top-left-radius: 10px; 
}

/* THE SUBMENU LIST HIDDEN BY DEFAULT */
ul#nav  ul {
  display: none;
}

/* WHEN THE FIRST LEVEL MENU ITEM IS HOVERED, THE CHILD MENU APPEARS */
ul#nav li:hover > ul {
  position: absolute;
  display: block;
  width: 920px;
  height: 45px;
  position: absolute;
  margin: 40px 0 0 0;
  background: #aa0000 url(../img/menu-child.png) repeat-x;  
  -moz-border-radius-bottomright: 10px;
  -webkit-border-bottom-right-radius: 10px;
  -moz-border-radius-bottomleft: 10px;
  -webkit-border-bottom-left-radius: 10px; 
}

ul#nav li:hover > ul li a {
  float: left;
  font: bold 1.1em arial,verdana,tahoma,sans-serif;
  line-height: 45px;
  color: #fff;
  text-decoration: none;
  text-shadow: 1px 1px 1px #110000;
  margin: 0;
  padding: 0 30px 0 0;
  background: #aa0000 url(../img/menu-child.png) repeat-x; 
}

ul#nav li:hover > ul li a:hover {
  color: #120000;
  text-decoration: none;
  text-shadow: none;
}
</style>

<title></title>

<!-- META -->
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<meta name="Author" content="Skyrocket Labs" />
<meta name="Description" content="A horizontal hover menu using only CSS" />


</head>

<body>

<!-- BEGIN DEMO -->
<div id="menu">

<ul id="nav">
<li><a href="#">Menu 1</a>
	<ul>
	<li><a href="#">Menu 1 Submenu item 1</a></li>
	<li><a href="#">Menu 1 Submenu item 2</a></li>
	<li><a href="#">Menu 1 Submenu item 3</a></li>
	</ul>
</li>

<li><a href="#">Menu 2</a>
	<ul>
	<li><a href="#">Menu 2 Submenu item 1</a></li>
	<li><a href="#">Menu 2 Submenu item 2</a></li>
	<li><a href="#">Menu 2 Submenu item 3</a></li>
	</ul>
</li>

<li><a href="#">Menu 3</a>
	<ul>
	<li><a href="#">Menu 3 Submenu item 1</a></li>
	<li><a href="#">Menu 3 Submenu item 2</a></li>
	<li><a href="#">Menu 3 Submenu item 3</a></li>
	</ul>
</li>	
</ul>

</div>
<!-- END DEMO -->

<p>&nbsp;</p>
<p>&nbsp;</p>
<table border="0" width="1000" cellspacing="0" cellpadding="0">
	<tr>
		<td width="1000" bgcolor="#AA0000">
		&nbsp;</td>
	</tr>
	<tr>
		<td width="1000" bgcolor="#008080">
		<img border="0" src="http://www.grupossc.com/2012/imagenes/linea.jpg" width="901" height="6"></td>
	</tr>
	<tr>
		<td width="1000" bgcolor="#AA0000">
		&nbsp;</td>
	</tr>
</table>

</body>
</html>

Open in new window


I dont have to much experience using xhtml but if I change the first two lines to <html> the the table on the page looks like this: example2
But when I do that change the menu did not works ok IE

I would like to know what I need to do use images inside tables when the pages use doctype and xhtml

best regards
altariamx2003Asked:
Who is Participating?
 
altariamx2003Connect With a Mentor Author Commented:
I think I found the solution

I need to add style="display:block;" to the image and with that the problem is solved
0
 
Chris StanyonCommented:
The only thing I can see wrong with your page is that the image is tiny. That's because you have set it's height to 6px!

<img border="0" src="http://www.grupossc.com/2012/imagenes/linea.jpg" width="901" height="6">

Remove that and your image will be 901px wide, by however deep it needs to be.
0
 
altariamx2003Author Commented:
I try that but it give me the same result

The way that I know that works iss using the attribut background-image but in this case that doesnt works for me


Do you know if there is another declaration of <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> that I can use that allow me to use correctly my images in tables on pages with xhtml????
0
Introducing Cloud Class® training courses

Tech changes fast. You can learn faster. That’s why we’re bringing professional training courses to Experts Exchange. With a subscription, you can access all the Cloud Class® courses to expand your education, prep for certifications, and get top-notch instructions.

 
Chris StanyonConnect With a Mentor Commented:
Images in tables are fully supported across all browser, so your DOCTYPE has nothing to do with it. Having said that, because you are using XHTML you need to close off your tags properly. Self closing elements, such as an IMG need to be closed off with />

If you want to set the background to an image, add a class and style with CSS. If you want to contain an image in your TD, then just use a standard image tag.

<td class="bg">Some cell content</td>
<td><img src="yourImage" alt="Description of your Image" /></td>

.bg { background: url('yourImage.jpg') no-repeat left top; }

If you're still getting problems, then seeing a live link to your page will help us identify exactly what the problem is.
0
 
altariamx2003Author Commented:
0
 
altariamx2003Author Commented:
thanks anyway for your help
0
 
altariamx2003Author Commented:
I found the solution by myself
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.