[Webinar] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

how to add images in tables on xhtml pages

Posted on 2012-08-26
7
Medium Priority
?
539 Views
Last Modified: 2012-08-31
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
0
Comment
Question by:altariamx2003
  • 5
  • 2
7 Comments
 
LVL 44

Expert Comment

by:Chris Stanyon
ID: 38334256
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
 

Author Comment

by:altariamx2003
ID: 38334323
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
 
LVL 44

Assisted Solution

by:Chris Stanyon
Chris Stanyon earned 2000 total points
ID: 38334420
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
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 

Author Comment

by:altariamx2003
ID: 38334626
0
 

Accepted Solution

by:
altariamx2003 earned 0 total points
ID: 38334833
I think I found the solution

I need to add style="display:block;" to the image and with that the problem is solved
0
 

Author Comment

by:altariamx2003
ID: 38334834
thanks anyway for your help
0
 

Author Closing Comment

by:altariamx2003
ID: 38353491
I found the solution by myself
0

Featured Post

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article discusses four methods for overlaying images in a container on a web page
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …
Suggested Courses

864 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question