Ajax.InPlaceSelect Updated

I recently updated Ajax.InPlaceSelect to include support for multi choice selects. By default the inputed separator is a BR and the selected value posted will be separated by a comma (,). This might not be the best solution but for now this is the only solution I’ve made.

Head on over to the project place to download and try out the new version

Posted in CSS/HTML | No Comments

MySQLHandler 2.1

A new version of MySQLHandler has been released. No major changes only improvments to the code has been made. Head on to the project page for download and information.

Updates

  • Version 2.1
    • Now uses DOM for creating an XML result.
    • ExceptionHandler is now static

Layout Rulers Bookmarklet

Inspired by Andy Budd’s Layout Grid Bookmarklet I decided to make my own version of it. Instead of a grid that can bloat the screen unreadable I wanted the same nifty rulers that Adobe Photoshop gives me by pressing Ctrl+R.
This bookmarklet will add some padding to the design when activated and then restore the original padding when deactivated. You can try out the Layout Rulers (Note that you have to refresh the page in order to remove the ruler set since you cannot click the link on the page to deactivate it) or download the ruler image and javascript source below.

Note that this only works in Firefox

Download

http://www.subzane.com;/wp-content/uploads/2007/06/layoutrulers.js;Layout Rulers Script;

http://www.subzane.com;/wp-content/uploads/2007/06/layoutgrid-ps.gif;Layout Rulers Image;

Posted in CSS/HTML | No Comments

ImageRedirection.class.php 0.9

New version of ImageRedirection.class.php available.

Changes

  • Now uses CURL instead of file_get_contents thanks to Patrick Havens.
  • Improved and restructured alot of functions.
Posted in CSS/HTML | No Comments

Weird top-margin behaviour

A few days ago I stumbled upon what I thought was a css bug in Firefox, but after testing the case with Opera and still getting the same "bugged" result I started to wonder if it was the browser that was bugged or just my way of looking at it. Could it be that for once IE6 and IE7 was correctly rendering my page whilst Firefox and Opera was being bad? Also, the "bug" seemed to fix itself if I used borders on the affected divs, weird uh?

The case

My layout consisted of basicly 3 divs. One at the top and a container div holding another div positioned 10px from the top of the container div. Just like below.
ff-margin-bug1.gif
Here in the example source I only use simple divs without anything else than different background colors.

CSS:
  1. div#top {
  2.   height: 20px;
  3.   width: 300px;
  4.   background: #0076a3;
  5. }
  6.  
  7. div#content {
  8.   height: 200px;
  9.   width: 300px;
  10.   background: #f8941d;
  11. }
  12.  
  13. div#banner {
  14.   margin-left: auto;
  15.   margin-right: auto;
  16.   height: 20px;
  17.   width: 274px;
  18.   background: #00a651;
  19.   margin-top: 10px;
  20. }

HTML:
  1. <div id="top"></div>
  2. <div id="content">
  3.   <div id="banner"></div>
  4. </div>

The problem

When lookin at the page in IE6 or IE7 everything looks just fine, however in Opera and Firefox you'll get this result:
ff-margin-bug2.gif
It seems that the inner div adds top-margin to it's parent instead of applying it to itself, why this happens I have no idea.

The first solution

One solution I found was that if I apply borders on the affected divs I get Opera and Firefox to render the page correctly. Why borders would change how margins are interpreted I have no idea. Anyway this isn't a solution to stick with since we don't want any borders, if used with background images it will ruin the design.

The final solution

After playing around some more I realized that if I instead of using margin on the div I wished to position I could ofcourse use padding on it's parent for the same result. And ta-da it works in all four browsers! However since I'm a Windows user I have no idea how any of this behaves in Safari, but I will update the post after I check using some online screenshot provider.

CSS:
  1. div#top {
  2.   height: 20px;
  3.   width: 300px;
  4.   background: #0076a3;
  5. }
  6.  
  7. div#content {
  8.   height: 200px;
  9.   width: 300px;
  10.   padding-top: 10px;
  11.   background: #f8941d;
  12. }
  13.  
  14. div#banner {
  15.   margin-left: auto;
  16.   margin-right: auto;
  17.   height: 20px;
  18.   width: 274px;
  19.   background: #00a651;
  20. }

If you have any opinions/facts about this being a bug or not and solutions feel free to post comments. You can view my test page with source and all 3 examples here