How do I fix these mistakes on my website?

[dfrieber]

Hows it going everybody,

So im designing a webpage, and I know what I want it to look like, but as I make it I am realizing i've never dealt with certain html problems in the past. I need help!

The following is a list of some problems i'm having, and i've kept my html as clean as possible so locating the errors in the code shouldnt be TOO difficult...

WEBSITE URL: www.thegreenlightgroup.com/v2

1) My first problem lies with the bottom of the page. As you can see now, the two green columns just stop wherever they please, with no defining ends. As you've probably already guessed, my goal is to have these two green bars stretch accordingly with different browser windows to just stop at the bottom of the window, with no scrolling. I do not know how to do this. By the way, each of those green columns is made up of an image with a cell right underneath it. The image is half of a rounded rectangle, and the cell underneath is just green, so if i can get that bottom cell to stretch accordingly, i would be set.

2) In Safari, the spacing of the website looks great. However, in IE for macs, the right (and slightly thicker) column has appropriate spacing, while the left column looks all bunched together. This boggles me because the 6px horizontal space underneath the banner in the right column is the same html coding as the spaces that dont show up between the different cells in the left column. weird.

3) What do you guys think the best way would be to make the vertical gray line in the middle of the website white? The right and left columns are each a different table, so this line separates them. Should I put a really skinny table in the middle there? or should i set the background color of the containing div?.......

I sincerely appreciate all the help as this will assist me greatly in the future. Thanks to all sysopt geniuses!

- dan

[jjinno]

1) My first problem lies with the bottom of the page. As you can see now, the two green columns just stop wherever they please, with no defining ends. As you've probably already guessed, my goal is to have these two green bars stretch accordingly with different browser windows to just stop at the bottom of the window, with no scrolling. I do not know how to do this. By the way, each of those green columns is made up of an image with a cell right underneath it. The image is half of a rounded rectangle, and the cell underneath is just green, so if i can get that bottom cell to stretch accordingly, i would be set.


First things first, I think you need to re-think your approach to this website of yours. Instead of separating your tables, nest them. Believe it or not, although a nested table approach may complicate the code by adding 5-10 new tables throughout the code, it will be much easier on you in the long run. Also, by nesting multiple tables, you can make things like the different sized green bars impossible.

Just as an example, if you had (instead of 2 separate tables) used a base table with 3 colums, centered, and at a width of 801px you would simply be able to specify the green to continue as a default background for the two outer columns, and let the inner colum be white with a fixed-width of say 5px. From there you could go ahead an put your Flash and images up correctly.

I threw together a quick example of what I mean by nested tables.
My Version of Your Site (http://users.wpi.edu/~jjinno/test/greenlight/)

If you look closely, you can see some color-discontinuity between the left-top.jpg and the background color behind it. (Also note I reduced most of your images by ~80% in size and KB). I fixed the same problem in the right-side of the site by making a 2x2 image from the center of the right-bottom.jpg to use as the BG.


2) In Safari, the spacing of the website looks great. However, in IE for macs, the right (and slightly thicker) column has appropriate spacing, while the left column looks all bunched together. This boggles me because the 6px horizontal space underneath the banner in the right column is the same html coding as the spaces that dont show up between the different cells in the left column. weird.


As you do more and more web-design, you tend to notice that a lot of places have some graphic called blank.gif. All it is is a 1x1 pixel of transparency. You can use it in tables to assure yourself a correctly spaced table. All you do is place the image as you would any other image, and resize the heigh and/or width to hold the spacing as you see fit.


3) What do you guys think the best way would be to make the vertical gray line in the middle of the website white? The right and left columns are each a different table, so this line separates them. Should I put a really skinny table in the middle there? or should i set the background color of the containing div?.......


I think I answered this as a part of my first response, but just in case... I would use a nested table approach, not solely for ease of columns, but also because you have a better guarantee that WYSIWYG. Remember, tables always colapse upwards and left, unless otherwise directed.

A real big tip for you, as you seem to be nicely equipped in the artistic department, is to develope your CSS skills. You can feel free to download, examine, and use any of the stuff I provided in my example for you.

I hope this helps, and I wish you the best.

Oh, and BTW, I like the color... :D

- Jinno

[ScaryBinary]

My recommendation, though a general one that is probably useless for really answering your questions (don't you just love responses like this? :rolleyes: ), would be to ditch the table layout completely and just go with HTML and CSS.

Check out CSS Zen Garden (http://www.csszengarden.com/?cssfile=/166/166.css&page=1). You can apply different styles to the exact same HTML by clicking on one of the Styles indicated in the menus. There are some pretty cool layouts, all done only with CSS and HTML -- without the use of Tables, Flash, Javascript, etc.

Same to you, jjinno, for your Cheerleading site (ya, I know I'm replying to another post (http://www.sysopt.com/forum/showthread.php?t=182967) in this one......) :)

Just my opinion.

[dfrieber]

WOW

thank you so much jinno, you mustve have spent some time on that. I really appreciate it. I was actually thinking of using nested tables, but i didn't think i could do that and work the way i wanted it to. My goal is to have most of my content appear in the horizontal white gap in the thicker green column. I also wanted the height of the gap in the thick green column to automatically adjust to how much content is in there. I suppose i could do this with nested tables, but i feel like when i introduce the rowspan tag, its gunna mess up the height of both columns...am i wrong about this?

Thanks for all the help

-Dan

ps. thanks to you too binary

[dfrieber]

*update

so I realized i was wrong about the table height changing - it seems that even with all the content i have the table stays a fixed height which is awesome. But I now have 3 small issues to solve:

1) the table seems to end about 15 pixels above the bottom of the browser window. I tried to make it flush, but to no avail.

2) it seems that i can't adjust the height of the top cell in the thinner left green column. i tried doing it in the stylesheet, and then I tried right in the td tag, and nothing worked. but the weird thing is that on your stylesheet bg.jpg is set to repeat, so im confused as to how it only repeats a little bit.

my goal is to have the green void at the top of the thinner green column be as tall as the logo banner, so the navigation appears horizontally even with right underneath the logo banner...like it's shown here: www.thegreenlightgroup.com/v2

3) and my third issue is that in Internet Explorer, big spaces appear above and below whatever kind of content I put in the white space i was talking about earlier (under the logo banner, but above the green)

It's coming along nicely! Thanks for the help!

-dan

[jjinno]

1) the table seems to end about 15 pixels above the bottom of the browser window. I tried to make it flush, but to no avail.


This was my mistake. I had forgotten to eliminate the body margins & padding which is defaultly inserted by most browsers.


2) it seems that i can't adjust the height of the top cell in the thinner left green column. i tried doing it in the stylesheet, and then I tried right in the td tag, and nothing worked. but the weird thing is that on your stylesheet bg.jpg is set to repeat, so im confused as to how it only repeats a little bit.

my goal is to have the green void at the top of the thinner green column be as tall as the logo banner, so the navigation appears horizontally even with right underneath the logo banner...


I wrote an explanation into the "updated" version that I have on my personal account. The link: The Greenlight Group (http://users.wpi.edu/~jjinno/test/greenlight/index.html)
But in essence, I changed the format of your image layout from a few large images to just a few more much smaller images. Because of this, your page will load faster, but it also becomes more code-complicated. To simplify life, I gave the tag an ID of "top-left-resizeable" so that you can know which tag to edit the height of.


3) and my third issue is that in Internet Explorer, big spaces appear above and below whatever kind of content I put in the white space i was talking about earlier (under the logo banner, but above the green)

Now I tried, but unfortunately I was unable to reproduce this error, so ... maybe its fixed? :D

Happy Trailblazing!

- Jinno

[dfrieber]

THANKS so very much jinno!

you've solved all my problems, thanks so much. you really seem to know your stuff.

in the future if i ever have any more website problems, how should i contact you?

THANKS AGAIN