CategoryDesign

All things relating to design – architecture, graphic, industrial, etc.

Obnoxious Bugs in CSS3 Columns

CSS Columns in Practice

I got pretty excited when I found a promising application for CSS columns in a project I’ve been working on for my wife – she sells Dog Collars and Toys on Etsy, and we’ve been collaborating on creating a site to complement her Etsy shop. I figured that CSS columns would be the perfect way to responsively show the different styles she offers and materials she uses in her collars. Unfortunately, as I played around with actual layouts, I found that the implementation of columns in the various browsers is pretty flawed.

Issues

Thus far, I’ve tested out the same column layout in Chrome 40, Firefox 35, and Safari 8. Each one has its own bugs and quirks. I’m sure Internet Explorer has its own issues, too. In any case, though CanIUse.com shows over 90 percent support for the feature, none of that support is without issues. Sad day.

Chrome’s Bugs

Chrome has a couple apparent bugs in its columns implementation.

Chrome can't figure out height...

First, Chrome fails miserably at correctly calculating the height of elements in columns. Therefore, after ending a column, or after attempting to use column-span: all, an unsightly empty space appears between the end of the columns and the beginning of the next content. Ugh.

Transitions, but only on one side...

Secondly, Chrome can’t seem to render transitions in anything but the first column. Why this is, I’ll never understand. But hey, it’s there, and there’s currently nothing you can do about it.

Firefox’s Bugs

Firefox, on the plus side, only has one real issue. Unfortunately, it’s a pretty big issue if you want to have elements that span multiple columns using column-span. Otherwise, you’ll probably never even notice it. Unfortunately, column-span is something that I wanted to use.

Firefox and no column-span

Safari’s Bugs

Safari, inexplicably, can’t figure out column-span either, but in an entirely different way. Rather than not spanning them at all, it decides to duplicate certain elements both above and below the element that uses column-span. Fun stuff!

Safari's column-span duplication

That’s That

Unfortunately, now I’ve got to seek out some other method of laying out my columns. Maybe I’ll have to revert to using good ‘ole float with all its quirks, and just add in the responsive magic myself. At least its quirks are well-documented. In any case, I’ll figure something out, and perhaps post it here when I figure it all out.

Facebook-Style Annotations

Annotating, or 'tagging' images, similar to Facebook

As part of one of my projects, I’ve been working on creating (or, rather, patching together) an image tagging system. The web application for which I am building it is meant archive some of my family’s genealogical records. It will allow members of my family (both close and distant) to access records and information about our families. This includes photos, documents, and stories. Continue reading

My Portfolio

As you will have noticed, if you actually visit this site, I recently made some changes. If you follow this via a feed reader (such as Google Reader), you wouldn’t have. If that’s the case, I suggest you visit http://russ-taylor.com. There, you’ll see my new, updated portfolio. Continue reading

My Latest Project

I’ve finally come to a conclusion. Some of you know that I have, for a time, wanted to make another blog. One that’s not personal. One that could be of assistance to someone, more than just informing them of how my life is going. In light of that, I will soon be launching another blog. And I’m dang excited about it.

Web Application Development

I’m going to write this new blog about my efforts to create a custom web application. I know most of you that read this won’t be super-interested in that, but I realized that it could provide an interesting amount of insight to others who may be interested in similar things.

For the past year or so, I’ve been slowly working on developing a new web-based application for swim teams. You see, I’m a coach for a swim team, and the software that’s out there right now for team and meet management really isn’t so good.

Because I know that there are many people out there interested in developing their own web applications (once again, probably not most of you…) I realized that documenting my experiences may be helpful to others who pursue the same path. At least, I’m hoping they will be.

And so, pending the termination of finals, I will be starting work on the new site.

The New Internet Explorer

ie-8

I don’t know how many of you know about this, but Microsoft recently released a brand new version of Internet Explorer. It’s Internet Explorer 8.

Now, being a nerd, this is of great interest to me. Especially with the fact that I’m a web-designing nerd. And I’ll tell ya why: Internet Explorer 8 (and its predecessor, Internet Explorer 7) embraces long sought-after web standards. Continue reading

Rubik’s Cube… In Style

rubiks

Wow. I mean, I may like Rubik’s cubes, but this one… Wow… I just wanna buy one to keep on my desk for decoration. I could change it up a bit every day just to keep things interesting. Continue reading

The Hana Table

Not more than a few moments ago, I realized that it’s been just over two weeks since my last post. And for that I apologize. Well, I guess it doesn’t really hurt anyone but me.

Anyway, as I realized that, I happened across a stunning table design. And here it is, folks.

hana_150409_01hana_150409_02hana_150409_03Sadly, I can already hear what my mom’s words would be as a result… “It would be impossible to dust!” Well, shoot dang. It’s awfully pretty, even if it would be kinda bothersome to dust it. Plus, it can go completely flat.

Typography

Typography can be a powerful visual tool, and lately I’ve become quite fond of it. Not only can it get messages across quickly and directly, but it can also be used as a form of fine art.

So, in light of that, and the fact that lately I’ve seen some amazing examples of typography, I’m putting up some of these examples.

aca_se_habla_espaniol_by_ejaramillo

While this one certainly isn’t the most creative, it’s pretty funny – especially if you speak Spanish. c5432cea1d74866e4805921504baa8a1

While this one isn’t the most amazing thing, I felt that it had a good message to it. Plus, including the names of the victims makes it all the more meaningful.greenant_promo_card_by_caaffamaninmotivation_by_mrbadgernyc_poster_made_with_letters___by_ad_013r2d2_in_helvetica_by_ad_013

This one is especially cool if you’re a fan of Star Wars, which I happen to be.

3292148155_a202b4efb8_o

Josef Reyes

josef-reyes-1josef-reyes-2A day or so ago, while I was surfing through my list of blogs in Google Reader, I came across these posted on ISO50, a cool site mostly talking about graphic design.

I was very, very impressed with this work, done by the Graphic Designer Josef Reyes. It’s pretty stunning design, overall. I am especially fond of the first one, with the words ‘Shortcut Through Time’ cleverly and skillfully split up between the top and the bottom, as if passing through a portal (or, imagine this, a shortcut through time!).

Mostly, it’s just beautiful.

Creativity vs. Productivity

Regrettably, I don’t remember exactly where it was that I read something about this, but wherever it was, it certainly illustrated an important part of many people’s lives.

Many of us, myself included, need to exercise a certain amount of creativity in the workplace. Whether it be in creating a graphic, drawing something, coming up with a new marketing scheme, or whatever, it is an important part of what we do. Creativity is an essential part of nearly all business pursuits.

But, on the other hand, we must also have points in time where we focus entirely on what we’re doing – when distractions make us lose valuable time.

And these two aspects of work involve completely different approaches. With creativity, we don’t want to disregard or throw out any idea. Distractions, random suggestions, or seemingly ridiculous ideas can prove invaluable. A little flash of inspiration often makes all the difference. Additionally, simply surfing the web looking at random photos or works of art can be one of the most productive parts of the process.

But when we’re doing in-depth study, creating charts, etc, we don’t want to be random. It is important to focus on the task at hand – without distraction.

This really came as a surprise to me, truthfully. It makes complete sense when thought through, but before I simply hadn’t realized it – or its potential impact on my life. But it’s helped me much. Now I’ll be able to be much more productive in my specific pursuits – adjusting my environment and mindset to the task at hand, therefore optimizing my use of time and brainpower (however limited that may be).

© 2019 russt

Theme by Anders NorénUp ↑