table alignment not working

liunx

Guest
here's the site:<br />
<!-- m --><a class="postlink" href="http://lauraweaver.com/test/askexpert.html">http://lauraweaver.com/test/askexpert.html</a><!-- m --><br />
<br />
toward the bottom of the page are two small tables (that have the same contents)<br />
<br />
in each corner of the table are graphics that round the edges of the table. upper left gif is aligned to the top & left; upper right gif is aligned to top & right; etc...<br />
<br />
for some reason the table just stopped working right - the bottom gifs would not align properly. so i created a brand new table - from scratch - and they are aligning. but what caused the table to just stop aligning properly? i need to prevent this from happening & don't know what caused it.<br />
<br />
can you see a line of blue under the bottom gifs in the first table? maybe it's just my screwed up browser. if they all look to be aligning properly - maybe it's just my browser? i just checked it on someone else's puter & it looked like it did on mine.<br />
<br />
please help!<br />
TIA,<br />
shelly.<!--content-->looks like it's baseline vs. bottom alignment. bottom alignment worked. i'd use that.<br />
<br />
i'm not sure if "baseline" alignment works in IE, it used to just be a netscape thang. at any rate, it's intended to align elements to the bottom of nearby text, which is by default usually a few pixels above the actual bottom of any cell or area in general.<br />
<br />
hope that helps.<!--content-->transmothra,<br />
thanks - that does help because i didn't know the diff between baseline & bottom.<br />
unfortunately i did try it both ways to no avail.<br />
i think i may have copy & pasted the first table from a previous page whereas the new working one i created from scratch - who knows!<br />
thanks,<br />
shelly.<!--content-->The line at the bottom of the table is the background colour you have assigned to the table. Because your images are blue curve with transparent empty area the background colour shows through. You can either:<br />
<br />
1) Make the corner image's background white (blue curve on white background)<br />
<br />
2) Don't make the table background blue, make the cells that you want to be blue, blue, but leave the corner ones clear.<br />
<br />
The first option is the easiest but if you ever change the page's background colour you will have to change the background colour of the corner gifs as well.<br />
<br />
I saw something else as well. You have a <div align="center"> followed by a <center> and even an invalid tag <align="center">. You could do with tidying up the all those center tags. I never use the <center> tag. There are always better ways. The <div align="center"> is the best, and most future proof method.<br />
<br />
Looking good though.<!--content-->Ok, your code is exactly fine. The problem is how browsers read it. You know what white space is? Extra " " spaces or Tabs or Returns put in between pieces of code to make it look nice and pretty, so us Humans can find/debug it that much quicker. <br />
<br />
Computer are SUPPOSED to ignore white space. You can, theoretically, put in a million " " spaces and the browser (IE, NS, etc) will give but but one. For the most part they do a good job. But you have found one of the rare-er instances where your white spacing matters. In the first table, you have code that looks like this: You (or your program) pressed enter Here<br />
|<br />
<td><img src=http://www.htmlforums.com/archive/index.php/"images/bcornerul.gif"><br />
</td><br />
^^ spaces ^^In your hand-coded table you have code that looks like this: <td><img src=http://www.htmlforums.com/archive/index.php/"images/bcornerul.gif"></td><br />
^^<br />
NoticeThose extra 14 spaces and 1 return are reduced to simply 1 " " space. But that's enough to mess up your code in the first table. You will need to make sure your program puts </TD> on the same physical line you typed <IMG stuff> on. Voila! Problem Solved.<br />
<br />
Nota Ben? I deleted the extra code above because it gets in the way of my point. Make sure you keep it all. All your aligns are just dandy the way they are :) (width="25" height="25" valign="top" align="left" et cetera...)<br />
<br />
Ack! In the time it took me to type this and make sure it was all aligned, three others replied }:-)<br />
<br />
When you think about it, that's the only difference between the two tables, so, sorry to invalidate all other discussion, but I'm right, and they're not. :eek:<!--content-->To further illustrate my point, look at the HTML file without pictures. You'll notice your problem is actually two-fold. There's space below the top-corner-images, and the bottom-corner-images. <br />
<br />
You left out the "spacer" picture on the second table; it doesn't matter whether it was there or not.<br />
<br />
In all cases, deleting the extra "white space" will remove your problem.<!--content-->thank you postitlord - i bow to your brilliance. :)<br />
<br />
i had used that space.gif to force those other two graphics to the top & bottom (which I didn't bother w/ in the 2nd table). but i did remove all those extra spaces like you said & it worked like a charm! <br />
thanks again postitlord - i am humble to the knowledge of the HTML forum gurus :)<!--content-->well said Postitlord ;)<!--content-->
 
Back
Top