HTML - Table Screwy In Ie - No Luck With 'divs'

I would like to know if there is such a thing as a tag within a table, that can collapse if the next table within that prior one gets too big to center?

Here is an example of a part of my code:

Code:

      <table style="width:757; border-style:solid; border-width:thin; margin:0 0 15px 0">
       <tr><td class="spb-category" width="750" style="text-align:left;" colspan="3">Title of this category</td></tr>       
       <tr>
        <td valign="top" width="33%">
         <table width="100%" border="0" cellpadding="0" cellspacing="0">
          <tr><td width="100%" onmouseover="this.style.background='#ddddff';" onmouseout="this.style.background='#ffffff';"><table border="0" cellpadding="0" cellspacing="0"><tr><td class="spb-book"><a href="product_info.php?products_id=103">large size book title with author</a></td></tr><tr><td class="spb-author">Author</td></tr></table></td></tr>
          <tr><td width="100%" onmouseover="this.style.background='#ddddff';" onmouseout="this.style.background='#ffffff';"><table border="0" cellpadding="0" cellspacing="0"><tr><td class="spb-book"><a href="product_info.php?products_id=187">small sized book</a></td></tr><tr><td class="spb-author">Author</td></tr></table></td></tr>
          <tr><td width="100%" onmouseover="this.style.background='#ddddff';" onmouseout="this.style.background='#ffffff';"><table border="0" cellpadding="0" cellspacing="0"><tr><td class="spb-book"><a href="product_info.php?products_id=197">small sized book</a></td></tr><tr><td class="spb-author">Author</td></tr></table></td></tr>
         </table>        </td>
        <td valign="top" width="33%">
         <table width="100%" border="0" cellpadding="0" cellspacing="0">
          <tr><td width="100%" onmouseover="this.style.background='#ddddff';" onmouseout="this.style.background='#ffffff';"><table border="0" cellpadding="0" cellspacing="0"><tr><td class="spb-book"><a href="product_info.php?products_id=101">small sized book</a></td></tr><tr><td class="spb-author">Author</td></tr></table></td></tr>
          <tr><td width="100%" onmouseover="this.style.background='#ddddff';" onmouseout="this.style.background='#ffffff';"><table border="0" cellpadding="0" cellspacing="0"><tr><td class="spb-book"><a href="product_info.php?products_id=188">small sized book</a></td></tr><tr><td class="spb-author">Author</td></tr></table></td></tr>
          <tr><td width="100%" onmouseover="this.style.background='#ddddff';" onmouseout="this.style.background='#ffffff';"><table border="0" cellpadding="0" cellspacing="0"><tr><td class="spb-book"><a href="product_info.php?products_id=120">Medium sized boot title</a></td></tr><tr><td class="spb-author">Author</td></tr></table></td></tr>
         </table>        </td>
        <td valign="top" width="33%">
         <table width="100%" border="0" cellpadding="0" cellspacing="0">
          <tr><td width="100%" onmouseover="this.style.background='#ddddff';" onmouseout="this.style.background='#ffffff';"><table border="0" cellpadding="0" cellspacing="0"><tr><td class="spb-book"><a href="product_info.php?products_id=102">a very long title of a book which includes the author</a></td></tr><tr><td class="spb-author">Author</td></tr></table></td></tr>
         </table>
        </td>
       </tr>
      </table>

1. I want to center each column so that the first letter of each book title is lined-up, but that the longest title on each column has equal space on both left and right.

2. If you look at each column, the width is about 245px. With regard to the first book title in the first column, I have 50px that is extra, therefore I'd like to automatically add 25px to the front of each one of the books for that column.

3. On the second column, there is about 80px extra, therefore I'd like to auto-add 40px to the front of each book in that column.

My problem is that I don't want the column centered individually because then I will lose the straight line that I'd like each book to be on top of each other as it starts the line.

I tried:
style="margin-left:20px"
and
style="padding-left:20px"
but when the title got too long it would not auto-collapse the left side, I want it to collapse!

I want one tag that I can insert evenly on every section to get the push to the right an even amount of spaces for every book on each column.

If it comes down to it, I wouldn't mind sacrificing that each column gets auto aligned to what is necessary for its own column. So if I have to use one number, say 30px, for the whole webpage, then ok, I'd do it.

My problem is that sometimes the 30px empty filler space for the left, in order to push the title to the right, is not enough space for a very long title and it winds up sending half the title to the next line, which I don't want.

This code is a list of books that spans about 20 categories and about 400 book titles.

Thanks in advance for any help you might offer.

The table itself is working fine, but the size of each cell is not correct in Firefox.
Here is a screenshot of what is happening:

http://img35.imageshack.us/img35/1938/tabletroubles.gif


Here is the head of my page, the css for the table is he

HTML Code:

<style type="text/css">
#cat table {border:0px solid #333333; cell-padding:0; cell-spacing:0; align=center} 
#cat tr {align=center}
#cat td {font-size: 13px; font-family=tahoma; font-weight: bold; padding: 0px; border:0px solid #333333; align=center;} 
#cat td a {text-decoration: none; color:#757575; background-color: white; display:block; height=23; background-image: url(linkbg1.gif); align=center;} 
#cat td a:hover {background-color: #333333; font-weight: bold; text-decoration: none;color: #ffffff; background-image: url(linkbg2.gif); align=center;} 
</style>

and here is the table code, located in the body of the page:

HTML Code:

<div style="Height:53px; overflow:auto; width:900px; position:absolute; top:0; left:0">


<TABLE bgcolor=#333333 cellspacing=0; cellpadding=0;><tr><td>

<div id="cat"> 

<table width=900; cellpadding:0px; cellspacing:0px> 
<tr align=center> 
<td width=20%>
<font face=tahoma><a href="home.html">Home</a></font>
</td>
<td width=20%><center><font face=tahoma><a href="openings.html" target="_top">Openings</a></font></center></td> 
<td width=20%><center><font face=tahoma><a href="dance.html" target="_top">Dance</a></font></center></td> 
<td width=20%><center><font face=tahoma><a href="projects.html" target="_top">Projects</a></font></center></td> 
<td width=20%><center><font face=tahoma><a href="vocaloid.html" target="_top">Vocaloid</a></font></center></td> 
</tr> 
<tr> 
<td width=20%><center><font face=tahoma><a href="fanflashes.html" target="_top">Fanflashes</a></font></center></td> 
<td width=20%><center><font face=tahoma><a href="caramelldansen.html" target="_top">Caramelldansen</a></font></center></td> 
<td width=20%><center><font face=tahoma><a href="cosplay.html" target="_top">Cosplay</a></font></center></td>
<td width=20%><center><font face=tahoma><a href="endings.html" target="_top">Endings</a></center></td>
<td width=20%><center><font face=tahoma><a href="anime.html" target="_top">Anime Episodes</a></font></font></center></td> 
</tr> 
</table>


</div> 
</td></tr></table> 
</div>

A table is nested within another table. The table on the outside has no content, it is there to make a gray border around everything else.

If you look at the table in firefox & internet explorer, you'll see that in IE- the table is much thicker than in firefox. How can i make it so that the table in Firefox will have the same thickness as the one in IE? I could really use some help. Thanks!

I will be brief in hoping that the issue does not require a thesis to properly fix. I'm dealing with tables within tables..within tables. In one instance, I have a 2x1 (row by column) table inside another table. So, we'll call the inside table "B" and the outside table "A". Table B is centered inside a column in Table A. I'm trying to maximize the space, but nearly nothing works. Setting Table B height=100% does nothing. The only thing that works is setting the height=N px, where N is a number. This is no good, as I want to the site to work on all resolutions. I want it to be proportional. How can I fix this?

Here's what I'm dealing with, visually:



Any help would be welcome. Thanks.

Here is an image depicting the trouble I'm having:



I want to make a table, consisting of many cells. These cells would be fixed, and *very different* in sizes.

It's easy to make a no-space table when all the images are exactly the same size, but when you have images with a variety of sizes, the table doesn't fit perfectly.

Basically I want to create a collage of images with overlay text on each image. My idea was that I could create a table, and each cell (td) would have a background which is the image. Then I could just type in that cell, so the text would be over the image.
Then I'd do this for every one of my images, and a collage would be formed.

The problem is, the table makes large white spaces wherever the image sizes don't match!

How do I get rid of these spaces, or is there an entirely different code/approach I should be using?

Thanks!

Here is my current code:

HTML Code:

<html>
<head>
<style type="text/css">
table.nospace {
        padding: 0; margin: 0;
        border-collapse: collapse;
}
table.nospace tr {
        padding: 0; margin: 0;
}
table.nospace td {
        padding: 0; margin: 0;
}
</style>
</head>
<body>
<TABLE class="nospace" width="2040px" height="2000px" cellspacing="0px" cellpadding="0px">
<TR>

<td valign="top">
<table><tr>
<TD WIDTH="800px" HEIGHT="800px" BACKGROUND="image.jpg" VALIGN="bottom">
<h1><FONT COLOR=#ffffff>text</FONT></h1>
</TD></tr></table>
</td>

<td valign="top">
<table><tr>
<TD WIDTH="700" HEIGHT="497" BACKGROUND="image" VALIGN="bottom">
<h1><FONT COLOR=#ffffff>Text</FONT></h1>
</TD></tr></table>
</td>

<td valign="top">
<table><tr>
<TD WIDTH="700" HEIGHT="467" BACKGROUND="image.jpg" VALIGN="bottom">
<h1><FONT COLOR=#ffffff>Text</FONT></h1>
</TD></tr></table>
</td>

</TR>
</TABLE>

</body>
</html>

Okay, i have a problem with divs on my site
i have 4 divs, the first one is the holder, he's around the other 3.
Then there are 3 divs that have to be placed next to each other, but that isn't working!
When i use float left or right it tottaly screwes up my page, does anyone know what i do wrong??

my code is:

HTML Code:

/********** Lay-out **********/
 
body{
	margin:0;
	padding:0;
	background-color:black;
	font-family:Tahoma;
}
 
.houder{
	background-color:white;
	width:982px;
	height:500px;
	margin-left:auto;
	margin-right:auto;
}
 
.header{
	height:120px;
	width:980px;
	margin:0;
	padding:0;
	background-image:url(Afbeeldingen/header.jpg);
}
.headers{
	background-image:url(Afbeeldingen/headr.jpg);
	background-repeat:repeat-x;
	height:21px;
	width:270px;
	margin-top:1px;
	font-family: Tahoma;
	font-size:11px;
	color:white;
	padding-left:10px;
	padding-top:7px;
}
a{
	color:black;
	text-decoration:underline;
	font-size:11px;
	font-family:Tahoma;
}
.Contenthouder{
	height:340px;
	width:980px;
}
.scheiding{
	background-image:url(Afbeeldingen/scheiding.jpg);
	background-repeat:repeat-y;
	width:5px;
	height:340px;
	margin-left:280px;
}
 
/********** Menu **********/
 
.menu{
	background-image:url(Afbeeldingen/menu.jpg);
	background-repeat:repeat-x;
	width:980px;
	height:14px;
	margin-top:1px;
	font-family: Tahoma;
	font-size:12px;
	padding-top:9px;
	padding-bottom:10px;
}
a.menu:link, a.menu:active, a.menu:visited{
	color:white;
	text-decoration:none;
	padding-left:10px;
	padding-right:10px;
}
a.menu:hover{
	background-image:none;
	color:red;
	text-decoration:none;
	background-color:white;
}
 
/********** inlog **********/
 
.inloghouder{
	width:280px;
	margin-right:700px;
	font-size:12px;
	float:left;
}
.inlogtxt{
	padding-left:20px;
	font-size:11px;
}
.inloginput{
	border:0;
	background-color:lightgrey;
	font-size:12px;
	width:250px;
	height:18px;
	padding-top:4px;
}
.inlogknop{
	background-image:url(Afbeeldingen/knop.jpg);
	font-size:11px;
	font-family: Tahoma;
	background-color:grey;
	border:0;
	color:white;
	font-weight: bold;
	height:20px;
}
 
/********** Text **********/
 
.texthouder{
	width:500px;
	background-color:yellow;
	height:300px;
	float:right;
}

HTML Code:

<!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" xml:lang="ne" lang="en"> 
 
 <head>
  <title>Familie Voetbalspel</title>
  <link rel="stylesheet" type="text/css" href="Style.css" /> 
 </head>
 
 <body> 
  <div class="houder" align="center">
   <div class="header" /></div>
   <div class="menu" align="left" valign="middle">
    <a href="#" class="menu"><b>Home</b></a>
    <a href="#" class="menu"><b>Uitleg</b></a>
    <a href="#" class="menu"><b>Punten</b></a>
    <a href="#" class="menu"><b>Ronde scores</b></a>
    <a href="#" class="menu"><b>Klassement</b></a>
    <a href="#" class="menu"><b>Spelers</b></a>
    <span class="menurechts" style="margin-left:389px;"><a href="http://www.coachvanhetjaar.nl" class="menu"><b>Coach van het Jaar</b></a></span>
   </div>
   <div class="Contenthouder" align="left">
    <div class="inloghouder">
     <div class="headers">
      <b>Inloggen bij het Familie Voetbalspel</b>
     </div>
     <div class="inlogtxt">
      <br />
      <b>Gebruikersnaam<br /><br />
      <input type="text" name="gebruikersnaam" class="inloginput" /><br /><br />
      Wachtwoord<br /><br />
      <input type="password" name="wachtwoord" class="inloginput" /><br /><br />
      <input type="submit" value="Inloggen" class="inlogknop"/><br /><br />
      <a href="#">Wachtwoord vergeten?</a><br /><br />
      <a href="#">Geen account?? Hier aanmaken!!</a>
     </div>
    </div> 
    <div class="texthouder">
    </div>
    <div class="scheiding">
    </div>
   </div>
  </div>
 </body>
</html>

contenthouder is the holder, inloghouder de div on the left, scheiding the div in the middle and texthouder the div on the right

Ok, I'm completely self taught, so don't be surprise if my html is a mess. I was told recently that I'm out of date in using tables and should be using divs, so in updating my website that's what I'm trying to do.

The first one is that it doesn't display properly in IE. Can anyone tell me why, and how to rectify it?

http://www.ratscallions.co.uk/Test/index.html

There are other problems (as you'll be able to see), but I'd like to work that one out first.

Thank you,

Nim

Hello,
I am using a div for my website. I would like all the content to load in the divs, I don't want to create a new page for each site.How can I do this?

Also, for the portfolio,I would like the images to change when you click the arrow, but I don't want to use frames or have each image on a new page. Can I do this within the div?

Thanks!

http://heartless-ink.com/treegirl.html

Hello. I have problem with IE 6.0.

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 Document</title>

<!- Holly hack for 3 px -->

<!--[if IE]>
<style type="text/css"> 
#_left, #_right, #_center { zoom: 1;}
</style>
<![endif]-->

<style type="text/css">
<!--
#_left {
	float: left;
	width: 200px;
	color: #900;
}
#_right {
	float: right;
	width: 200px;
	color: #00F;
}
#_center {
	float: left;
	width: 200px;
	color: #00F;
}
-->
</style>
</head>

<body>
<div id="_left">Polyvios left menu<br />
sdfdsfdsf<br />sdfdsfdsf<br />sdfdsfdsf<br />sdfdsfdsf</div>
  <div id="_right">Polyvios right menu<br />sdfdsfdsf<br />sdfdsfdsf<br />sdfdsfdsf<br />sdfdsfdsf<br />sdfdsfdsf<br />sdfdsfdsf</div>
    <div id="_center">ddd</div>
</body>
</html>

The result of this code must be three in line menu. (the code is an example).

But IE 6.0 can't understand divs with float. Any one who knows how I can fix it? Sorry for my English. Thank you.

Could anyone explain to me how to put rounded corners on divs?

Ive researched it a bit, but i want to be able to change the colours so i dont want to use image based if possible. found a way to do it but want more than one curved div but cant seem to be able t use different colours.

I want to have one large rounded div on the webpage then some smaller ones within this one for nav menus and content etc,

Have found some ideas but they dont work with IE.

Can anyone help me with this code to make the page fluid in all three browsers without showing spaces in between the sections?

http://www.cpe.rutgers.edu/wetlands/certificate05.html

Thanks in advance

Hello, I've been dealing with this problem and it seems fairly simple but has got me scratching my head. The page works fine in Firefox (of course) but internet explorer draws this problem.



There are gaps between the DIVS and I have tried messing with the margins and padding a bit but have had no luck.

here is the page in Firefox:


Here is the code in page.
HTML Code:

<div id="container">
<div id="head"><a href=""><img src="hd_1.png" border="0" /></a></div>
<div id="ev_top"><img src="ev_top.png" />
</div>
<div class="float"><img src="ev_l1.png" />
</div>


<div class="ev1">
<div class="ev2">Dallas</div>
<div><a href=""><img src="ev_dallas_tba.png" border="0" /></a></div>
<div class="ev3"><div class="float"><img src="/bullet_blue.png" /></div>
<div class="ev4"><a href="">May - TBA</a></div>
<div class="ev5">| <a href="">&nbsp;More...</a></div>
</div>
</div><div class="float"><img src="ev_gap1.png" /></div>
<div class="ev1">
<div class="ev2">New York</div>
<div><a href=""><img src="ev_ny.png" border="0" /></a></div>
<div class="ev3"><div class="float"><img src="/bullet_blue.png" /></div>
<div class="ev4"><a href="">04.29 - 87 Lounge</a></div>
<div class="ev5">| <a href="">&nbsp;More...</a></div>
</div>
</div>
<div class="float"><img src="ev_gap2.png" /></div>
<div class="ev1">
<div class="ev2">Store</div>
<div><img src="ev_str.png" /></div>
<div class="ev3">
<div class="float"><img src="bullet_yellow.png" /></div>
<div class="ev4">Coming Soon</div>
<div class="ev5">| <a href="#">&nbsp;Updates...</a></div>
</div>
</div>
<div class="float"><img src="ev_right.png" /></div>
</div>
<div id="ev_bot"><img src="ev_bot.png" /></div>
<div class="float"><img src="ev_botr.png" /> </div>
</div>
<div id="blog_right"><img src="blog_rt_gap.png" /></div>
<div id="blog_contain">

Style sheet:
Code:

body{
font-family:Arial, Helvetica, sans-serif;
width:713px; 
background:#cfeae7 url(bg.png); 
margin:0 auto;
height:100%
}
#container{height:100%; width:750px;}
#head{text-align:center; padding-right:25px;}
.float{float:left;}
.ev1{float:left; width:211px; background:url(ev_box_bg.png); font-size:24px; text-align:center;}
.ev2{float:left;text-align:left; text-indent:6px;color:#9ce4e4;padding-top:5px;height:100%;}
.ev3{padding-left:5px;text-indent:3px; padding-top:10px; width:211px;}
.ev4{float:left; font-size:12px;color:#b1e7e7; height:100%;}
.ev5{text-align:right; font-size:12px; color:#a2e6e6; padding-right:15px;padding-bottom:9px;height:100%;}

#ev_top{padding-left:6px; margin:0px; padding-top:0px;padding-bottom:0px;}
#ev_bot{float:left; margin:0px; padding:0px;}

Any ideas? Help would be appreciated! Thanks.

I have a list within a table and much of the content has links to two different javascript codes. One is a popup javascript to so that I can control the window size and the other is a toggle.display javascript to show/hide specific details about my list. The scripts run fine, but for some odd reason the content in my table gets cut off randomly towards the end of the list.

I went through to make sure that I didn't have any div tags nested.. etc.. and i'm now at a complete loss as to why my content within the table gets randomly cut off.

Any help would me much appreciated. The link for the site is he http://netimpact.org/displaycommon.c...rticlenbr=2440. You'll notice at the very bottom of the table it randomly stops..

Hello,
I am newbie, just has started my adventure with html.

I tried to make an easy static site, without any additional thingd, but it occured a problem.
1. I mean, as I put table in table
because I did know how to to id in different way, to make buttons on the left stay up while text on the right is moving- if I do normal table with 2columns and on the left lets say 5rows for buttons, on the right I unite all rows to make one big sort of box for contents, as I go down and try to write something morre, the rows from the letf were enlarging too
If the size of explorer or firefox is nor full screen, the text in contents is going away (like now in lycos server, where screen is not full, but "cut" by advertise)

2. I have highlighted buttons, but not always works, why? (i mean it works, but darker buttons are charging so slow- maybe it is so because i saved them in pgn instead in gif, and each one is about 50kb?)
-probably it is not this- because I have just changed into gif, and it is still the same

3. Another problem, as I post the site, I have notice, that in firefox I can not navigate with buttons, while in explorer yes, is it a fault of my coding, or of server where I put website?

Here I post my website:
http://members.lycos.co.uk/aniaacolgate/

Could someone take a look on the code, and will be so kind to correct me?
It is a basic easy site of very begginger

I just wanted to make a shape like this:
- top: a banner
- buttons in horizontal and vertical way
- under buttons: contents (sincerly would like to put frames, but do not know how to put them there, is on the left there r buttons

Thank you so much in advance for reply
Sorry for mistakes in language

Ok I want to have a page that has 2 columns. Here is what I have:

Code:

	<div id="wrap">
		Top
		<div id="left">
			Left Div
		</div>
		<div id="right">
			Right Div
		</div>
		Bottom
	</div>

I want the left and the right divs to be columns. How can I do this? I am new to divs --I have always used tables.

Thanks~

Hello,

Please have a look at this site: http://www.shahspace.com/bow/home.html

As you can see, I have two div colored pink and some space between them and around them. I'd like to get rid of all spacing but I can't.

Here's the code:

Code:

<html>

<head>

<title>The Bow Tower</title>

<style>

body
{
background: url('content_bg.jpg');
background-repeat: repeat-x;
}

#textdiv
{
width: 230px;
height: 100%;
background-color: #ffaaaa;
float: left;
padding: 0;
margin: 0;
}

#imgdiv
{
width: 250px;
height: 100%;
background-color: #ffaaaa;
padding: 0;
margin: 0;
}

span
{
font-size: 18pt;
font-family: verdana;
font-weight: bold;
}

</style>

</head>

<body>

<div id="textdiv">
<br>
<br>
<span>
The Bow Tower<br>
</span>
<br>
<br>
<ul>
<li><a href="services.html">Services</a></li>
<li><a href="information.html">Information</a></li>
<li><a href="health_safety.html">Health and Safety</a>
<li><a href="index.html">Index</a>
</ul>
</div>

<div id="imgdiv"><img align=right src="bow tower.jpg" border=0></div>

</tr>
</table>

</body>
</html>

What can I do to get rid of the spacing (I'm working in IE9).