Nov. 14th, 2013

vla22: photo of Atli's throne, Torcello, Venice (Default)
 Wherever my tech skills lie, it's not really with CSS. I understand the basic principles, but I can mostly produce utilitarian things in CSS, rather than beautiful ones. And mostly, I'm not that interested in trying. Nevertheless, I've had to do a fair bit of debugging over the last couple of weeks, and thought I'd share what I've picked up, in case people find it interesting. 

Note that this isn't about creating your Beautiful Style in CSS - it's about discovering that in fact the webpage with CSS carefully crafted by someone else looks great in Chrome but looks like someone has vomited on the page in IE8. Or all the boxes are overlapping, so you can't input anything into any form fields. And you're the only person available to fix it.

This is naturally trivial in Firefox or Chrome (and even reasonably plausible in IE10) - you can use the developer tools to dynamically edit the CSS and see what happens when you move it from pixels into ems,* or increase or decrease the padding.  You can also search for problems with particular elements in particular browsers, and try out the answers. 

In older browsers, you basically have to edit the CSS file and reload and retry. I think the important virtue here was persistence - I kept trying different things, and kept searching for different suggestions about what to fix. Some things responded quickly to this - 10-15 minutes to fix the problem. Others have stretched out over a few days. 

I still don't know how to craft a beautiful CSS thing from scratch, but I'm reasonably confident I can fix some common layout problems. Not necessarily to the standard the designer would like, but so that the web page is at least functional, even if it's not pretty.


*This turns out to be quite a neat trick that will solve a lot of your CSS troubles.

Profile

vla22: photo of Atli's throne, Torcello, Venice (Default)
Verity Allan

December 2014

S M T W T F S
 123456
78910111213
14151617181920
21222324252627
28293031   

Most Popular Tags

Page Summary

Style Credit

Expand Cut Tags

No cut tags
Page generated Jul. 25th, 2017 04:33 am
Powered by Dreamwidth Studios