PDA

Click to See Complete Forum and Search --> : I screwed up Kyle's page

Duke Will
08-28-2003, 04:38 PM
I started building this web page a couple of days ago and now I keep adding and adding. I've got the centering goofed up. The page is here (http://www.wepay.com).

I asked in the javascript forum about making a graph that would advance as donations came in. A guy on there showed me some HTML and I modified it and put it in there. I was tweaking what he did and trying to incorporate this into my page. Before his code addition, I already had...

<style type="text/css">
<!--
body {font-family:Arial, sans-serif}
-->
</style>

...and I combined it with his STYLE code (for the bar chart deal) like below. Is this permissible?

<style type="text/css">
<!--
body {font-family:Arial, sans-serif}
td,th {vertical-align:bottom;text-align:center;padding:7px;}
#bar1 {height:21px;width:20px;border:2px ridge red;background:red;}
#bar2 {height:100px;width:20px;border:2px ridge blue;background:blue;}
-->
</style>

EDIT: NOTE, I temporarily changed the above...
td,th {vertical-align:bottom;text-align:center;padding:7px;}
...to...
td,th {vertical-align:bottom;text-align:left;padding:7px;}

My alignment got all screwed up. Within the box toward top where it says "Kyle Photo Soon"... it was centered within that box. Not now. And I had the chart table centered within the page but not now. And it seems my left margin between the left text edge and the blue is closer now... seems I used to have more space there... between the text and blue and left and right. Maybe I need a cellpadding deal... I don't think i have that in the main table. I know enough to be dangerous.

I've commented out some stuff that I didn't have time to fix, so if you look, disregard. Any advice is appreciated.
soccer362001
08-28-2003, 05:16 PM
<table border="0" width="80px" height="80px" style="border: solid #000000 1px;" bgcolor="#FFFFFF">
<tr>
<div style="text-align:center;">
<td width="100%" align="center">Kyle Photo<BR>Soon!</td>
</div>
</tr>
</table>
Duke Will
08-28-2003, 05:40 PM
Originally posted by soccer362001
<table border="0" width="80px" height="80px" style="border: solid #000000 1px;" bgcolor="#FFFFFF">
<tr>
<div style="text-align:center;">
<td width="100%" align="center">Kyle Photo<BR>Soon!</td>
</div>
</tr>
</table>

That didn't work on my page. The text was centered, yes, but the table was not. So, I changed it to...

<table border="0" width="80px" height="80px" style="border: solid #000000 1px;" bgcolor="#FFFFFF" align="center">
<tr>
<div style="text-align:center;">
<td width="100%" align="center">Kyle Photo<BR>Soon!</td>
</div>
</tr>
</table>

...and now the table is centered but the TEXT is not.

If anybody knows... the STYLE question in the orig post... and the question about the CHART not being centered. I've got something out of whack.
soccer362001
08-28-2003, 05:59 PM
<div style="text-align:center;">
<table border="0" width="80px" height="80px" style="border: solid #000000 1px;" bgcolor="#FFFFFF">
<tr>
<td width="100%" align="center">Kyle Photo<BR>Soon!</td>
</tr>
</table>
</div>
Duke Will
08-28-2003, 06:08 PM
You are so nice for trying to help me but that text is still not centered. Maybe something in STYLE in HEAD is conflicting or something else I have done.

Originally posted by soccer362001
<div style="text-align:center;">
<table border="0" width="80px" height="80px" style="border: solid #000000 1px;" bgcolor="#FFFFFF">
<tr>
<td width="100%" align="center">Kyle Photo<BR>Soon!</td>
</tr>
</table>
</div>
soccer362001
08-28-2003, 06:11 PM
What browser are you using? I am using msie 6 and it works fine.

This may be your problem
{vertical-align:bottom;text-align:left;padding:7px;}
Duke Will
08-28-2003, 06:32 PM
Wow, same browser, IE6. I refreshed. The text is left aligned on here. (in the "Kyle photo soon" table.) Same thing in AOL browser.

HECK, in Opera7, the text is aligned LEFT and BOTTOM in that box. Plus, the red "2" in the donation amount box, is NOT red, it is black. Sheesh.
soccer362001
08-28-2003, 06:40 PM
Try changing this
{vertical-align:bottom;text-align:left;padding:7px;}
to this
{vertical-align:bottom;text-align:center;padding:7px;}
Duke Will
08-28-2003, 06:51 PM
Originally posted by soccer362001
Try changing this
{vertical-align:bottom;text-align:left;padding:7px;}
to this
{vertical-align:bottom;text-align:center;padding:7px;}

Nope, that centers everything on page. Heck with it, I'm going to stick an image in there anyway. It just arrived in email.

Although, I'd sure like to know what's causing the problem. ;)
soccer362001
08-28-2003, 09:23 PM
If you get rid of this
{vertical-align:bottom;text-align:left;padding:7px;}
you can use the <div style="text-align:center;"> and <div style="text-align:left;">