Written By: EMG
Posted On: Aug 22, 2010
Filed Under: In the Studio, On the Web Design Front, On the Web Development Front, On the WordPress Front
I’ve been working on a fully fluid-width, XHTML Strict, table-less, three column child theme for WordPress’ Twenty Ten default theme…
And in the process, discovered a bottom margin bug!
I submitted the bug to a Trac ticket HERE and also documented the fix that would squash the bug flat and make Twenty Ten render the way it was supposed to which I will share here in my blog.
The Bug (in short):
The margin-bottom: 20px that is applied to the footer div triggers a well known CSS bug causing the 20px margin to be applied to the adjoining/bottom margin-touching wrapper div instead of the footer div.
That bottom margin you see at the bottom of the page where the end of the content wrapper should be touching the bottom of the screen?
That’s the bug.
The Fix (in short):
To correctly apply the 20px margin-bottom to the footer div and not accidentally to the wrapper div, the wrapper div needs to be given a 1px padding-bottom and the footer div needs to be given a 19px margin-bottom.
The padding applied to the wrapper where it touches the bottom of the footer container will trigger the margin-bottom to be rendered correctly for the footer and not the wrapper as the padding will add some ’separation’ between the two containers.
Another fix is to add a 1px border to the bottom of the wrapper and leave the 20px margin-bottom on the footer.
The border adds ‘content’ to the bottom of the wrapper which triggers the margin-bottom for the footer to be rendered correctly.
Why the Bug Happens:
Read the rest of this page »
Written By: EMG
Posted On: Jul 17, 2009
Filed Under: In My Mind, In the Studio, On the Web Design Front, On the WordPress Front
In some ways, Emotiomental Graffiti doesn’t look like much.
To be sure, it really isn’t all that complicated of a website compared to a lot of larger, more media-heavy, and more complex sites.
Running off of the (absolutely kick ASS) WordPress application (version 2.8), Emotiomental Graffiti is, for the most part, a smorgasbord of valid XHTML Strict coding (my work), WP-specific PHP hooks (their work; I just hitched it all together), and a crapload of CSS (my work).
Read the rest of this page »
Written By: EMG
Posted On: May 11, 2009
Filed Under: On the Web Design Front
Clean uncluttered coding.
If there ever was a controversial statement in the front end web development community, that one right there would make it to the top 10 list along with statements like ‘Code for IE6′ and ‘Structure versus Style’ and ‘Fixed versus Fluid’ and ‘Hacks versus Workarounds’.
For the most part, I completely agree that coding should be as clean and as uncluttered as possible with the minimal number of nested divs used possible.
Not only does clean and uncluttered coding allow for greater ease of troubleshooting (less code to wade through), but especially in the case of CSS, it also pares down the potentials for cross-code conflicts that tend to pop up because of the cascading nature of CSS.
CSS == Cascading Style Sheets, so no wonder, right?
However, ‘clean and uncluttered’ is not always possible to do.
Why?
Read the rest of this page »
