IE stylesheet CSS absolute position problem solved

There are certain times that you need to have a html element to have an absolute position.  IE does not display the element as intended as seen in all major browsers.

The div element displays the content in the middle of the container.  In IE you need to define the top and left as 0px.

Sample (I wanted the image to be displayed inside the div element):

.bannercontainer {
position:relative;
display:table;
width:340px;
height:340px;

}
.banner {
display:table-cell;
position:relative;
width:340px;
height:340px;

}
.banner a{
display:block;
position:absolute;
left:0px;
top:0px;

}

<div class="bannercontainer">
          <div class="banner">
            <a href="#"><img src="images/grillers.jpg" alt="Meat Grillers" width="340" height="340" border="0"></a>
            <a href="#"><img src="images/GRANDE_MEAL.jpg" alt="Amigo Grande Meal" width="340" height="340" border="0"></a>
            </div>
</div>

This sample displays the element correctly since the container has been specified at the correct width and height.  Otherwise, the content would be placed outside.

Which is better? Notepad++ or Sublime text?

I have been searching lately for a better code editing application.  Some use sublime, some use notepad++ for website development.  I came across different websites saying Notepad++ is better, some say sublime text is better.

Here is one that is clear and objective comparison of both: http://text-editors.findthebest.com/compare/9-45/Notepad-vs-Sublime-Text

What it comes down to, is for what specific task will you be using the editor towards?  Some argue Notepad++ can compile on the editor itself.  Others argue, Sublime text can be used on different OS, such as Mac, Linux, Windows.

Both are almost identical, and can be customize to your specific layout.  But as far as latest language updates for the web, I noticed that sublime text supports the new syntax in CSS3.  I have been using Notepad++ occasionally, and when using intelli-sense, Sublime text offer much updated language file.

There is nothing wrong with Notepad++, if it can serve your specific project needs, then stick with it.  It is a stable build and free.  Sublime text on the other hand is not free and expensive for an editor.  It cost $70, and free update on current version only.  If there is a new version, the license you purchased is only good up to the point of latest update of version bought.

Note: out of the box, Sublime text already has intelli-sense working.  While Notepad++ you will need to allow autocomplete thru this steps: Settings>Preference>Auto-Completion tick on the checkbox to enable auto-complete on each input.

Very good site to know the mobile screen size or viewport width

I was confident the project we are doing will will render fine on the mobile browsers of any devices.  Then when we are testing in on my Galaxy S3, I notice the condition my Jr. developer made for the CSS was not correctly triggered and I was not satisfied on the way the page was shown.

I asked, what was the problem, and according to my jr. developer: There was no way of knowing the size since every time a browser zooms, the pixel width in the viewport changes.  Which was true, when we tested it on our desktops and also on Opera mobile browser emulator.

While searching for a solution online, I stumbled upon this page:  http://i-skool.co.uk/mobile-development/web-design-for-mobiles-and-tablets-viewport-sizes/ where a list of most mobile devices and their viewport are listed.  This is very helpful in determining the smallest width you have to look for on a device.

I gave them a solution to place a width on the smallest screen possible at the viewport meta and this fixed the problem.  But being a stubborn subordinate; my jr. developer retained the current settings and just change the CSS.  Adding another pixel condition to render properly on my device.

When I asked, why do it like that, the reason according to my jr. developer was that setting a specific size will not render correctly on iPhone.  Since none of us owns an iPhone, we have to rely on the web on this findings.  According to my jr. developer the mobile website will now render correctly on the 240 pixel viewport screen, that is good enough for me.