HTML - Frustrated With Tables Inside Tables, Please Help!

hi everybody,
i have a problem displaying an html page that contains nested tables, all in a div.
now the testing page that i present is a simple html, which works just fine in FF, chrome, safari and opera. sadly, it doesnt in IE7 (didnt test other IE versions).
the goal is to make the scroll of the div reflect the width of the tables. i dont know what is causing this, maybe there's something missing in my code, or just an IE bug, perhaps...
Anyway, i appreciate you reading this and thanks for your help, if any.

hi there, i have this problem which has really annoyed the hell out of me becouse it makes no sense at all for me.

Thing is, i have a background in a table cell. and i want the inside of the table to be padded 10 px from bottom and 10 px from right, but not the background itself!!

this is, it doesnt matter how i padd vertical that doesnt affect the background, but when i padd the sides the background comes along padded omg its so annoying >_< i have tried to come up with an understanding of why this is, and im totally clueless!

its the cell with the xGs content.

HTML Code:

<table id="iccup" width="580px" height="200px" border="0" cellpadding="0" cellspacing="0">
				<tr>
					<td colspan="2" width="580px" height="8px" ><img src="images/news_top.gif"/></td>
				</tr>
				<tr>
					<td id="textstyle1" style=" padding-bottom: 7px;" align="center" valign="middle" width="386px" height="33" background="images/mainwindow_left_header.gif">Register</td>
					<td id="textstyle2" style=" padding-right: 10px; padding-bottom: 10px;" align="right" valign="middle" width="194px" height="33" background="images/mainwindow_right_header.gif">xGs</td>
				</tr>
				<tr>
					<td colspan="2" style="padding-left: 11px; padding-right: 10px;" valign="top" width="580px" background="images/news_mid.gif">
						
					</td>
				</tr>
				<tr>
					<td colspan="2" width="580px" height="10px" ><img src="images/news_bottom.gif"/></td>
				</tr>

			</table>

Hi guys,

I've been frustrated for awhile trying to fix three of my problems. I just started making a site for myself today, the specific one is http://www.bcsticketsnow.com/rosebowl.html

Anyway, I've got three problems, and appreciate any help anyone can offer on any of them:

1. I'm new to frames, and am told to stay clear of it. But I don't know php, so this is the only way I know to make a header, middle and footer on all 20 pages that I'm going to have where I only need to edit one to change all.

So I have 3 frames in the frameset, header, mainrosebowl, and footer. I understand that cols="220,*,100" will make the header 220 pixels, the footer 100 px, and the middle part the rest of the window. But I'm trying to figure out a way to have it go deeper than the window. As you can tell, I've got a scroll bar on that middle frame. I want that frame to extend to more than 100% and push the footer below the visible window. So I'm really looking for a big scroll bar for the entire window to scroll down, not a mini scroll bar just for the middle frame. Is this possible? Having the cols add up to only the size of the window isn't what I'm looking for.


2. In the header frame, I've got that drop down menu (says "Bowl Events"). When I put the form in for the drop down menu, it kind of expanded the height of the table. It had less space before in that row of the table with the blue background. When I put the form in there, it kinda messed up the spacing. I essentially want to delete that space below bowl events to make the height of the row of that table like half the size. Any ideas?


3. For that same drop down menu, I'm trying to target each link in that menu to open up a new window (like target="_top"). But putting it after <option value="URL" target=..."> does nothing. Am I supposed to put it in the javascript? Here's what I have now:

<script type="text/javascript">
function goToPage(dd) {
var ind = dd.selectedIndex;
if (ind == 0) { return; }
var url = dd.options[ind].value
document.location=url;
}
</script>


<form>
<select name="eventlist" onChange="goToPage(this); return false;" size="1" style="border: 0; BACKGROUND: navy; COLOR: white; FONT-FAMILY:
arial; FONT-SIZE: 15px; font-weight: bold;">
<option value="">Bowl Events</option>

<option value="http://www.bcsticketsnow.com/bcschampionship.html" onclick="header.location.href='_top'">BCS Championship</option>

<option value="http://www.bcsticketsnow.com/rosebowl.html">2009 Rose Bowl</option>

<option value="http://www.bcsticketsnow.com/orangebowl.html">2009 Orange Bowl</option>

<option value="http://www.bcsticketsnow.com/fiestabowl.html">2009 Fiesta Bowl</option>

<option value="http://www.bcsticketsnow.com/sugarbowl.html">2009 Sugar Bowl</option>

<option value="http://www.bcsticketsnow.com/chickfilabowl.html">2009 Chick-Fil-A Bowl</option>

<option value="http://www.bcsticketsnow.com/capitalonebowl.html">2009 Capital One Bowl</option>

<option value="http://www.bcsticketsnow.com/cottonbowl.html">2009 Cotton Bowl</option>

<option value="http://www.bcsticketsnow.com/holidaybowl.html">2009 Holiday Bowl</option>

</select></form>

Hi

Normally, when you have more than one table in your code, the tables will be placed one under each other.

Example:
<table>
...
</table>
<table>
...
</table>

When you want the tables to be placed next to each other, you need to set the align attribute.

Example:
<table align="left">
...
</table>
<table align="left">
...
</table>

BUT: When you do it like in the 2nd example (tables next to each other), in Firefox, the tables will wrap to a new line if there is no more space. In Internet Explorer, the tables will not wrap. The result is a horizontal scrollbar or "hidden tables".

Why this? How can I make the tables wrap also in Internet Explorer as it does in Firefox? Is it possible with a special CSS definition or with a special DIV/SPAN tag?

Thanks for your help
praiser

hi all, i'm having problems with tables

i want it to look like this:

http://www.exsilentio.org/apa/test/want.jpg


here's the site, i don't know why they're not next to eachother, and at one point they were, but when i made the window smaller they weren't next to eachother...i also tried making a big table to put those tables in and it didn't work...thanks

Code:

<html>
<head>
<title>top</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css"><!--
#table1, #table2 {
float: left;
margin-left: 0.5em;
margin-right: 0.5em;
}
html, body {scrolling: auto;}
</style>
</head><center>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">

<table id="Table_01" width="992" height="151" border="0" cellpadding="0" cellspacing="0">
	<tr>
		<td colspan="7">
			<img src="images/top_01.gif" width="992" height="109" alt=""></td>

	</tr>
	<tr>
		<td>
			<img src="images/top_02.gif" width="143" height="18" alt=""></td>
		<td>
			<img src="images/top_03.gif" width="145" height="18" alt=""></td>
		<td>
			<img src="images/top_04.gif" width="144" height="18" alt=""></td>
		<td>

			<img src="images/top_05.gif" width="144" height="18" alt=""></td>
		<td>
			<img src="images/top_06.gif" width="144" height="18" alt=""></td>
		<td>
			<img src="images/top_07.gif" width="19" height="18" alt=""></td>
		<td>
			<img src="images/top_08.gif" width="253" height="18" alt=""></td>
	</tr>
	<tr>

		<td colspan="7">
			<img src="images/top_09.gif" width="992" height="24" alt=""></td>
	</tr>
</table></center>
<center><table id="big1" width="973" border="0" cellpadding="0" cellspacing="0"><td>
<table id="table1" width="720" border="0" cellpadding="0" cellspacing="0">
		<td align="left"><img src="images/bottom_01.gif" width="720" height="7" alt=""></td>
		<tr><td align="center"bgcolor="d6d6d6">dsafasdf<Br><br>asfdasdfsd<br></td><tr>
		<tr><td align="center"><img src="images/bottom_07.gif" width="720" height="4" alt=""></td></tr></table>

		<table width="19" cellpadding="0" cellspacing="0"><td> <img src="images/spacer.gif" width="19" height="5" alt=""></td>
<table id="table2" width="253" cellpadding="0" cellspacing="0" border="0">
<td align="right"><img src="images/bottom_03.gif" width="253" height="5" alt=""></td>
		<tr><td align="center"bgcolor="d6d6d6">dsafasdf<Br><br>asfdasdfsd<br></td><tr>
		<tr><td align="center"><img src="images/bottom_07.gif" width="253" height="4" alt=""></td></tr></table>
	</table>
</body>
</html>

site