Old Archives | Art Of Developing

10 Weird Bugs Of IE & How to Deal With Them

*Note: This is outdated for sure…

Here is a small list with some of the most weird and annoying IE bugs that you may almost every time come across.

As we look back to the older versions of IE, the problems seem to grow in number and although older versions of IE may seem like a part of the past now, there are still people out there trying to fight this big, fat, bullheaded bug called, Internet Explorer 6. So, here it is:

1. The “peekaboo” bug:

How to identify it: When parts of a div disappear and then somehow reappear when you scroll through the page or resizing the browser’s window.
Solution: zoom: 1; Add this property into the specific class or id. This is a property only seen by Internet Explorer without affecting any other browser at all.
Applies To: IE 6 , IE 7.

2. The “border” bug:

How to identify it: When the border is extending under a floated item and overflow property doesn’t seem to do anything about it.
Solution: zoom:1;
Applies To: IE 6.

3. The “layout” bug:

How to identify it: When an absolute positioned item is falling off its place ignoring the left or right properties.
Solution: Set the width property of the containing div to 100% or to a specific width.
Applies To: IE 6.

4. The “guillotine” bug:

How to identify it: When the bottom part of a floated element just disappears. Usually you may have 2 or 3 floated elements into a div.
Solution: Create a div at the end of the parent div with the class “clear” Then in the CSS file apply .clear {clear:both;}. Note that this bug has extremely many ways to appear and thus there is also a large number of ways to solve this. In some cases zoom:1; may do the job or declaring height:1%;.
Applies To: IE 6 , IE 7 .

5. The “double-margin” bug:

How to identify it: When using negative margin values and some extra space is created next to a floated item. It also happens when the margin is at the same direction of the float.
Solution: * HTML {display:inline;}. Create a style with this property into your code. This also applies only to the version 6 of Internet Explorer.
Applies To: IE 6.

6. The “broken box model” bug:

How to identify it: The total size of a div ( width + padding + border) is miscalculated. Actually only the width property is counted by IE.
Solution: Apply the padding into the elements of the block directly.
Applies To: IE 6.

7. The “minimum width and height” bug:

How to identify it: When min-height and min-width properties are ignored.
Solution: Apply: { min-height:150px; height:auto !important; height:150px;} to the specific element.
Applies To: IE 6.

8. The “unknown hover state” bug:

How to identify it: IE 6 doesn’t support the hover pseudoclass.
Solution: Apply Javascript or Jquery code in order to overcome this.
Applies To: IE 6.

9. The “wrong bottom” bug:

How to identify it: When you trying to vertically position an image at the bottom of the browser window but the image is getting stacked under the last paragraph instead.
Solution: html {height: 100%; }.
Applies To: IE 6.

10. The “Internet Explorer 6” bug:

How to identify it: When you set a link to display as block and the clicking is limited only to the text instead of the entire block.
Solution: .yourclass a {zoom:1;} or by setting a specific width for all the a tags.
Applies To: IE 6.

As you may have already understand, the zoom property actually fixes a lot of IE 6 bugs, so in cases that you may find yourself stuck without knowing how to fix an IE bug, just give it a try!

** Note: Personally I have stopped trying to fix things in IE 6. I mean, if you think about it, I already have a great number of bugs to deal with in IE 7 and 8 and maybe a couple in IE 9, so if I’m going to double the size of my HTML and CSS code just to fix things in IE 6 then I prefer not to.

Especially, if you bring HTML 5 into the picture then you have yourself some extra days of work to deal with some very, and I mean VERY, strange things that you couldn’t even know where to start in order to fix them (things can get really messed up). If on the other hand you strongly feel a strange urge to combine HTML 5 and IE 6, please let me know how it went (I mean it, pictures are welcomed too!).

December 9, 2014

Declaration of Internet Freedom

In an attempt to stop censorship in the internet, organizations, companies and ordinary internet users from all over the world are joining their forces today, by creating The Internet Declaration Of Freedom.

The Internet Declaration Of Freedom will prevend five basic principles which are: expression, access, openness, innovation and privacy.

We stand for a free and open Internet.
We support transparent and participatory processes for making Internet policy and the establishment of five basic principles:

Expression: Don’t censor the Internet.
Access: Promote universal access to fast and affordable networks.
Openness: Keep the Internet an open network where everyone is free to connect, communicate, write, read, watch, speak, listen, learn, create and innovate.
Innovation: Protect the freedom to innovate and create without permission. Don’t block new technologies, and don’t punish innovators for their users’ actions.
Privacy: Protect privacy and defend everyone’s ability to control how their data and devices are used.

You can support or participate by signing the participation here.

December 9, 2014

ACTA: The New Agreement That Threatens Internet

After SOPA and PIPA (the two bills that were about to be voted from the American Congress recently), another agreement, known as ACTA (Anti-Counterfeiting Trade Agreement) is about to be signed, this time by countries all over the world.

This international “trade agreement” is negotiated by European Union, U.S, Japan, Canada, South Korea, Australia and other countries with main goal to restrict copyright violations and to create an international legal framework for targeting counterfeit goods and generic medicines. The truth is that if this agreement pass, internet service providers (ISPs) will be the new “internet copyright police”, knowing your every move ,any time, by checking all data going in and out of your personal computer and this is only the beginning…

Several organizations that defend human rights and freedom of speech, have started to mobilize, complaining that the whole discussion of ACTA, is been made without any public consultation and fearing that it will bring stifling conditions, both to freedom of expression online, access to medicines, but also in culture and knowledge. It is important to mention that ACTA has been negotiated in secret for the last 4 years by 39 countries and by people that are not democratically elected representatives.

Among the countries that have already signed this agreement are: U.S., Japan, South Korea, Australia, Morocco, Singapore, New Zealand, France, Poland, Finland, France, Ireland, Italy, Portugal, Greece and Romania, while European countries that didn’t signed it are: UK, Germany, Holland, Cyprus, Estonia and Slovakia.

Signing the agreement does not mean that it has been finalized though. The agreement must pass from a vote in the European Parliament this June. The activist group La Quadrature du Net has released a statement, urging everyone to put pressure on every country’s members of parliament and members of the European parliament to fight ACTA, before it is voted in the European Parliament.

What is ACTA:

[youtube id=”N8Xg_C2YmG0″ width=”100%” height=”400″]

[youtube id=”citzRjwk-sQ” width=”100%” height=”400″]

Although these laws supposed to be about stopping online piracy, the vast majority of people and internet companies (including Google, Mozilla,Wikipedia) are afraid that they will be used in a way that it will place free expression in jeopardy and eventually hurt internet in total.

What SOPA and PIPA will actually do.

PROTECT IP Act (PIPA) : It will force U.S. internet providers to block websites that violate copyright laws while taking legal action (in order to remove the links to those black listed sites) against search engines, directories and any other kind of website including advertising services. Companies will also have the power of suing any website (launched after the specific bill is passed) that is believed that it didn’t take the necessary measures of preventing infringement.

Stop Online Piracy Act (SOPA) : Companies will have the power to create their own black list of websites they feel are violating their copyright policies. Payment processors will also have the power to block those same sites if they can provide a reason of why they believe that those sites are violating copyrights. The U.S. Attorney General will be able to force search engines, DNS providers, servers and payment processors from having any contact with websites that seem to violate copyrights.

In a sentence, these two bills will give greater power to law enforcement to filter the internet, while making sure that there will be no possible way to get around them. This actually means that personal blogs, Facebook, Youtube and Twitter accounts along with many other websites and services, are in danger of getting blacklisted or blocked. The truth is that the entire web will be censored.

Of course, the above bills will not only influence U.S. but the entire world. Additionally, it is almost certain that piracy will not be able to dealt with, despite all these hard measures.

Wikipedia, WordPress, Reddit, Mozilla and Google are some of the major companies that took a clear stance against these bills and participated in the strike by “blacking out” their pages. Google, more specifically, blacked out its logo and created a page with the title:

..these bills would censor the Internet and slow economic growth in the U.S.

encouraging all people to sign a petition urging Congress to vote NO on PIPA and SOPA. (Google also stated that SOPA protests will not cause problems with Googlebot which will crawl at much lower rate for this specific day.)

Although Facebook was not closed down, Mark Zuckerberg stated:

The internet is the most powerful tool we have for creating a more open and connected world. We can’t let poorly thought out laws get in the way of the internet’s development. Facebook opposes SOPA and PIPA, and we will continue to oppose any laws that will hurt the internet.

…
Let us hope that with everyone’s help, these bills will be rejected and Ιnternet will eventually come out unscathed from this test.
More information about ACTA :

http://en.wikipedia.org/wiki/Anti-Counterfeiting_Trade_Agreement
http://www.stopacta.info/

December 9, 2014

Humans.txt – A File For Websites Made By Humans…

Sometimes people forget that websites are not something that just appears out of nowhere, nor are created automatically by some kind of robots…. There’s a lot of work that needs to be done every time and a number of people behind it that should take the credit for all this work.

This is why humans.txt was created! The idea came from a Spanish group of web developers: Juanjo Bernabeu, Maria Macias, Carlos Mańas,Abel Cabans and Abel Sutilo. These are the same people who decided to create the humanstxt.org website, in order to further promote the whole idea, the motto of which is “We Are People, Not Machines”.

What Is Humans.txt.

Like robots.txt, humans.txt is a simple text file, placed in the root folder of a website, that provides information about the site and the people that created it. The main difference from the robots.txt is that, humans.txt is designed exclusively for humans in contrast with the former which is meant to be used only by search-bots.

Why Use It?

Freelancers that are temporarily hired by companies in order to create a website, often have great difficulties in establishing their authorship. There are times when companies don’t want the names of those people, for whatever reason, to appear in the same website that THEY created (and this is not ethically right, at the very least…).

Even when you are the owner of a small company, consisting of 2 or 3 persons, why not to be able to present some information about each of those people separately? You could introduce the developer/s, the designer/s, SEO expert/s, or even those people that may had contributed with their ideas or played a particular role in the completion of a project (after all, they deserve to be thanked too!).

Finally, you could consider this as a way to give a more personal or more “human” dimension to your websites (your own and those made for others). Even big companies, such as Google, have their own humans.txt file!

How To Use It.

It is a very easy process really. Just open your notepad and write about your website, the people that are behind it or give thanks to all those people that contributed. You can do this in whatever way you like (after all, this is only simple text we are talking about, not some kind of code) and upload it to the root folder of your site.

In order for humans.txt to become a standard though, there are some guidelines that it would be good to be followed. Abel Cabans has created a great example for the humanstxt website:

/* TEAM */ Your title: Your name. Site: email, link to a contact form, etc. Twitter: your Twitter username. Location: City, Country. ... /* THANKS */ Name: name or url ... /* SITE */ Last update: YYYY/MM/DD Standards: HTML5, CSS3,.. Components: Modernizr, jQuery, etc. Software: Software used for the development

The last thing you need to do, is to include this link into the <head> tag of the site:

<link rel="author" href="humans.txt" />

More Information.

To learn more about humans.txt, visit http://humanstxt.org/.
or you could download the Mozilla add-on: https://addons.mozilla.org/firefox/addon/humans-txt/

December 9, 2014