nano RAILS: development, testing and hosting tidbits

Ruby on Rails in practice

CSS hacks for IE7

Posted on Fri Apr 28 15:30:00 UTC 2006

Nano See, Nano Doo has a few interesting hacks for IE7 that apply to IE7 only. The major one centers around the * html quirk that has been fixed, and it offers an alternative.

That is, if you have to use a hack. I personally prefer to put my IE specific bits in a separate css with a conditional include from the html. But sometimes, it is just easier not to have to bother with the extra machinery.

Via cssBeauty

Plus, I really like the name “nanobox” ;)

Posted in html/css  |  Tags  |  0 comments

Working around IE selection bug

Posted on Tue Apr 04 16:56:00 UTC 2006

The most common source of that problem, according to few searches on google seem to point to using absolute positioning. This was not an explanation that I found too satisfying, first because I was not about to change my layout, and second because most of the references were at least 3 years old.

So I kept digging, and came accross an other solution from Tom Muck in Fix for IE selection bug. Unfortunately, this did not apply for me.

And finally, I found the most conspicuous post on the drupal site where if you don’t use the form

<link .../>

instead of

<link ...></link>

this will be enough to break internet explorer. Who would have thought! Well, maybe by now I should now better.

And the worst part of that? Well it was the second time in 2 months I needed that, and for the life of me, I could not remember what I had done the first time around. So unless this server crashes too, I’ll know where to find the solution next time.

Posted in html/css  |  Tags  |  0 comments

footerStickAlt revisited

Posted on Sat Mar 11 07:06:00 UTC 2006

Here’s the html used here

<html>
<body>
  <div id="wrapper">
    <div id="blog-header">
    </div>
    <div id="main-wrapper">
      <div id="sidebar">      
      </div>
      <div id="main-content">
      </div>
    </div>
    <div id="main-bottom-space">&nbsp</div>
  </div>
  <div id="footer">
  </div>
</body>
</html>

and the css used here:

body {
/* force footer to stick at bottom */
height: 100%;
}

/* avoid trampling on the footer by reserving some space (IE) */
#main-bottom-space {
height: 26px;
clear: both;
}

#wrapper {
position: relative;
/* force footer to stick at bottom */
height: 100%;
}

#main-wrapper {
position: relative;
}

#main-content {
float: left;
}

#sidebar {
float: right;
}

#footer {
clear: both;
/* stick at bottom */
height: 26px;
position: relative;
margin-top: -26px;
}

The key difference is to add the #main-bottom-space <div> element.

Posted in html/css, Quid Pro Quo  |  Tags  |  12 comments

Template update

Posted on Fri Mar 10 16:55:00 UTC 2006

Using the most excellent footerStickAlt technique from The Man in Blue, I’ve modified the template to “stick” the footer at the bottom. Becomes less disctracting I think.

Posted in html/css  |  Tags  |  0 comments

Forcing the right scrollbar to appear on your web page

Posted on Fri Mar 10 16:34:00 UTC 2006

One common problem when using a centered layout is that when a page is short, the browser does not display a scrollbar, and when your page is taller than a screen, the browser adds a scrollbar. That’s all nice except that your painfully designed content jumps around to accomodate the scrollbar. The solution I have used is to force the scrollbar to appear all the time.

By no mean am I taking credit for this trick. I’ve modified Richard White’s template to incorporate it.

Just include this in your CSS, and voila!

/* force right scrollbar */
html { 
    height: 100%;
    margin-bottom: 1px;
}

this will force a vertical scrollbar to appear on the right side.

Posted in html/css  |  Tags  |  23 comments

New template

Posted on Sat Mar 04 14:58:00 UTC 2006

Thank you Richard White for your beautiful template. In case you are interested, you can get it on Richard’s site: {height: 1%;}

Posted in html/css, News  |  Tags  |  2 comments