I have attached the relevant portion of code for this particular page. I have three tables across the page, with 10px spacers at the top of each table. The problem is that the info in the left and right tables under the spacer is not going to the top as specified in valign="top". <br />
<br />
The same code works in other pages of this site which are not quite as deep as this one.<br />
<br />
Any help would be appreciated, I've looked at this code until my eyes are crossed.<!--content-->Your HTML does not help much without the images.<!--content-->The outline of the boxes should give you an idea of where things are falling, at least I see them when I checked the unattached file with IE, but I've attached the images with this message
<br />
<br />
The second boxes down in the left and right colums are kind of floating in the colums, rather than butting up to the bottom of the 10px spacers.<!--content--><table cellSpacing="0" cellPadding="0" border="0" height="100%" width="146" background="images/pixi_tan.gif"><br />
The height="100%" is the culprit. Try:<br />
<table cellSpacing="0" cellPadding="0" border="0" width="146" background="images/pixi_tan.gif"><br />
The other side has the same solution.<br />
<br />
The only problem is that the background image does not fill the "column". You can move your background image to the cell that contains the table so that the area below the table continues the color.<br />
<br />
This is one of the more frustrating problems that can occur when people "misuse" tables for layout purposes. You cannot easily fix problems and browsers will do unexpected things, especially when tables are nested within tables.<!--content-->EDIT: I removed my zip-file with changes in the html-code. But you still have a lot of unecessary information in your script. For example, you have a lot of tables. And also, the background seems to be one-colored so then it's easier to just use rgb-backgroundcolor.<!--content-->Thanks for your replys, I will try your suggestion Gil. I am on a crash course of learning html, having been suddenly appointed the "web person" at work.<br />
<br />
Robin, I only included part of the code of the whole page, there were other reasons for not having the BG set to red, but thanks!<br />
<br />
Gil, can you point me toward a resource for learning how I am misusing tables? And is the the controversial tables vs. no tables subject I see now and again on these boards?<br />
<br />
Thanks again!<!--content-->Gil, can you point me toward a resource for learning how I am misusing tables? And is the the controversial tables vs. no tables subject I see now and again on these boards?Heh, heh. Yes, that has been a rather bloody fight. I'm not opening *that* can of worms again!<br />
<br />
IMHO, CSS is not quite there yet as far as being easy to use for replacing tables. That is what the WYSIWYG editors have been using for years. I don't think there is a pure answer. CSS is the forum to read for other options and plenty of opinions.<br />
<br />
Whenever I try to help people with "table problems", the first thing I do is turn on borders and look for strange cells and fix them. Then I look for ways to simplify the properties of the cells in favor of letting the content dictate the cell size if possible. Then I look for unexpected white space.<br />
<br />
When I find the tag that is causing the problem, I comment it out and replace it with the minimal tag to see if the problem changes. Sometimes there are work-arounds that you can discover by doing this. You can add parameters one at a time until the thing breaks again. Once you know which thing is hurting you, you have a chance of rearranging things to make it look the way you want.<!--content-->So looking at the part of the page that I uploaded, how would I rewrite it without nesting the tables? <br />
<br />
I had tried to talk the Art Director out of having the white border around the whole page, to no avail, and have no idea how to get the columns with art AND a background in them to work without nesting them. Ideas? <br />
<br />
And kudos to everyone answering questions in these forums. I have learned more here in the past few months than I would have thought possible.<!--content-->I got everything to display properly except the UL section. Maybe it's an IE bug. Maybe Charles can shed some light. See attached.<!--content-->What exactly do you consider wrong with the listed items regarding formatting? <br />
<br />
Is this what you were after lined up text:<br />
<!-- m --><a class="postlink" href="http://www.xhtmlcoder.com/worthvalley/wvyfc11.php">http://www.xhtmlcoder.com/worthvalley/wvyfc11.php</a><!-- m --><!--content-->Thanks Gil, I'm going to have to study that file. I think I'm going to like this CSS!<br />
<br />
Robert - looking at the code on that page, the regular list items don't have a bullet in front of them but I see that the list on the right where you created a style for them does have a square bullet. Why would the regular items not have a round bullet?<br />
<br />
Thanks!<!--content-->What exactly do you consider wrong with the listed items regarding formatting?When the line wraps to the next line, it starts as unindented. When I first laid it out, all the text in the center column inherited the <CENTER> tag. When I tried to eliminate the centering effect, using "text-align: left", the bullets dissappeared. So then I added the LI styles to the style sheet, and then at least I got back the bullets, but the indent doesn't seem to be working right.<!--content-->Because of semantics the navigation list is a list, hence <li> and I used CSS, I will look next week, if nobody steps in because I have to go somewhere.<!--content-->The indentation is working how it should as defined in the CSS using the 'text-indent:' though now I know what you mean.<br />
<br />
Change the CSS li rules to: ul, li{list-style: disc; text-align: left; margin-left: 90px;} <br />
<br />
Basically you have used a really bizarre method of aligning the page that has resulted in the odd behaviour.<!--content-->
<br />
The same code works in other pages of this site which are not quite as deep as this one.<br />
<br />
Any help would be appreciated, I've looked at this code until my eyes are crossed.<!--content-->Your HTML does not help much without the images.<!--content-->The outline of the boxes should give you an idea of where things are falling, at least I see them when I checked the unattached file with IE, but I've attached the images with this message
<br /><br />
The second boxes down in the left and right colums are kind of floating in the colums, rather than butting up to the bottom of the 10px spacers.<!--content--><table cellSpacing="0" cellPadding="0" border="0" height="100%" width="146" background="images/pixi_tan.gif"><br />
The height="100%" is the culprit. Try:<br />
<table cellSpacing="0" cellPadding="0" border="0" width="146" background="images/pixi_tan.gif"><br />
The other side has the same solution.<br />
<br />
The only problem is that the background image does not fill the "column". You can move your background image to the cell that contains the table so that the area below the table continues the color.<br />
<br />
This is one of the more frustrating problems that can occur when people "misuse" tables for layout purposes. You cannot easily fix problems and browsers will do unexpected things, especially when tables are nested within tables.<!--content-->EDIT: I removed my zip-file with changes in the html-code. But you still have a lot of unecessary information in your script. For example, you have a lot of tables. And also, the background seems to be one-colored so then it's easier to just use rgb-backgroundcolor.<!--content-->Thanks for your replys, I will try your suggestion Gil. I am on a crash course of learning html, having been suddenly appointed the "web person" at work.<br />
<br />
Robin, I only included part of the code of the whole page, there were other reasons for not having the BG set to red, but thanks!<br />
<br />
Gil, can you point me toward a resource for learning how I am misusing tables? And is the the controversial tables vs. no tables subject I see now and again on these boards?<br />
<br />
Thanks again!<!--content-->Gil, can you point me toward a resource for learning how I am misusing tables? And is the the controversial tables vs. no tables subject I see now and again on these boards?Heh, heh. Yes, that has been a rather bloody fight. I'm not opening *that* can of worms again!<br />
<br />
IMHO, CSS is not quite there yet as far as being easy to use for replacing tables. That is what the WYSIWYG editors have been using for years. I don't think there is a pure answer. CSS is the forum to read for other options and plenty of opinions.<br />
<br />
Whenever I try to help people with "table problems", the first thing I do is turn on borders and look for strange cells and fix them. Then I look for ways to simplify the properties of the cells in favor of letting the content dictate the cell size if possible. Then I look for unexpected white space.<br />
<br />
When I find the tag that is causing the problem, I comment it out and replace it with the minimal tag to see if the problem changes. Sometimes there are work-arounds that you can discover by doing this. You can add parameters one at a time until the thing breaks again. Once you know which thing is hurting you, you have a chance of rearranging things to make it look the way you want.<!--content-->So looking at the part of the page that I uploaded, how would I rewrite it without nesting the tables? <br />
<br />
I had tried to talk the Art Director out of having the white border around the whole page, to no avail, and have no idea how to get the columns with art AND a background in them to work without nesting them. Ideas? <br />
<br />
And kudos to everyone answering questions in these forums. I have learned more here in the past few months than I would have thought possible.<!--content-->I got everything to display properly except the UL section. Maybe it's an IE bug. Maybe Charles can shed some light. See attached.<!--content-->What exactly do you consider wrong with the listed items regarding formatting? <br />
<br />
Is this what you were after lined up text:<br />
<!-- m --><a class="postlink" href="http://www.xhtmlcoder.com/worthvalley/wvyfc11.php">http://www.xhtmlcoder.com/worthvalley/wvyfc11.php</a><!-- m --><!--content-->Thanks Gil, I'm going to have to study that file. I think I'm going to like this CSS!<br />
<br />
Robert - looking at the code on that page, the regular list items don't have a bullet in front of them but I see that the list on the right where you created a style for them does have a square bullet. Why would the regular items not have a round bullet?<br />
<br />
Thanks!<!--content-->What exactly do you consider wrong with the listed items regarding formatting?When the line wraps to the next line, it starts as unindented. When I first laid it out, all the text in the center column inherited the <CENTER> tag. When I tried to eliminate the centering effect, using "text-align: left", the bullets dissappeared. So then I added the LI styles to the style sheet, and then at least I got back the bullets, but the indent doesn't seem to be working right.<!--content-->Because of semantics the navigation list is a list, hence <li> and I used CSS, I will look next week, if nobody steps in because I have to go somewhere.<!--content-->The indentation is working how it should as defined in the CSS using the 'text-indent:' though now I know what you mean.<br />
<br />
Change the CSS li rules to: ul, li{list-style: disc; text-align: left; margin-left: 90px;} <br />
<br />
Basically you have used a really bizarre method of aligning the page that has resulted in the odd behaviour.<!--content-->