Tips in designing cross browser html coding

Always add  <!DOCTYPE html> (this is the doc type for html-5) as the first statement in your html file so that browsers do not fall back to primary versions of html. Especially in IE if you dont add the doc type statement “div” alignments will not work as it evaluates and treats your html code as IE5 (quircks) mode which is a very old version.

 When defining “font-family” in your css don’t use generic family types like “serif”, “monospace”. This causes problems and gives different look and feel which is ugly. Especially in IE. Use only specific font families like “Times New Roman” as font families. 

 These two things did a great difference in my design especially when IE is considered.

Creating an Arrow And Circle Just With Html And CSS

Just with CSS we can create arrow marks. The following is the html code.

Code:-

<div style="width:0px;height: 0px;border-left: 15px solid transparent;border-right: 15px solid transparent;display: inline-block;zoom: 1;margin-left: 10px;float: left;border-bottom: 15px solid #999999;"></div>

The following is how it appears in the browser:-

The following is the code for creating a circle:-

<div style="float:left;width:50px;height:50px;">

<a style="background: #8f58a4;border-radius: 50%;cursor: pointer;display: inline-block;height: 100%;margin: 0;width: 100%;"></a>

</div>
Appearance in browser:-

Color Code For Transparency

Sometimes we need the background to be transparent and to do that we need color code for making it transparent.

The color code for transparency is  : #EDEDED

This might work only for images with extension “.png”.

Bringing Html Elements Into Single Line

Sometimes HTML elements even though we have not applied breaks they move into separate lines so if we have to bring them into a single line the following is the code:-

The following brings 3 div's into a single line:-

<div>
<div style="display:inline-block"> happy home</div>
<div style="display:inline-block"> singapoore</div>
<div style="display:inline-block"> India </div>
</div>

Output of the above code:-

happy home 

singapoore 

India

Placing DIV's side by side without effecting the container DIV's height

I find the following as the best solution for such requirement.

<div style="border:2px solid red; overflow: hidden;">

       <div style="width:100px;height:100px;border:2px solid yellow;float:left;"></div>

       <div style="width:100px;height:150px;border:2px solid black;float:left">   </div>

       <div style="width:100px;height:100px;border:2px solid black;float:left">   </div>

 </div>

Actually "float" property when applied to child it erases the parent default properties. When "overflow:hidden" is placed in the parent element the default behavior will be restored.