molly.com
Monday 14 February 2005
Yahoo in the Rain
IT’S RAINING IN Sunnyvale, but Eric Meyer and I are enjoying our first ever and warmly received visit to Yahoo! I sure feel sorry for those visually oriented folk here who find purple and yellow an annoying combination. As is reflected in these photos, the company colors are everywhere.
Even among the most experienced designers and developers, the difference between absolute and relative positioning in CSS remains one of the most difficult things to get clear about. Interesting surprise in Safari: As Eric and I were describing the concern, Eric styled the html (root) element with a border to show how if an absolutely positioned box has no defined containing block, that box will be positioned to the root element. Interestingly, when the border was applied to the example, the positioned box dropped below the border for the html element.
Very odd – any Safari users out there ever notice this and if so – what’s up with that?
Filed under: photos, professional, standards, travel
Posted by: Molly | 19:46 | Comments (12)
Hm… you don’t seem wet at all. That’s a very strange bug that I would’ve never noticed without you. Thanks for the note.
is this post about yahoo or positioning in safari?
I’m totally lost.
Hmm, Dustin, I’m trying to figure out what part of stream of consciousness on a blog confuses anyone.
Here, if you need the extra help, a roadmap to my thought process:
1. Molly & Eric are at Yahoo, look at us under the colorful sign!
2. Molly & Eric train in markup and CSS
3. Molly & Eric are discussing positioning and Eric codes up an example to clarify, and loads it into Safari
4. Lo and behold, we run across something that surprises us both
5. I post about it in a blog post
Were you expecting articles under separate cover? Separation of my experience and tech issues? I didn’t know there was a strict MollyML DTD.
I’m sure we’ll be investigating and writing about this in time. In the meantime, sometimes a blog post is just a blog post, ya know?
Mozilla has the same bug.
As one software developer once told me when I complained about a bug in his program: “It’s not a bug; it’s an undesirable feature.”
I found a lovely CSS problem in gecko-based browsers week before last: If you use a floated div at the bottom of a containing div, said parent div’s bottom boundary gets confused. This problem doesn’t show up in IE6 (gasp) or Opera. Remarkably irritating, and should’ve been a pretty basic test case. Guess it’s time to reinvigorate my Bugzilla account. My last bug report was something like #1199; I wonder what they’re up to now.
I’ve decided to go with HTML 4.01 Transitional with table for the outer layout, and CSS for everything else, unless the layout just can’t handle being inside a table. There seems to be a sweet spot of sorts as far as code (HTML + CSS) goes where if the design is just complex enough, and not too complex to work inside a table, that the amount of code is smaller, if not much smaller, than doing a completely table-less layout. That and the float bug in gecko helped me decide on this path. Redefining th and td tags to do what I want sure does make for a lot fewer div class=”blah”s around.
Anyway, check out the Bill Gates announcement about a new IE coming this summer. I wonder how long we’ll have to live with THAT thing; it better be good! They don’t even have to do any ‘innovating’ this time: simply meet HTML, XHTML, and CSS 1 and 2, and I’d be mighty happy.
Please read CSS 2.1, not CSS 2. The root element is just that, it is not equal to the viewport or the canvas or whatever.
Timothy.
Although off-topic a little your bug doesn’t sound like a bug to me – or at least you’re classing the wrong browser as having a bug. An element will not expand to contain floats within it – this is per the W3C spec. in fact IE is doing it wrong by expanding the parent element to contain the floated child.
A photo tells more than 1000 words.