I'm not quite sure if this is the right place to put this, but...
I'm working on a website for an organization called RIMLE, and I have a basic design for the site at <!-- m --><a class="postlink" href="http://rimle.mattpat.net">http://rimle.mattpat.net</a><!-- m -->. It validates as XHTML 1.0 Transitional, and uses valid CSS to size the tables and manage the fonts. In Firefox, Netscape, Safari, and even IE:Mac, it looks perfect, but in IE on Windows, the header of the page is spaced out, and the footer is misaligned. It seems to be a problem with IE's acceptance of CSS, because if I remove the CSS and put the images in their respective table cells directly, it seems to work. However, this method is much harder to control, involves a lot more code, and doesn't quite look as good.
Any suggestions?1) Use the Strict DTD.
2) From the HTML 4.01 Specification:Tables should not be used purely as a means to layout document content as this may present problems when rendering to non-visual media. Additionally, when used with graphics, these tables may force users to scroll horizontally to view a table designed on a system with a larger display. To minimize these problems, authors should use style sheets to control layout rather than tables.The problem is, using the strict DTD would force me to rewrite much of the deprecated tags (like <center>) and put that all into CSS.
As for layout with CSS, I've never been very good with structures like this where the site expands to fit the page. For jelly layouts, I'm fine, but liquid...
In the end, I'll probably just move over to the strict DTD, but I don't know if I'll drop my tables layout unless someone has a suggestion that will help me with auto-expanding DIVs.
Thanks!OK, I switched the page from XHTML 1.0 Transitional to XHTML 1.1 (based on XHTML 1.0 Strict). After fixing a few deprecated elements (surprisingly, I didn't use many in this page), I tested the page in IE Windows. Still no luck. I guess I'll have to drop the tables and move to CSS.Set the table background to background:url(top-fill.gif) repeat-x; or better still dump the tables for css.I just finished doing that about 5 minutes ago, and it worked
. Great minds think alike, I guess... the only problem is one that (most likely) only I will notice, but since the position of the images is off, the curve of the top-right corner starts in (about 1px), then comes back out, and then rounds off the corner. Maybe combining the two images and doing a colspan="2"...?
I have the same problem on the bottom, but I think I can get that fixed the same way as the top.
Thanks!
Edit: Nope, colspan didn't work (well, it looked fine in Firefox, Safari... IE was a different story, again)
Edit (again): Well, by changing the background-position of one of the corner images to "top right", it fixed that problem. And now, it all looks perfect (I don't know how some of it happened, but it looks good on IE, Firefox, and Safari, and validates as XHTML 1.1 and proper CSS, so that's all that matters to me).
I'm working on a website for an organization called RIMLE, and I have a basic design for the site at <!-- m --><a class="postlink" href="http://rimle.mattpat.net">http://rimle.mattpat.net</a><!-- m -->. It validates as XHTML 1.0 Transitional, and uses valid CSS to size the tables and manage the fonts. In Firefox, Netscape, Safari, and even IE:Mac, it looks perfect, but in IE on Windows, the header of the page is spaced out, and the footer is misaligned. It seems to be a problem with IE's acceptance of CSS, because if I remove the CSS and put the images in their respective table cells directly, it seems to work. However, this method is much harder to control, involves a lot more code, and doesn't quite look as good.
Any suggestions?1) Use the Strict DTD.
2) From the HTML 4.01 Specification:Tables should not be used purely as a means to layout document content as this may present problems when rendering to non-visual media. Additionally, when used with graphics, these tables may force users to scroll horizontally to view a table designed on a system with a larger display. To minimize these problems, authors should use style sheets to control layout rather than tables.The problem is, using the strict DTD would force me to rewrite much of the deprecated tags (like <center>) and put that all into CSS.
As for layout with CSS, I've never been very good with structures like this where the site expands to fit the page. For jelly layouts, I'm fine, but liquid...
In the end, I'll probably just move over to the strict DTD, but I don't know if I'll drop my tables layout unless someone has a suggestion that will help me with auto-expanding DIVs.
Thanks!OK, I switched the page from XHTML 1.0 Transitional to XHTML 1.1 (based on XHTML 1.0 Strict). After fixing a few deprecated elements (surprisingly, I didn't use many in this page), I tested the page in IE Windows. Still no luck. I guess I'll have to drop the tables and move to CSS.Set the table background to background:url(top-fill.gif) repeat-x; or better still dump the tables for css.I just finished doing that about 5 minutes ago, and it worked
. Great minds think alike, I guess... the only problem is one that (most likely) only I will notice, but since the position of the images is off, the curve of the top-right corner starts in (about 1px), then comes back out, and then rounds off the corner. Maybe combining the two images and doing a colspan="2"...?I have the same problem on the bottom, but I think I can get that fixed the same way as the top.
Thanks!
Edit: Nope, colspan didn't work (well, it looked fine in Firefox, Safari... IE was a different story, again)
Edit (again): Well, by changing the background-position of one of the corner images to "top right", it fixed that problem. And now, it all looks perfect (I don't know how some of it happened, but it looks good on IE, Firefox, and Safari, and validates as XHTML 1.1 and proper CSS, so that's all that matters to me).