Archive for the ‘HTML’ Category
Using table in HTML and font size issue with IE
March 27th, 2010
I don’t really understand why people don’t like to use table these days. I’m not a wise HTML guru or something but as far I understand table is a pretty little thing with some handy features, which does my work without much trouble. At least as long as you don’t have a very complex layout where it needs the use of several colspan and rowspans, table is really handy. I don’t have to bother about floats, breaking in browsers etc.
But there is a issue with the font size I faced in IE and Safari. If I define a font size in the parent element it doesn’t effect the content of the table. That was really confusing for me.
So, whenever using a table, it needs to define the font size for the table explicitely.
table{ font-size: 12px; }
Posted in 
Tags: 
IE8 Issue with CSS margin:0 auto
March 26th, 2010
It is a common practice to use the CSS style – margin:0 auto to make a content centered. This very simple effect gave me a really hard time for last couple of days. This works pretty fine on FF-3.x, Opera-9.x, Safari-3.x, IE-6(!) and IE-7. But when I load it with IE-8, the element is left aligned, not centered!!! I was just thundered and had not idea what to do.
So what was happening?! Is it another bug of IE-8 to make us hate it more?! Not exactly. After finding out what was happening, I think that was pretty much my fault and I can forgive IE for this one time. 
Enough bullshit, let’s come to the point. There are three possible solutions for this problem.
First one:
Make sure that the page header has this: <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Transitional//EN” “http://www.w3.org/TR/html4/strict.dtd”> Read the rest of this entry »
Get image data from client side using javascript
December 16th, 2009
Well, I had a requirement to show a preview of image, whenever client selects an image inside a form. First I thought it was just a easy task… But it really took about one hour of me to figure the way out…
As it was an input element with type=file, I simply tried to get the value and push it to an image element’s source attribute attaching ‘file://’ at the beginning. But life’s not that easy! The value only returns the file name not the full path. How can I get the full path??!! I can see the path on the input box, but I can’t get it!!!
Next approach, go to our best friend, Google! Well, I guess she wasn’t very pleased with me and didn’t help me very much…
Now what?! Well, let’s try the DOM inspector of Firefox. There I found three functions for the file input element.
- getAsBinary()
- getAsDataURL()
- getAsText()
They are all self explanatory… My head was already stuck at that moment. So I didn’t see the ‘Data URL’ function first. Tried to parse binary for a while. But couldn’t find a way to push the binary data of an image inside the image tag. Then I noticed the next function. Well, it worked like a charm. I just pushed the function’s return value to the image tag’s source attribute. Done.
So, to get the file path, the call should be like:
file_input_element_id.files[0].getAsDataURL()
That’s all…
N.B. For IE, it works OK with adding the ‘file://’ before the value of input element. You just need to have proper permission level.
