A Margin for Error - in CSS
-
If the standard says so (even if it's crazy), then Apple is the culprit for no following it, this remembers me the much hated "Best Viewed on Internet Explorer" badge...
CEO at: - Rafaga Systems - Para Facturas - Modern Components for the moment...
It's not Apple's implementation of the box model that is in question though. It's the actual W3C specification itself.
-
That's better JimBob, but see how the gutter between the two divs to the left changes? My intention is to make this 'gap' a toolbar, so it needs to be consistent. It's virtually impossible to achieve this in pure CSS3 without the use of margin-top. Trust me, I've tried... You can do it with a table (as has been suggested elsewhere on this post), and that's got to be the easiest approach. You can also do it in JS. Attaching a resizing handler and setting the size of margin-top for the red div to the current height of the top left div (which is what my original code should have done) would give the required result, at the expense of a bit of lag / flicker. By setting the margin of the lower div to the height of the top one, then offsetting 'top' by the height of the toolbar space provides the consistency. The whole CSS model seems to be a bit up in the air to be fair. I'm just hoping that with the renewed interest in the web as an application environment we will (eventually) see a unified, cross the board standard. I won't be holding my breath just yet though...
You mean the vertical space between the two left hand coloured divs? How tall should it be? I might be able to have a crack once I get home from work. You're right, it's a mess just now but flexbox is most definitely on it's way which shall give us much greater power and flexibility. I built a grid system as an experiment using it the other day that worked in all the major modern browsers. It's amazing quite how fast the landscape is moving just now. Such a shame though that it's taken up until recently for change to be enacted.
JimBob SquarePants ******************************************************************* "He took everything personally, including our royalties!" David St.Hubbins, Spinal Tap about Ian Faith, their ex-manager *******************************************************************
-
First off, I'm a web developer. Whilst I'm aware of my lowly position in the food chain I have to point out that I started my career writing ANSI C and assembler, so I've clawed my way up a couple of links. And I'm old... But I use Macs. There's just no helping some people. Anyway, I'm refactoring a web app I wrote a couple of years back, standard PHP / MySQL fare with a liberal sprinkling of JS on the front end. I'm condensing a load of pages down to a single page and squirting a blob of AJAX in there to grease the wheels. There are no frameworks of monolithic libraries, I prefer to roll my own. If you are still reading I'll assume you know roughly what I'm talking about and get to the point. I've laid out my page in a cascading information kind of styley. You click a pretty broad subject in box 'a' and this displays relevant options in box 'b'. Clicking an option then shows specific details in box 'c'. Noddy stuff. I need the content to scale with the page, so I use percentages, and I need a definable and consistent 'gutter' between the boxes, so I'm using absolute positioning. Here's a link to my page mockup[^]. If you resize this window you'll notice (unless you are using Safari of course) that everything goes a bit Pete Tong in the bottom left corner! To position this (red in my example) div, I use a 40% top margin. In a "logical world" (which is obviously latin for "Cupertino") this would mean that I want the gap above this box to be 40% of the page height. In reality however, this equates to 40% of page's 'width'! If you make the page taller, the top margin, set to 40%, stays the same. Make it wider and the margin gets bigger, narrower - smaller! I originally assumed this was a browser error and reported my "Bug" to the "Masters of Such Things" (Latin for "Redmond"...), but the guys at Micro$oft informed me that this is the official spec as handed down from on high by the W3C. Sure enough[^], the powers that be state that:
Quote:
"Note that in a horizontal flow, percentages on ‘margin-top’ and ‘margin-bottom’ are relative to the width of the containing block, not the height (and in vertical flow, ‘margin-left’ and ‘margin-right’ are relative to the height, not the width)."
First off, I must say I've been enjoying your wit. Like you, I've also a web developer - in my case, WAMP (also without a net), for the last seven or so years. I'd say, since your DIVS are absolutely positioned anyway, you could trap the 'resize' event and, using the innerWidth/Height (or IE's equivalent), write a function to put things EXACTLY WHERE YOU WANT THEM - DOWN TO THE PIXEL. Of course, you'd have to manage the whole layout in code. I do this for a picture puzzle app I'm writing. Tables didn't work because, regardless of shrinking all metrics to zero, they always left a gap. I even figured out how to determine if there's a vertical or horizontal scrollbar IN ALL BROWSERS. The trick: place a 1x1 div in the bottom right corner. You can even set display='none'. Compare it's offsetTop/Left with the innerWidthHeight/Width. With no scrollbars there'll be a diff of 1. With 'em the diff is 17. Then remove the DIV. Easy peasy?