Lisa Goettel wrote: > I'm really wanting to embrace the present and CSS, and am having a > rough go, as every single site I've converted, or at least partially > converted from tables has issues in IE.
Some fixes for IE further down, but first thing first... It is quite risky to take on 'real-world projects' with CSS without a relative good grasp on same CSS. You should finish reading EAM's book first, and probably read it a few more times and create at least a few dozen test-cases. It is also a good idea to read through the CSS specs a few times, and check the support across browser-land. This site can be quite helpful when browsers start "doing their things" and you don't know why... <http://www.webdevout.net/browser-support> Mixing layout-tables with CSS-layout doesn't make the process easier or less risky, since especially IE throws in a number of bugs and compatibility-problems when given such a combination. Read the following a few times: "Tables have 'Layout' - that's good, but tables have 'Layout' - that's bad. 'Layout' is a bug almost anywhere but in tables - especially in cases when there's no way to control same 'Layout'." Plenty of problems and traps in pure table or pure CSS layouts, but combinations contain a lot more traps. > I'd love some help with this one. I know the CSS is less than > comprehensive and brilliant, but it validates with no errors and > works fine in everything but IE. Validity is good, and an essential starting-point. However, "valid" in itself actually means next to nothing when browsers throw in their different interpretations and bugs. "Valid" means even less when one starts throwing styles at elements as if there were no tomorrow, as the validator can't tell you what makes sense and what doesn't - only if your spelling is correct. You are "over-styling" a bit, which may complicate debugging and also maintenance later on. One example from your stylesheet: table#main-sub-content td#main .karla { float: right; display: block; <--- a float is always 'block' - delete this. vertical-align: bottom; <!--- a float don't align - delete. margin-top: 8px; margin-left: 8px; border-top: 0px; <-- a float don't have borders unless given some - delete. Besides: the correct form would be 'border-top: none;'. } What you'll end up with is the shorter version: table#main-sub-content td#main .karla { float: right; margin-top: 8px; margin-left: 8px; } ...which can be shortened even further, to... table#main-sub-content td#main .karla { float: right; margin: 8px 0 0 8px; } ...and work as intended without redundant and confusing styles. > 1) On the homepage, the bottom border of the bottom two right boxes > shifts down about three pixels. http://www.karlagoettel.com The gap disappears when Tidy cleans up the source-code, so it is probably one of IE's white-space bugs at play - adding a line below the image in IE. Closing the gap between the image and the </td> - placing the </td> on the same line as the image, will probably fix it but only under ideal conditions. So, before or after you go about fixing those 3px, you should check what happens when font-size is altered in a browser - any browser (and don't forget IE's "ignore font size"). The entire line-up is breaking, so it might be a good idea to rethink the method before "flushing out" a few pixels white-space under ideal conditions. You may otherwise end up "cleaning floors while the entire house is on fire"... <http://www.gunlaug.no/contents/molly_1_02.html> ...and that's "no good" :-) > 2) On the about page the floated image in the content gets a space at > the bottom, so it doesn't sit nicely on the bottom border. > http://www.karlagoettel.com/about.html IE (all versions) tends to add a space between the bottom of a float - the image in this case, and the bottom-edge of the float's container. It's another of IE's many white-space bugs. One way to make IE close the gap, is to add an "old-style" clearing element, like so... [......] performing and teaching in over 65 Iowa communities.</p> <br style="clear: both;"> </td> </tr> </table> Of course: use a class for styling that <br> from the stylesheet. Note that IE will insist on that element being a <br>, so using another element for clearing tends to fail in IE in these cases. It's an inheritance from older standards, where <br clear="all"> was the general way to clear. Still is in '4.01 Transitional' BTW. There is also a basic designer-flaw in the line-up of that image, in that a float will not align with the bottom of its container (no matter how many styles you throw at the float) _if_ other content get past it. This is again one of those "there is no such thing as fixed font-sizes in web design" cases, as the text easily grow past the image when resized - in all browsers. regards Georg -- http://www.gunlaug.no ______________________________________________________________________ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
