Zymic Webmaster Forums > Table Not Working Properly.

Full Version: Table Not Working Properly.

Zymic Webmaster Forums > Web Design & Development > General Web Design Discussion

Pixeltor

Mar 19 2009, 08:16 PM

So I'm converting my site to php to make it all easier to update. each page consists of 3 tables, one big, entire page one, and two tables inside cells of the big table. However the cells do not seem to be following the width I have set for them.

here is the link, the "games" button does not work. I put borders on to show what is happening.
http://pixeleum.uuuq.com/Contact.php (right-click, view source)
the home page does not look too bad.

I basically want the cell on the left to shrink to the width of the buttons table, and the main content table to expand to the width the main table cell allows.

this is the style_sheet

CODE

body 
{
	background-color:black;
}

hr 
{	
	color: orange;
	background-color: orange;
	height: 2px;
}


a
{
	color: yellow;
	text-decoration: none;
}


table.all_table 
{
	width: 100%; 
	border-collapse: collapse;
}

table.main_table
{
	margin:auto;
}

table.main_table td
{
	padding: 5px;
	width: 100%;
	height: 100%;
	background-color: 333333;
	text-align: left;
	vertical-align: top;
}

table.bottom_table
{
	width: 100%;
}

table.bottom_table td
{
	background-color: 333333;
	text-align: center;
	vertical-align: middle;
}

table.games_table
{
	text-align: top;
	border-style: outset;
	border-width: 1px;
	border-color: orange;
	background-color: 333333;
}

table.games_table td
{	
	width: 100%;
}

td.button_cell
{
	width: 100;
	height: 50;
	text-align: center;
	background-color: 333333;
	border-style: ridge;
	border-color: orange;
	border-width: 2px;
}

td.gametable_cell
{
	background-color: black;
	vertical-align: top;
}

td.test_cell
{
	text-align: left;
	width: 102;
}

font.standard_font
{
	font-family: arial;
	color: orange;
}

font.head_font
{
	font-family: arial;
	color: Lime;
}

font.button_font
{
	font-family: impact;
	color: orange;
	font-size: 150%;
}

font.link_font
{
	font-family: arial;
}

p.indent_p
{
	margin-top: 0;
	padding-left: 30pt;
}

p.footer
{
	text-align: center;
}

help will be appreciated.

handslice

Mar 20 2009, 09:57 AM

your code seems alright... are you sure there's an error? what is says?

MrTouz

Mar 20 2009, 10:52 AM

looks like i can't access your site.

Shouldn't be using tables to organize your layout. Just organize the 'data' such as data from a database... use divisions to build your layout. Simpler code, more valid, and faster.

Pixeltor

Mar 20 2009, 07:57 PM

QUOTE(MrTouz @ Mar 20 2009, 07:52 AM)

strange, I can access the site fine.

I am not aware of organizing my layout in any other way

Pixeltor

Mar 25 2009, 08:40 PM

wow, divs are great!, they help so much. I was rebuilding my site when I decided to switch to xhtml, everything was going good, except for these errors I keep getting when I validate it. they all seem to include the <p> tags, can anyone see a problem with the code?, I can't.

My Site(right-click, view source)
The Validator

MrTouz

Mar 25 2009, 11:47 PM

To start you are validating in transitional... should be using strict.

So this is no good :

CODE

You are using spaces between = and ". when you should not be. it should be

CODE

Than i believe you can not 'class' or 'id' the font element, if you are going to use font than it's open,

CODE

If you are going to modify the font type you should either use the DIV (a class if you are going to use it multiple times, or an ID if you are going to use it once) and in your CSS style on the specific DIV add some custom stuff such as : font-size:13px; color:#000000; font-weight:bold;...
Or a P tag like you did. in your css doc :

CODE

p {
font-size:13px;
font-family:Tahoma ThisandThat HereandThere;
color:#000000;
}

GOOD NEWS

Lucky i assume, when you valid in xhtml STRICT the P tag shows in only 2 errors, the opening P and the ending P at line 83 or should i copy paste :

CODE

<P>23/12/08 - The site has been finally been uploaded and is now running.</p>

Might not see anything here ? well your P is a P and not a p, uppercase P and not lowercase P so it should be <p> and not <P>
_________

And not finalize "why you should not be using xHTML"

http://magnusfx.com/code/why-you-shouldnt-be-using-xhtml

Now it's a matter of hey i want to, hey i don't want to. I believe i can code pretty well and all my layouts are valid HTML 4.1 with CSS 2.1. I dunno, i just don't like using xHTML and i have no reason to.

Read it, you'll be smarter.

Pixeltor

Mar 29 2009, 08:19 PM

thanks for the help, really clarified some things about xhtml vs. html. So I switched to html strict, got annoyed with some font issues and switched to transitional, everything works great with transitional except for 2 errors I get that seemed to be caused by zymic itself because I never typed that in. Should I be using Strict? what are your thoughts?

view post 5 for my site and the validator which gives me errors.

thanks, Pixeltor.

MrTouz

Mar 30 2009, 12:55 AM

You are putting the

CODE

outside

CODE

</body>
</html>

they are closing your doc, nothing goes after since t's the end.

if it's to display something it should be placed where you want it to be displayed (next to nav, on header, on footer...) i believe this is suppose to go inside the <head></head> tags.

You should be using Strict, there are reasons for using Transitional or Frameset (i believe it's how the rest is called) because they are here for a reason, but i always used Strict so i stick with it. I code layouts with divs only, valid in latest HTML strict versions working on all browsers... so that's the way i do it.

Pixeltor

Mar 30 2009, 11:08 PM

CODE

I did not code this, I believe it was added by zymic.

I tried strict but ran into problems with fonts, how do you manage fonts with strict?

and does anyone know how to vertically center text within a <div>?

MrTouz

Apr 1 2009, 09:14 PM

What are your problems with the FONTS ? Should not have any problems with them. again you can't do :

<font class="thisdfont">
Hahaha
</font>

Well i believe you can not class or id the font. If you want to play with font's there are 2 ways.

CODE

CODE

(in your style)

CODE

p {
font-size:13px;
font-family:Verdana;
color:#000000;
}

You are trying to mix the two of them... can't work.

Andrew

Apr 3 2009, 02:16 AM

That xhtml blog post is a pile of poo imo. If we weren't to be using xhtml then why are almost every popular site written with XHTML instead of HTML. Hell even Microsofts website is XHTML (transitional).

imo xhtml helps me write better code. But of course that is just my opinion, as that blog is the opinion of that guy.

Pixeltor

Apr 6 2009, 07:53 PM

I'll compromise, I'm sticking with html transitional. thanks for everyone's help especially Mr. Touz.

still leaves 3 questions though.

1.where is it coming from and why does it give me an error? (on topic of the mysterious javascript i didn't write)
2.does anyone know how to vertically center text within a <div>?
3.divs expand over their containing div's borders (home, news).

my site

Pixeltor

Apr 11 2009, 09:58 PM

I figured out how to keep my divs inseide each other, then the validator randomly started saying my site was valid.
and I think I can vertically center stuff within spans, haven't tried it yet though.

anyway, thanks everyone! stuff is finally coming together now.

This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.