CSS positioning of element within an element

This drove me nuts for one day.  I was trying to overlay tables on each other, and appearing only when it’s relevant tab was clicked.  So the problem was with positioning.  The border encasing the table was mis-aligned against the list of tabs, and the table was extending beyond the border lines.

Just when I stumbled on this tutorial on the web, wife was “advising” me to take a break from work and sleep on time.

Well, after going through the tutorial this morning, I am glad to say that it worked!  You have to use “positioning: relative”, “positioning: absolute”, “clear: both” for the respective elements.  Go through the tutorial and you’ll see the light.

Thank you BarelyFitz!

DHTML Calendar and ModalBox

If you have been trying to do a calendar pop-up within a form encapsulated around a modal box, then you are likely to encounter this problem where by the calendar doesn’t pop up.

Before we go any further, the software I’m using are:

• DTML Calendar – http://www.dynarch.com/projects/calendar/
• ModalBox – http://okonet.ru/projects/modalbox/

The reason why it doesn’t pop-up, or rather it actually does, is that if you observe the modal box carefully, there are actually 2 layers.  The bottom smoked-out layer is the parent document.  When the modal box appears, that element’s z-index (set at 10000 by ModalBox) is brought up higher than the parent document, hence layered above the parent document.  When you click on the calendar link, it’s z-index is equal to the parent document’s, hence below the modal box.  Which means, the modal box is covering it, so you couldn’t see the calendar, even though it’s there.

If you set the calendar’s z-index to be equal to the modal box, the other problem will be its position.  The modal box’s position is set to “fixed”, so when you scroll the page, the form encapsulated by the modal box doesn’t move, but the calendar and the parent document moves with the scrolling.  Therefore, IF your link which opens the form-in-modal box is at the bottom of a long page, your calendar pop-up can be at the top of the page, which means you won’t be seeing it too.

Therefore, in order to have a calendar pop-up in the form-in-modal box, your calendar’s css style needs to set the position to “fixed, and the z-index to “10000”.  This will require you to change the codes in DHTML calendar.

I am currently trying to get in touch with Mihai Bazon.  Hopefully I can contribute my modifications to his product, so that everyone else can use it too.

Firebug – You got my cool vote!

If you are into web development, and have not used Firebug yet, then you should install it and see how cool it is!

I was just introduced to it by a friend today, and after trying it out, I can’t imagine going back to web page development without it.

Firebug is a Firefox add-on as a development tool that “can edit, debug, monitor CSS, HTML, and Javascript live in any web page.”  I felt that it was also a good educational tool if you are struggling around with CSS, HTML and Javascript.

With the enabling of Firebug, it opens up a window at the bottom of your Firefox browser.  It shows the HTML code in expandable/retractable form within its frame.  You can click on elements and it highlight the section of the web page related to the element.  The right side Firebug frame will show the CSS code that is affecting the looks of the element.  By changing the CSS values, you can see the changes affecting the element in real time.  So it’s dandy that you don’t have to re-deploy your CSS and HTML codes over and over again just to see what the changes are like.

It also has a network module that shows you the size of data and time taken for downloading each file.  So if you have a problem with page load speed, you can analyse which file is too fat and what can be done to put your application on diet.

Here are some of the preview screenshots that I’m linking from Firebug’s web page:

Download Firebug here: [https://addons.mozilla.org/firefox/1843/]

If you do a lot of web page layout designing, or just dipping your fingers in it once in a while, Firebug is a cool helper.  Thanks Joe Hewitt!