Aight, before we begin, let me state that this, so far, is just a test.
Ooookay, let's get started.
Mozilla 1.4:
Border left of the Nav. does NOT extend all the way down.
DIV height is set to 100%, and there is no padding or margin set to override that.
Footer DIV extends down below its main containing DIV's bottom border.
Footer DIV's height and the left DIV's height equal the complete and exact height of the main DIV. There is no padding or margin to override that.
Logo in upper left-hand corner of top DIV is a few pixels short of being flush with the its containing DIV's bottom border.
Image height, to DIV height, and logo DIV height are set exactly the same. No padding or margin is set to override this.
IE6:
Border around both the top DIV and the main DIV is sometimes speckled black, or fully colored.
Border color is set to gray.
Here's a link to the page.
WGD Inc (<!-- m --><a class="postlink" href="http://www.geocities.com/w_g_d_inc/">http://www.geocities.com/w_g_d_inc/</a><!-- m -->)The first thing that's always helped me out when debugging CSS is to validate the HTML. That includes specifying a valid doctype and character set definition. This has two main benefits:
1. It forces browsers released after 2000 (generally) into standards-compliance mode. You're more likely to get consistent results on the different CSS browsers across different platforms.
2. I gives you as a developer a more consitently coded page. If you code in a consistent style, it's easier to go back to the site months from now and wade through the code to change it.
You don't have a valid doctype or character set definition in your code. This puts all browsers (regardless of their release date) into Quirks mode, rather, the browser's support for ANY web technology is at the whim of the browser developers. This was the frustration of the browser wars from 1998 - 2000. Nobody did things the same way, but just close enough to give developers hemmoroids
Links Some articles you may be interested in:
<!-- m --><a class="postlink" href="http://www.alistapart.com/articles/doctype/">http://www.alistapart.com/articles/doctype/</a><!-- m -->
<!-- m --><a class="postlink" href="http://www.alistapart.com/articles/taminglists/">http://www.alistapart.com/articles/taminglists/</a><!-- m -->
<!-- m --><a class="postlink" href="http://www.alistapart.com/articles/slidingdoors/">http://www.alistapart.com/articles/slidingdoors/</a><!-- m -->
<!-- m --><a class="postlink" href="http://www.alistapart.com/articles/slidingdoors2/">http://www.alistapart.com/articles/slidingdoors2/</a><!-- m -->
<!-- m --><a class="postlink" href="http://www.alistapart.com/articles/flexiblelayouts/">http://www.alistapart.com/articles/flexiblelayouts/</a><!-- m -->
<!-- m --><a class="postlink" href="http://www.alistapart.com/articles/goingtoprint/Okay">http://www.alistapart.com/articles/goingtoprint/Okay</a><!-- m -->, thanks for your help. Much appreciated.BTW - if you are having troubles validating your code, that's because of the generated advertisement on geocities. I am having the same problem validating my test site. I simply ignore the errors the generated code causes because I know I will upgrade my host solution and have the advertisments removed.Yes, I've had that problem in the past. I've thrown like 20 or so errors, and only like 3 or 4 of them were actually caused by my poor coding, and not the advertisment code.The div with a height of 100% should not stretch the full height of the canvas if that is what you meant.Should not, as in it won't? Or it's not a very good idea?Okay, for some unknown reason, the top DIV is being stretched past 100 pixels. I don't know why, and I've done everything I can think of.
I've removed every vertical padding and margin, and I've set the height for only the picture and the DIV that it's in.I went and copied your code over to take a look at it and here's a couple quick things. Look at your site in Mozilla 1.5. It looks completely different, in a bad way. overflow-y is CSS 3 and the simple fact that IE 5+ renders it correctly is midly amusing to me. When you define a font-family and one of the font names includes a space, you have to use quotes around the name, ie "MS Serif." "<span class="title">Navigation</span><br><br>" desperately screams "Use a header tag instead." You basically defined it that way using CSS already. I really really would suggest not using the line-through style for regular links. Links that have been used? Sure, but using it on a:link makes your menu more difficult to read.
Ooookay, let's get started.
Mozilla 1.4:
Border left of the Nav. does NOT extend all the way down.
DIV height is set to 100%, and there is no padding or margin set to override that.
Footer DIV extends down below its main containing DIV's bottom border.
Footer DIV's height and the left DIV's height equal the complete and exact height of the main DIV. There is no padding or margin to override that.
Logo in upper left-hand corner of top DIV is a few pixels short of being flush with the its containing DIV's bottom border.
Image height, to DIV height, and logo DIV height are set exactly the same. No padding or margin is set to override this.
IE6:
Border around both the top DIV and the main DIV is sometimes speckled black, or fully colored.
Border color is set to gray.
Here's a link to the page.
WGD Inc (<!-- m --><a class="postlink" href="http://www.geocities.com/w_g_d_inc/">http://www.geocities.com/w_g_d_inc/</a><!-- m -->)The first thing that's always helped me out when debugging CSS is to validate the HTML. That includes specifying a valid doctype and character set definition. This has two main benefits:
1. It forces browsers released after 2000 (generally) into standards-compliance mode. You're more likely to get consistent results on the different CSS browsers across different platforms.
2. I gives you as a developer a more consitently coded page. If you code in a consistent style, it's easier to go back to the site months from now and wade through the code to change it.
You don't have a valid doctype or character set definition in your code. This puts all browsers (regardless of their release date) into Quirks mode, rather, the browser's support for ANY web technology is at the whim of the browser developers. This was the frustration of the browser wars from 1998 - 2000. Nobody did things the same way, but just close enough to give developers hemmoroids
Links Some articles you may be interested in:
<!-- m --><a class="postlink" href="http://www.alistapart.com/articles/doctype/">http://www.alistapart.com/articles/doctype/</a><!-- m -->
<!-- m --><a class="postlink" href="http://www.alistapart.com/articles/taminglists/">http://www.alistapart.com/articles/taminglists/</a><!-- m -->
<!-- m --><a class="postlink" href="http://www.alistapart.com/articles/slidingdoors/">http://www.alistapart.com/articles/slidingdoors/</a><!-- m -->
<!-- m --><a class="postlink" href="http://www.alistapart.com/articles/slidingdoors2/">http://www.alistapart.com/articles/slidingdoors2/</a><!-- m -->
<!-- m --><a class="postlink" href="http://www.alistapart.com/articles/flexiblelayouts/">http://www.alistapart.com/articles/flexiblelayouts/</a><!-- m -->
<!-- m --><a class="postlink" href="http://www.alistapart.com/articles/goingtoprint/Okay">http://www.alistapart.com/articles/goingtoprint/Okay</a><!-- m -->, thanks for your help. Much appreciated.BTW - if you are having troubles validating your code, that's because of the generated advertisement on geocities. I am having the same problem validating my test site. I simply ignore the errors the generated code causes because I know I will upgrade my host solution and have the advertisments removed.Yes, I've had that problem in the past. I've thrown like 20 or so errors, and only like 3 or 4 of them were actually caused by my poor coding, and not the advertisment code.The div with a height of 100% should not stretch the full height of the canvas if that is what you meant.Should not, as in it won't? Or it's not a very good idea?Okay, for some unknown reason, the top DIV is being stretched past 100 pixels. I don't know why, and I've done everything I can think of.
I've removed every vertical padding and margin, and I've set the height for only the picture and the DIV that it's in.I went and copied your code over to take a look at it and here's a couple quick things. Look at your site in Mozilla 1.5. It looks completely different, in a bad way. overflow-y is CSS 3 and the simple fact that IE 5+ renders it correctly is midly amusing to me. When you define a font-family and one of the font names includes a space, you have to use quotes around the name, ie "MS Serif." "<span class="title">Navigation</span><br><br>" desperately screams "Use a header tag instead." You basically defined it that way using CSS already. I really really would suggest not using the line-through style for regular links. Links that have been used? Sure, but using it on a:link makes your menu more difficult to read.