Tables Alignment problem

Aaron1988 · #1 Mar 25th, 2007, 23:36

Hi i am wondering what is up with the alignment of the "poll" table cell cause i think what ever i would put in it, it would stretch the tables so all the page doesnt look in place, So PLEASE don't reply if you are going to ask me to change my coding styles to divs, cause thats not helpnig me at all.

P.S if you dont understand what i am saying then look at my page

www.3d-modelling-art-online.com if you look on left you have the poll if for example i put a sentence in there it would do the same thing so need to know how i can stop thsi from happening cause it makes the "lines" not line
up exactly transparent

Also before i forget if for example i did a word called "improvements" thats what knocks it out of place but if i keep words small its ok so is there a solution to this thanks
Thanks
Aaron

Lchad · #2 Mar 26th, 2007, 11:37

I must be blind, I can't see the "poll" table. Did you use % or pixels. If you set pixels, it shouldn't expand.

Aaron1988 · #3 Mar 26th, 2007, 15:25

hi linda tell me when you are going to view it ok then i will reupload that one

Lchad · #4 Mar 26th, 2007, 15:31

Aaron, I'm online now... and will be for a couple of hours!

Aaron1988 · #5 Mar 26th, 2007, 15:34

ok i will reupload it now and tell me if you can see the problem thanks

Aaron1988 · #6 Mar 26th, 2007, 15:45

hey linda its reuploaded

http://www.3d-modelling-art-online.com/ if you look its not all aligned up

i dont know why but its when i put something to big for the tables it wider if i took the word "improvements" out then it would be fine

Lchad · #7 Mar 26th, 2007, 16:07

The contents of that table are not LEFT aligned
Here's the code

Code: Select all

<td align="left" valign="top" class="sectiontableentry2">									<label for="voteid13">
Great</label>
</td>
<td align="left" valign="top" class="sectiontableentry1">
<label for="voteid14">
Poor </label>
</td>

I did the code for Great and Poor, just do the same thing for the words "Excellent" and "Improvements".

That should do it!

Aaron1988 · #8 Mar 26th, 2007, 16:10

ok i will try but i used modules to do the poll cause i am using "joomla cms"

thanks
aaron

Lchad · #9 Mar 26th, 2007, 16:18

Hey Aaron, can you get into the html at all? that's what you'll need to find..

Aaron1988 · #10 Mar 26th, 2007, 16:20

yes i can get in the html if you see i have left aligned the module but it still 1 pixel out? if i took the "s" out of improvements it would probably be fine but i dont want it to be like that lol

Aaron1988 · #11 Mar 26th, 2007, 16:21

well i shorten it still no success

if sent you code you couldnt like left align the bits you think need left aligned could you please

There you go see i took improvemnts out and now it is fine

also i dont think it is improvements its somethnig else cause if i input something like hello it mucks table up its if i add more than 3 items it not working

so must be the height am i right?

Lchad · #12 Mar 26th, 2007, 16:27

Yes send me the code!

Aaron1988 · #13 Mar 26th, 2007, 16:30

heres the code in attachment

Lchad · #14 Mar 26th, 2007, 16:46

Aaron it's a matter of widening the base table cell. You have a table cell with several nested tables within. I widened that cell that was the problem to 147 pixels.

Look for your code

Code: Select all

background="http://www.3d-modelling-art-online.com/templates/test/images/index_26.jpg" width="152" height="138" align="left"><!-- 5 -->

Delete the table between these two bits of code above and below:

Code: Select all

</td>
			<img src="http://www.3d-modelling-art-online.com/templates/test/images/index_26.jpg" width="152" height="138" alt=""></td>

Replace all that you deleted with this code:

Code: Select all

<table width="147" cellpadding="0" cellspacing="0" class="moduletable">
				<tr>
			<td>
						<script language="javascript" type="text/javascript">
		<!--
		function submitbutton_Poll1() {
			var form 		= document.pollxtd1;			
			var radio		= form.voteid;
			var radioLength = radio.length;
			var check 		= 0;

			if ( 'z' != 'z' ) {
				alert('You already voted for this item today.');
				return;
			}
			for(var i = 0; i < radioLength; i++) {
				if(radio[i].checked) {
					form.submit();
					check = 1;					
				}
			}		
			if (check == 0) {
				alert('No selection has been made, please try again');
			}
		}		
		//-->
		</script>		
		<form name="pollxtd1" method="post" action="http://www.3d-modelling-art-online.com/index.php?option=com_poll">

		
		<table width="95%" border="0" cellspacing="0" cellpadding="1" align="center" class="poll">
		<thead>
		<tr>
			<td style="font-weight: bold;">
				Chelsea			</td>
		</tr>
		</thead>
		<tr>

			<td align="center">
				<table width="121" border="0" cellpadding="0" cellspacing="0" class="pollstableborder">
											<tr>
								<td width="20" valign="top" class="sectiontableentry2">
									<input type="radio" name="voteid" id="voteid13" value="13" alt="13" />
								</td>
								<td width="94" align="left" valign="top" class="sectiontableentry2">
									<label for="voteid13">
										Great									</label>

								</td>
							</tr>
												<tr>
								<td class="sectiontableentry1" valign="top">
									<input type="radio" name="voteid" id="voteid14" value="14" alt="14" />
								</td>
								<td align="left" valign="top" class="sectiontableentry1">
									<label for="voteid14">
										Poor 									</label>

								</td>
							</tr>
												<tr>
								<td class="sectiontableentry2" valign="top">
									<input type="radio" name="voteid" id="voteid15" value="15" alt="15" />
								</td>
								<td align="left" valign="top" class="sectiontableentry2">
									<label for="voteid15">
										Excellent									</label>

								</td>
							</tr>
												<tr>
								<td class="sectiontableentry1" valign="top">
									<input type="radio" name="voteid" id="voteid16" value="16" alt="16" />
								</td>
								<td align="left" valign="top" class="sectiontableentry1">
									<label for="voteid16">Improvements</label>

								</td>
							</tr>
					  </table>
			</td>
		</tr>
		<tr>
			<td>
				<div align="center">
					<input type="button" onclick="submitbutton_Poll1();" name="task_button" class="button" value="Vote" />

					&nbsp;
					<input type="button" name="option" class="button" value="Results" onclick="document.location.href='http://www.3d-modelling-art-online.com/index.php?option=com_poll&amp;task=results&amp;id=15';" />
				</div>
			</td>
		</tr>
		</table>

		<input type="hidden" name="id" value="15" />
		<input type="hidden" name="task" value="vote" />

		<input type="hidden" name="j58cacc608417ac66680c639f767b53e2" value="1" />
		</form>
				  </td>
		</tr>
		</table>

Aaron1988 · #15 Mar 26th, 2007, 16:58

Linda your a genius thankyou very much it worked

Thanks
Alot that means so much to me cause all i got to look for in the code is where the poll questions are

and change them and them how you did yes??

Thanks
Aaron

Aaron1988 · #16 Mar 26th, 2007, 17:03

ow one more thing how can i do it so when i click contact us doesnt deform the table as well just same as the poll was doing please? do i just need change table width?

Lchad · #17 Mar 26th, 2007, 17:03

Yes that's all I changed... the poll table and the nested ones inside it.

You are welcome!!

Aaron1988 · #18 Mar 26th, 2007, 17:06

so if i want to change for example a width of my main body content i just change the width nested tables cause if you click contact us on my site Linda you will see that nothing is aligning

Lchad · #19 Mar 26th, 2007, 17:16

Select this table

Code: Select all

<td valign="top">
					Street					</td>
				</tr>
								<tr>
					<td valign="top">
					Suburb					</td>
				</tr>
								<tr>
					<td valign="top">
					State					</td>
				</tr>
								<tr>
					<td valign="top">
					Country					</td>
				</tr>
								<tr>
					<td valign="top">
					Zip Code					</td>

Left align the content of this table.
Like this:

Code: Select all

<td align="left" valign="top">
					Street					</td>
				</tr>
								<tr>
					<td align="left" valign="top">
					Suburb					</td>
				</tr>

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
Tables Alignment problem