Tomer Gabel's annoying spot on the 'net RSS 2.0
# Wednesday, June 1, 2005
I've updated the blog's design to something a little more to my taste. I hope you like it, and would very much welcome comments!

I've been mucking about for a few hours with dasBlog themes, CSS2 and relevant technologies and learned a great deal. CSS2 is so damn cool! Back in the day - what, four years ago? - I used to have a bunch of perl scripts to do the style/content seperation for me utilizing a bunch of macros. Nowadays it's not only a great deal easier to seperate the content, CSS2 also helpes you avoid a lot of HTML hacking and HTML bloat: no more hacking tables where design elements go. It kicks ass!

That said, there are a few things that are nontrivial with CSS2. For example, check out the blog title; notice how the horizontal line stops next to the text. The border itself is easy enough (see next section though), but it took me a little while to figure out how to make it 'stop'. Eventually I settled for the following hack:

  1. A <div> section acts a container for the entire blog title and contains two additional <div> sections
  2. Both sections have the exact same content. The first section maintains the appropriate flow and layout for the page but is not itself visible (it has style="visibility: hidden")
  3. The second section floats over the entire container (style="float: left")
  4. This is where it gets interesting. The lower part of the second section must cover the lower border of the container; originally I did this with a <br&rt; tag, but as I suspected this proved problematic when the client text size was changed. Eventually I settled for an additional padding-bottom: 2px; style for the second section, which solved the issue nicely.
  5. Finally we want the horizontal border to stop before it hits the text; the solution couldn't be simpler: just add padding-right: npx (in my case I used 5) and you're good to go.

Next stage is to find out how to gradient the border when it gets close to the cell. Also, the whole thing might've been easier with a table and a couple of columns, but not nearly as fun :-)

Finally, I have to rant: Microsoft IE programmers are a bunch of shitcocks. Even in standard-compliant mode (why in the hell do I have to, as an author, worry about IE modes anyway? Why isn't it standards-compliant to begin with?) the damn thing just doesn't process CSS properly. In my case it turns out that dotted borders simply do not work in Internet Explorer (except for Mac IE version 5.5 or something bizarre of the sort); if you're reading this post using Internet Explorer you're probably seeing a solid border around the post itself. This is NOT the correct behavior. IE displays dashed borders instead of dotted ones; this looked aweful, so I used a couple of hacks to get IE to display solid borders instead. And this is just one of myriad bugs. I wonder if they'll get fixed in IE7, but would advocate a move to Firefox regardless.

Wednesday, June 1, 2005 5:16:25 PM (Jerusalem Standard Time, UTC+02:00)  #    -
Send mail to the author(s) Be afraid.
<April 2024>
All Content © 2024, Tomer Gabel
Based on the Business theme for dasBlog created by Christoph De Baene (delarou)