Mark D Hiatt wrote: >I have been trying the last couple of days to get rounded corners on some >content boxes. I am not having much luck: http://www.markhiatt.com/NewCSS/ > >What I have done so far works as I would expect (nearly) in Firefox. But in >PCIE6, the corners are on one line and the middle cell is between-but-under >them. I seem to have discovered a gap in my CSS understanding. > >Can someone please explain to me why I have to have the cells listed out of >order in the markup for this to even begin to look right? If I place the >markup so it calls for the northwest cell, the center cell and the >northeast cell in that (logical, to me, from years of doing this with >tables) order, the right-most cell is bumped down onto a new line no matter >what browser I use. > This is because of the float-principles. You did float the NW and NE corners. If you want something in between in the normal flow (the center part NC), you have to place the floats first, and then the inside. If the center div #headNC is before the right float, then the NC is seen as block element, and the next element NE is under it, starting at a new line. For the same reason: the right bottom corner SE is placed after the south center SC > dropping down (but floating right as well).
>If I can live with the out-of-order markup on line one, > You should, or you should have to change the css-recommendations of w3c ;-) Alternative is to float them all (the center part as well): http://home.tiscali.nl/developerscorner/css-discuss/test-cornersMark.htm This is working in IE too, only a small IE correction was needed (see source code). But for different boxes on 1 page or elsewher on the site you have to adapt the css (fixed width is used). >why is PCIE pushing >the center block down a line? When I shorten it up, gaps appear between the >corners and the middle bar. > Yes, IE ... guess 1 of the 5000 IE-bug; don't se which at the moment. >Finally, is there some easier way to do this? >[...] > > Yes, using 1 image and positioning that without floats: for instance one of the Wiki-solutions, perhaps the Liquid Corners method I gave the link before. Link to the liquidcorners.css, and add the copy/paste lines in the html. Ready! :-) Greetings, francky ps: The "DreamWeaver extension" method looks a bit more complicated as needed (lots of div's; lots of images; not too easy to implement), also quite difficult to understand their tutorials, IMO. And: they ask money for it! ______________________________________________________________________ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
