CSS - Image Stacking Problem Ie

Hi All,

A seemingly simple problem which has me pulling my (already thinning) hair out:

I'm working on a simple page header: a 100px-wide image floated to the left, a 150px wide div filled with text floated to the right.

I need the header to stretch to fit the whole page, which is easy enough: float the image to the left, float the div to the right.

Now, if a user shrinks the browser to, lets say 200px wide, it's forcing the div to stack below the image. I would like for it get closer and closer to the image as the browser is narrowed, until it's sitting just beside it.

I can do this with a min-width on a container div, but of course, that doesn't work on IE--and I'd rather not use the "expression" min-width hack. I could do it with a table, but I'm trying to go table-free if I can.

It seems like something that should be easy as pie, but I'm finding that it's more akin to baking a souffle.

Thanks, all.

rjgfx

Good day! I have exhausted all of the people I could ask regarding this so I'm hoping I may get help here. This is the first website I've made and it's causing a lot of problems.

http:// www . sycwin . com / index2 . html

My issue is that my website is browser compatible with everything BUT IE. My problem is getting it to look the same on IE as it currently looks now on Firefox. I understand that there are java script solutions for div stacking problems, but for some reason those are causing no effects

problems:
1. subinfo not positioning over mainwrapper and is instead STACKING on top of mainwrapper on IE
2. introduction not in position to the right of carousel/slideshow on IE
3. paints and wires divs are messed up in width, padding and margin on IE

here's the css:
Code:

body {
color:#333333;
background-color: #f5f5ef;
background-image:url(images/bg.jpg);
background-repeat:repeat;
font-family:Arial, Helvetica, sans-serif;
line-height: 18px;
font-size:11px;
padding:0px;
margin:0px;
}

emphasis {
background-color:#e7d018;
}
strong {
color:#2b6934;
}

a:active, a:link, a:hover, a:visited {
border:none;
text-decoration:none;
}

img {
border:none;
}

/*MAIN SEGMENTS*/
#mainwrapper{
width:1000px;
margin:0 auto;
margin-top:-20px;
margin-bottom:-50px;
z-index:900;
overflow:hidden;
}
#contentwrapper {
width:1000px;
margin-bottom:-10px;
}
#header {
background-image:url(images/header.png);
background-repeat:no-repeat;
height:492px;
margin-top:-15px;
width:1000px;
float:none;
}

#footer {
width:1000px;
height:222px;
background-image:url(images/footer.png);
background-repeat:no-repeat;
background-position:bottom;
margin-top:-300px;
padding-top:-300px;
margin:0 auto;
}

/*SUBINFO*/
#subinfo {
width:220px;
position:relative;
top:0px;
right:35px;
float:right;
z-index:1000;
}
#blurb {
width:220px;
height:165px;
color:#FFFFFF;
background-image:url(images/blurb_01.png);
background-repeat:no-repeat;
text-align:center;
padding-top:380px;
padding-bottom:64px;
font-size:11px;
}
.call {
font-size:22px;
padding-top:20px;
font-weight:bold;
line-height:20px;
}
#contact {
width:220px;
background-image:url(images/blurb_02.png);
background-repeat:no-repeat;
font-size:14px;
line-height:20px;
text-align:center;
padding-top:5px;
}
#blurb strong {
color:#FFFFFF;
}
.blurbheader {
font-size:20px;
font-weight:bold;
}
.blurbsubtext {
font-size:14px;
font-weight:bold;
}
#credits {
text-align: center;
font-size:9px;
line-height:14px;
padding-top:80px;
}
/*CONTENT*/
#content {
width:700px;
background-image: url(content-bg.png);
background-repeat:repeat-y;
padding-right:250px;
margin-top:-240px;
padding-left:44px;
}

#slideshow {
width:460px;
padding-left:10px;
height:360px;
float:left;
padding-bottom:20px;
overflow:hidden;
}
#write-up {
width:210px;
height:360px;
padding:8px 0 20px 10px;
margin-left:470px;
}
#products {
width:680px;
padding-right:10px;
margin: 0 auto;
margin-top:20px;
}

#products td {
width:160px;
padding-bottom:5px;
text-align:center;
}
#products-wires {
width:660px;
margin: 0 auto;
margin-top:20px;
}
#products-wires td {
width:220px;
text-align:center;
}
.product-header {
font-family:Gotham, Helvetica, Arial, sans-serif;
text-align:left;
font-size:25px;
font-weight:bold;
text-transform:uppercase;
letter-spacing:-2px;
line-height:14px;
}
#introduction {
width:680px;
font-size:11px;
line-height: 18px;
text-align:left;
overflow:hidden;
}
#paints{
margin-right:18px;
width:290px;
padding:20px;
background-image:url(images/introduction.png);
background-repeat:no-repeat;
height:195px;
float:left;
margin-bottom:20px;
}
#wires {
margin-left: 348px;
width:290px;
padding:20px;
margin-right:10px;
background-image:url(images/introduction.png);
background-repeat:no-repeat;
height:195px;
margin-bottom:20px;
}
.product-brand {
background-color:#314842;
color:#FFFFFF;
font-family:Gotham, Helvetica, Arial, sans-serif;
font-weight:bold;
text-transform:uppercase;
text-align:left;
letter-spacing:2px;
font-size:12px;
padding-left:5px;
}

/*ROLLOVER*/
#preview{
position:absolute;
border:1px solid #ccc;
background:#333;
padding:5px;
display:none;
color:#fff;
text-align:center;
z-index:3;
}

#preview img{
width:300px;
height:300px;
} 
/*CAROUSEL*/
#carousel ul {
	list-style: none;
	width:3600px;
	margin: 0;
	padding: 0;
	position:relative;
	padding-left:10px;
height:350px;
float:left;
padding-bottom:20px;
}
#carousel li {
	display:inline;
	float:left;
}
#carousel {
overflow:hidden;

I hope you guys could help me figure this one out. I'm absolutely clueless. Thank you for taking the time to read this.

I've downloaded a web template he http://www.freewebsitetemplates.com/preview/dogstemplate/

I've been re-working it to fit what I need, but I've run into some problems with the CSS. I want to center my images that I place, but I can't seem to figure it out.

For whatever reason I'm not able to attach my html or css file. So I've uploaded a zip file with them to: http://www.tombraiders.net/katie/css.zip If any of you would be able to help I would be so appreciated! I'd also like to move the image down a line as right now it's right under the previous line of text.

Thank you!

I'm working on a new layout for my site, and I've sliced up the left and right side of the content box so it will expand and contract accordingly to all the content inside of it. And I can't get it to line up right. And I'd appreciate any help.

Here it is:
http://thesethexperience.f2g.net/ne...navboxtest.html

And the code:
Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>

<title>navbox</title>

<style type="text/css">

body { background-color:#FFFFFF; }
img { border:0px; }

#navleft
{
background-image: url(images/navleftspacer.png);
background-repeat: repeat-y;
padding: 0px;
background-position:left;
}

#navright
{
background-image: url(images/navrightspacer.png);
background-repeat: repeat-y;
padding: 0px;
background-position:left;
}

</style>

</head>

<body>

<div id="navbox">
  <div id="navhead">
    <img src="images/navigation.png" alt="" />
  </div>
  <div id="navbod">
    <table border="0" cellpadding="0" cellspacing="0">
      <tr>
        <td id="navleft" height="100%" valign="top"><img src="images/navleftspacer.png" /></td>
        <td><p><br /><br /><br /></p></td>
        <td id="navright" height="100%" valign="bottom"><img src="images/navrightspacer.png" /></td>
      </tr>
    </table>
  </div>
  <div id="navfoot">
    <img src="images/navbottom.png" alt="" />
  </div>
</div>

</body>
</html>

Thanks in advance.

Morning guys and girls,

I am getting a headache trying to straighten this bug out and could really do with a fresh pair of eyes.

The page is he www.BeeBee-Design.co.uk/dev.

It works fine in IE6 ( ) but not FF ( ).

The relevant piece of HTML is:

Code:

  <div class="navigation">
    <ul>
      <li class="navigation">
        <a class="nav" href="index.html#">HOME</a></li>
      <li class="navigation">
        <a class="nav" href="index.html#">SERVICES</a></li>
      <li class="navigation">
        <a class="nav" href="index.html#">HOTELS</a></li>
      <li class="navigation">
        <a class="nav" href="index.html#">QUOTE</a></li>
      <li class="navigation">
        <a class="nav" href="index.html#">BOOK</a></li>
      <li class="navigation">
        <a class="nav" href="index.html#">CONTACT</a></li>
    </ul>
  </div>

And the CSS:

Code:

div.navigation {
	font-family: Arial;
	font-weight: normal;
	word-spacing: 10px;
	padding: 0 40px 0 0;
	margin-top: 120px;
	line-height: 30px;
	background-color: #9A9FBA;
	text-align: center;
}

* html div.navigation {
	word-spacing: -6px;
}

a.nav:link {color: #FFFFFF; text-decoration: none; background-image: url(images/navback.jpg); width: 117px; height: 30px;}
a.nav:visited {color: #FFFFFF; text-decoration: none; background-image: url(images/navback.jpg); width: 117px; height: 30px;}
a.nav:hover {color: #FFFFFF; text-decoration: none; background-image: url(images/rollover.jpg); width: 117px; height: 30px;}

li.navigation {
	display: inline;
	font-size: 18px;
	font-weight: normal;
	color: #FFFFFF;
}

The problem seems to be something to do with the way that IE will stretch the block to the width and height settings in the CSS and FF will not. Any suggestions greatly appreciated and will be rewarded with a packet of the finest Chocolate Digestives known to mankind.

I thank you.........

Hello,

I'm currently trying to learn css and have run into a problem in IE.

http://www.nggc.net/test/test.html

At the top the background image is extended and I can't figure out why.

If anyone can help me out or help me improve my current code it would be greatly appreciated.

Here's my css file.

Code:

body {
	margin-top: 0px;
	background-color: #000000;
	color: #777777;
	font-size: 11px;
	padding: 0px;
	font-family: verdana,arial,tahoma;
}

#container {
	margin-left: auto;
	margin-right: auto;
	width: 760px;
}

#topbar {
	width: 760px;
	height: 7px;
	background-image: url('http://www.nggc.net/media/images/header_top.gif');
}

#topnav {
	width: 760px;
	height: 9px;
}

#bottombar {
	width: 760px;
	height: 15px;
	background-image: url('http://www.nggc.net/media/images/header_3.gif');
}

#logo {
	float: left;
	width: 552px;
	height: 68px;
	background-image: url('http://www.nggc.net/media/images/banner.gif');
}

#login {
	float: right;
	width: 208px;
	height: 68px;
	background-image: url('http://www.nggc.net/media/images/login_bg.gif');
}

.clear {
	clear: both;
}

#leftnav {
	float: left;
	padding: 0;
	width: 152px;
	background-image: url('http://www.nggc.net/media/images/nav_bg.gif');
}

div.navcat {
	padding-top: 9px;	
	color:#102434;
	font-size:9px;
	font-family: verdana, tahoma;
	font-weight: bold;
	padding-left: 4px;
	height: 14px;
	background-image: url('http://www.nggc.net/media/images/nav_title.gif');
}

div.navlink {
	color:#102434;
	font-size:9px;
	font-family: verdana, tahoma;
	font-weight: bold;
	padding-left: 16px;
	padding-top: 6px;
	height: 18px;
	background-image: url('http://www.nggc.net/media/images/nav_main.gif');
}

.navlink a:link { color:#7D8488; text-decoration:none; }
.navlink a:visited { color:#7D8488; text-decoration:none; }
.navlink a:hover { color:#A8AFB3; text-decoration:none; }

#header {
	float: left;
	width: 608px;
	height: 23px;
	background-image: url('http://www.nggc.net/media/images/body_1.gif');
}

#content {
	float: left;
	width: 596px;
	padding: 3px 6px 3px 6px;
	background-color: #0F0F0F;
}

#block1 {
	padding: 1px;
	height: 194px;
	border-top: 1px solid #818080;
	border-left: 1px solid #525151;
	border-bottom: 1px solid #525151;
	border-right: 1px solid #393737;
}

#featuredgame {
	float: left;
	width: 387px;
	height: 192px;
	
}

#latestnews {
	float: right;
	width: 201px;
	height: 17px;
	border: 1px solid #6F6E6E;
}

#newsblock {
	float: right;
	width: 197px;
	border: 1px solid #6F6E6E;
	border-top: 0px;
	padding: 2px 2px;
}

div.newstitle {
	text-align: center;
	color:#5BA920;
	font-size:11px;
	font-family: verdana, tahoma;
	font-weight: bold;
	background-color: #404040;
	width: 194px;
	height: 14px;
	padding: 1px;
	border: 1px solid #000000;
	border-bottom: 0px;
}

#newstext {
	text-align: center;
	width: 194px;
	background-color: #222222;
	padding: 1px;
	border: 1px solid #000000;
}

and here's the html file
Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="description" content="NGGC - Gaming News, Reviews, Ladders, Tournaments, Forums, and More!" />
<meta name="keywords" content="games, video games, playstation, psp, xbox, socom, ladders, wars, clans, generation, next, gaming, community" />
<title>Test</title>
<link rel="stylesheet" href="http://www.nggc.net/test/main2.css" type="text/css" />
<script type="text/javascript" src="{#url#}/tooltip.js"></script>
<script type="text/javascript" src="{#url#}/global.js"></script>
<script type="text/javascript" src="{#url#}/slider.js"></script>
</head>
<body>
<div id="container">
<div id="topbar"></div>
<div id="topnav"><img src="http://www.nggc.net/media/images/header_1.gif" alt="" /><a href="http://www.nggc.net/"><img src="http://www.nggc.net/media/images/header_home.gif" border="0" alt="" /></a><img src="http://www.nggc.net/media/images/header_spacer.gif" alt="" /><a href="http://www.nggc.net/"><img src="http://www.nggc.net/media/images/header_pc.gif" border="0" alt="" /></a><img src="http://www.nggc.net/media/images/header_spacer.gif" alt="" /><a href="http://www.nggc.net/"><img src="http://www.nggc.net/media/images/header_ps2.gif" border="0" alt="" /></a><img src="http://www.nggc.net/media/images/header_spacer.gif" alt="" /><a href="http://www.nggc.net/"><img src="http://www.nggc.net/media/images/header_ps3.gif" border="0" alt="" /></a><img src="http://www.nggc.net/media/images/header_spacer.gif" alt="" /><a href="http://www.nggc.net/"><img src="http://www.nggc.net/media/images/header_psp.gif" border="0" alt="" /></a><img src="http://www.nggc.net/media/images/header_spacer.gif" alt="" /><a href="http://www.nggc.net/"><img src="http://www.nggc.net/media/images/header_rev.gif" border="0" alt="" /></a><img src="http://www.nggc.net/media/images/header_spacer.gif" alt="" /><a href="http://www.nggc.net/"><img src="http://www.nggc.net/media/images/header_xbox.gif" border="0" alt="" /></a><img src="http://www.nggc.net/media/images/header_spacer.gif" alt="" /><a href="http://www.nggc.net/"><img src="http://www.nggc.net/media/images/header_x360.gif" border="0" alt="" /></a><img src="http://www.nggc.net/media/images/header_spacer.gif" alt="" /><a href="http://www.nggc.net/"><img src="http://www.nggc.net/media/images/header_ladders.gif" border="0" alt="" /></a><img src="http://www.nggc.net/media/images/header_spacer.gif" alt="" /><a href="http://www.nggc.net/"><img src="http://www.nggc.net/media/images/header_tournaments.gif" border="0" alt="" /></a><img src="http://www.nggc.net/media/images/header_spacer.gif" alt="" /><a href="http://www.nggc.net/"><img src="http://www.nggc.net/media/images/header_forums.gif" border="0" alt="" /></a><img src="http://www.nggc.net/media/images/header_2.gif" alt="" /></div>
<div id="bottombar"></div>
<div id="logo"></div>
<div id="login"></div>

<div id="leftnav">
<div class="navcat">NGGC</div>
<div class="navlink"><a href="#">Home</a></div>
<div class="navlink"><a href="#">News</a></div>
<div class="navlink"><a href="#">Ladders</a></div>
<div class="navcat">Channels</div>
<div class="navlink"><a href="#">PC</a></div>
<div class="navlink"><a href="#">Playstation 2</a></div>
<div class="navlink"><a href="#">Playstation 3</a></div>
<div class="navlink"><a href="#">Sony PSP</a></div>
<div class="navlink"><a href="#">Nintendo Wii</a></div>
<div class="navlink"><a href="#">Xbox</a></div>
<div class="navlink"><a href="#">Xbox 360</a></div>
</div>

<div id="header"></div>

<div id="content">
<div id="block1">
<div id="featuredgame"><img src="http://www.nggc.net/media/images/featured.gif" alt="" /></div>
<div id="latestnews"><img src="http://www.nggc.net/media/images/latestnews.gif" alt="" /></div>
<div id="newsblock">
<div class="newstitle">Testing 123</div>
<div class="newstext" style="border-bottom: 0px;">NGGC plans on opening Mid-April Stay Tuned NGGC plans on opening Mid-April Stay Tuned NGGC plans on opening Mid-April Stay Tuned</div>
<div class="newstitle">Testing 123</div>
<div class="newstext">NGGC plans on opening Mid-April Stay Tuned NGGC plans on opening Mid-April Stay Tuned NGGC plans on opening Mid-April Stay Tuned</div>
</div>
</div>
</div>

</div>
</body>
</html>

Thanks.

Here is what I have as a test


my CSS page has

Code:

body {
	margin: 4px 0px;
	padding: 0px;
	background-color: #000000;
}

.header		{
		background-image: url(images/back.gif);
		background-repeat: repeat-x;
		height:197px
		width:100%;
		margin-top :0px;
		}

and my header page that I want to include in all of my pages looks like this for now

Code:

<div class="header">
      <img src="images/logos.gif" width="750" height="197">
</div>

I want the logos.gif image to sit in the upper left and the back.gif image to repeat behind it so it looks seamless. I thought this would be a super easy task but right now, with the above code all I get is the logos.gif and no back.gif image. My path to image is correct.

I even commented out the logos.gif just so I had a blank canvas and nothing.

Thanks for any help on this.

Hi Guys,

I hope you can help me, I have spent all day trying to figure this out. Basically I am trying to learn CSS and an explanation as to how this works (and what code to look for where) would be helpful.

The template page I am looking at to learn from is a web site CSS template included with dreamweaver. The code I am looking at is this:

<div id="globalNav">
<img alt="" src="gblnav_left.gif" height="32" width="4" id="gnl"> <img alt="" src="glbnav_right.gif" height="32" width="4" id="gnr">
<div id="globalLink">
<a href="#" id="gl1" class="glink" onmouseover="ehandler(event,menuitem1);">global
link</a><a href="#" id="gl2" class="glink" onmouseover="ehandler(event,menuitem2);">global
link</a><a href="#" id="gl3" class="glink" onmouseover="ehandler(event,menuitem3);">global
link</a><a href="#" id="gl4" class="glink" onmouseover="ehandler(event,menuitem4);">global
link</a><a href="#" id="gl5" class="glink" onmouseover="ehandler(event,menuitem5);">global
link</a><a href="#" id="gl6" class="glink" onmouseover="ehandler(event,menuitem6);">global
link</a><a href="#" id="gl7" class="glink" onmouseover="ehandler(event,menuitem7);">global
link</a>
</div>
<!--end globalLinks-->
<form id="search" action="">
<input name="searchFor" type="text" size="10">
<a href="">search</a>
</form>
</div>
<!-- end globalNav -->
<div id="subglobal1" class="subglobalNav">
<a href="#">subglobal1 link</a> | <a href="#">subglobal1 link</a> | <a href="#">subglobal1
link</a> | <a href="#">subglobal1 link</a> | <a href="#">subglobal1 link</a> | <a href="#">subglobal1
link</a> | <a href="#">subglobal1 link</a>
</div>
<div id="subglobal2" class="subglobalNav">
<a href="#">subglobal2 link</a> | <a href="#">subglobal2 link</a> | <a href="#">subglobal2
link</a> | <a href="#">subglobal2 link</a> | <a href="#">subglobal2 link</a> | <a href="#">subglobal2
link</a> | <a href="....

... and it goes on.

Also the CSS that I think is relavent is:
#globalNav{
position: relative;
width: 100%;
min-width: 640px;
height: 32px;
color: #cccccc;
padding: 0px;
margin: 0px;
background-image: url("glbnav_background.gif");
}

#globalNav img{
margin-bottom: -4px;

}

#gnl {
position: absolute;
top: 0px;
left:0px;
}

#gnr {
position: absolute;
top: 0px;
right:0px;
}

#globalLink{
position: absolute;
top: 6px;
height: 22px;
min-width: 640px;
padding: 0px;
margin: 0px;
left: 10px;
z-index: 100;
}


What I want to know is:
- behind the global nav links there is a long image in the background that is BEHIND the links. The links themselves appear over top and there is a CSS rollover image that appears above the background image.

I can't figure out how this background image got there. (I wish I could include a screen shot to point it out)

Can anyone see what Im talking about? The site is basically a replica of macromedia.com (and the top menu is what I am talking about)

Thanks for any help!
Thinklogos

my code is below

Code:

<style>
.myclass{ 
color:white;
background: black
url(http://img-cdn.mediaplex.com/ads/3976/22164/408x27_uom.gif) 
no-repeat fixed 
top left;
height:100%;
}
</style>

<table height=100% width=100%>
<tr><td class=myclass>

aaaaaaaaaa<br>
aaaaaaaaaa<br>
aaaaaaaaaa<br>
aaaaaaaaaa<br>
aaaaaaaaaa<br>
aaaaaaaaaa<br>
aaaaaaaaaa<br>

aaaaaaaaaa<br>
aaaaaaaaaa<br>
aaaaaaaaaa<br>
aaaaaaaaaa<br>
aaaaaaaaaa<br>
aaaaaaaaaa<br>
aaaaaaaaaa<br>

aaaaaaaaaa<br>
aaaaaaaaaa<br>
aaaaaaaaaa<br>
aaaaaaaaaa<br>
aaaaaaaaaa<br>
aaaaaaaaaa<br>
aaaaaaaaaa<br>

aaaaaaaaaa<br>
aaaaaaaaaa<br>
aaaaaaaaaa<br>
aaaaaaaaaa<br>
aaaaaaaaaa<br>
aaaaaaaaaa<br>
aaaaaaaaaa<br>

aaaaaaaaaa<br>
aaaaaaaaaa<br>
aaaaaaaaaa<br>
aaaaaaaaaa<br>
aaaaaaaaaa<br>
aaaaaaaaaa<br>
aaaaaaaaaa<br>

aaaaaaaaaa<br>
aaaaaaaaaa<br>
aaaaaaaaaa<br>
aaaaaaaaaa<br>
aaaaaaaaaa<br>
aaaaaaaaaa<br>
aaaaaaaaaa<br>

</table>

result of IE
http://img103.echo.cx/img103/7196/ie7ab.png


and Moz
http://img103.echo.cx/img103/9229/moz0jq.png

this code works with IE without being any problem
in IE, if scroll is bottom, background image doesnt come to bottom.

but Moz, it does

please help me..

I have an image I want to use as the header graphic on a website. The image is 800px wide and the table is 700px wide. The graphic is meant to overlap both ends of the table. I am putting the image inside the td of the table and then setting the position to -90px relative to the table to move it across the correct amount. The problem I'm having is that the table changes width to 800px to accommodate the image. I tried putting the image outside the table but can't get the image to maintain its position relative to the table (ie when the screen width changes)
Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled 1</title>
<style type="text/css">
html, body { height: 100%; }
#maintable 
{ 
	height: 100%; 
}

.logoStyle {
	position: relative;
	left: -90px;
	display: block;
	top: 0px;
	visibility: visible;
}

</style>
</head>

<body style="margin: 0; background-color: #D1D1D1">



<table style="width: 700px" align="center" bgcolor="#FFFFFF" id="maintable">
	<tr>
		<td valign="top">
		<img alt="Logo" src="images/header.png" class="logoStyle" />
		&nbsp;</td>
	</tr>
</table>

</body>

</html>

Can anyone let me know what I've done wrong?