article-stack

You would have seen many websites showing text with stylish fonts, even if those fonts are not available on client site.
It’s very simple. Just copy paste a CSS code somewhere in HEAD tag.

If you are aware with my new font amty currency then you can do it in next 2 steps very easily.

1. You need fonts(various format) to keep on your web server. You can download them from the download link given in the end of this article.
2. Use the following CSS code in your CSS file or on your webpage

@font-face {
	font-family: 'Conv_AmtyCurrency';
	src: url('fonts/AmtyCurrency.eot');
	src: local('?'),
	url('fonts/AmtyCurrency.woff') format('woff'),
	url('fonts/AmtyCurrency.ttf') format('truetype'),
	url('fonts/AmtyCurrency.svg') format('svg');
	font-weight: normal;
	font-style: normal;
}

Sample Demo & required files

This area is protected to registered users only.

Ms Swati constructed a static website for their customer. She received hundreds of complaints within 1 hour of launching. All the complaints were related to mess-up design. She was the victim of compatibility issue of java script & CSS across many browsers and screen resolution.

I seen many people use java script & css to display rounded corner box. Or they make their web pages heavy using PNG images. PNG images again require PNG fix for some browsers. And these fixes are not 100% fool proof. These fixes again increase overall size of web page.

Better solution is to use GIF images instead of PNG. Because their transparency is preserved across browsers. Or you can go for 2 color images for rounded corners. See the sample in side.

You can make images for corners using any image editor. Otherwise use online service for the same.

This online script let you generate any color images matching to your page background along with CSS code. So you can make any rounded corner box within some minutes.

I found that even twitter doesn’t use this fix and their background imposition on low resolution. see Twitter custom background on low resolution.

CSS ie used by twitter

body {
  background: #005687 url('http://a1.twimg.com/profile_background_images/79291092/twitter-theme-2.jpg') fixed no-repeat;

}

I tried auto margin and center attribute of background property, separately and together. But it hadn’t got it fixed. I also played with width and height properties. But nothing worked for me.

  container{height:100%;text-align:center;background: url(images/header.jpg) no-repeat center; height:634px; margin:0 auto;}

Now I set top attribute as follows and it got fixed.

container{background: url(images/header.jpg) no-repeat top ;}

If you are facing more display errors then refer CSS compatibility charts to know what properties or attributes you should avoid to use.

I hope this tip would be useful to big background sites.

Have you ever changed background image of your twitter background? You can do it from its setting page.

Now see what problem may arise when someone looks your twitter profile on low resolution screen. I found it while designing theme for my site.

If you are building a site with big background don’t forget to read fix for web page background position.

I never suggest using PNG images since they are bigger in size and not compatible with many browsers. Although you can fix their appearance so their transparency can persist. But sometimes they are needful for web designers. So here I am mentioning some PNG fixes as per my experience.

These fixes may fix transparency of a PNG image. But you would have to test it with various version of internet browsers like IE 5,6,7 etc, various internet browsers like chrome, Firefox, epic, IE etc. And on various platform like Mac , Windows, Linux, Mobile OS.

Testing a page against so many browsers is really a tough job. Specially when you asked to test it on various platforms. You can use one click solution for this. It’ll not only save your time but money as well.

If you are wrodpress blogger then HITS- IE6 PNGFix might help you to fix PNG transparency in IE6. You may try it to other browsers as well. But author claims to fix in IE6 only.

twinhelix PNG fix claims to fix transparency problem of any PNG file as well as ALPHA problem. It supports all the images inserted on the HTML page using < img > or background images. Click on the image to visit their demo page and how to use guide. I am not sure this fix is compatible with CSS3. But I had tested it against EPIC and firefox. And found it effective.
You can download this fix directly from twinhelix.

Please report me if you find any link broken.

PNG transparency is not only the problem for web designers. There are some more problems related to margin, floats etc. These problems always make me worry. But I have cure for margin Fix and floating fix. Please let me know if you are facing any other CSS related issue. Moreover, CSS compatibility charts can help you giving an idea about what part or browser you are missing from testing your webpage. I would like to find out more effective solutions as well as improving my knowledge.

If you already had read article over margin fix and float fix then you must be interested to test your website on various browsers, their versions and various platforms.
It is not easy to install all browsers on your local machine. Nor you can arrange many platforms. It’ll not only be expensive but time consuming. If you your website on one browser it must take 1 min on average.
Well!! I have a solution. Use browsershots. Browsershots lets you test any website online in few seconds.

It generates screen shot from various browsers on various platforms. You can select your desire platform, browser or their version.

Once your request is processed, you can see thumbnail for all results. Click on any thumbnail to see full image and detail.

Problems

1. You cannot test a site which is not published since you need to give URL of a site.
2. You might stick in queue. If there are many requests for a browser then it’ll put you in queue. You will have to revisit the site for screenshots. You need not to search again. Just use the URL looks like http://browsershots.org/http://article-stack.com/

Once you analyze generated screen shots, you might need CSS compatibility charts to identify the problem, if any and to fix them.

Have you ever faced problem related to your website appearance?

I went through this fix when my sister developed a site for a client. That site was coming properly in IE7 and Firefox. But it is messed up in IE 5.5, 6.
Floats & margins ever create appearance problem in IE. Luckily IE 7 is free from this till some extension.
Review the below code and its display in IE6 and in firefox, IE 7 and Epic. You’ll find that IE double the margin.

.floatbox {
  float: left;
  width: 150px;
  height: 150px;
  margin: 5px 0 5px 100px;
  display: inline;
  }

In IE6

In Firefox & IE7

Solution

Possible solution for the same is either you use padding instead of margin. But it is not possible all time. Another solution is to use padding and margin with some mathematics calculation such as left margin & right margin adjust both.
To read more about it and to fix it read The IE5/6 Doubled Float-Margin Bug. To understand concepts of floats read fix for floating div. You might need CSS compatibility charts to understand computability issues with other browsers.

I compiled above screen shot using some online tools since I was not having IE6 installed on my machine.

Are you a web designer? You must need to know compatibility of current CSS version, you are using, with various internet browser. While designing theme for this site I found many CSS compatibility charts. Click below attached images to view charts on other sites.
Although I rarely prefer any document while working but they are really helpful when you stuck. Also read fix for floating div .
New growing web designers never forget to search CSS cheat sheets over the net. I generally avoid rewriting articles which are easily available on the net.

First refer CSS snippet given below which is about to be used while discussing this problem & solution.

div {border:#000 1px solid; width: 50px;}
.L {float:left;}
.R {float:right;}

Let’s start.

Case 1

< div class="L">1< / div >
	< div >Amit Gupta< / div >
	< div class="R">2< / div >
	< div >article-stack.com< / div >

Result :

Explanation:

First Div will let its upcoming elements take place in its right ie div containing “Amit Gupta” word. This is the basic property of a floated div. But a simple DIV never let any upcoming element take place to its right or left. So the 3rd div is shifted to next line. Similar to First DIV, Third DIV will also let its upcoming element place it’s left.

Doubt : Why 4th DIV is not starting from starting of line?

SubCase 1

<div> Container
<div> child </div>
</div>

Output

SubCase 2

<div> Container
<div class="L"> child </div>
</div>

Output

 

Explanation:

Height of a simple DIV with default width 100% is increased by the height of its element. On the opposite side, Height of floated DIV may increased and can pop out from its container on y-axis. So it doesn’t let any other element draw on y-axis.

Revised case 1

<div class="L" style="width: 150px">1</div>
<div>Amit Gupta</div>
<div class="R">2</div>
<div>article-stack.com</div>

Output:

Solution:

Use of clear property removes floating effect and let other element flow in normal way. For example;

<div class="L">1</div>
<div>Amit Gupta</div>
<div style="clear: left"></div>
<div class="R">2</div>
<div>article-stack.com</div>

Output

Now if you increase the height of floated DIV it doesn’t affect upcoming elements.

<div class="L" style="width: 150px">1</div>
<div>Amit Gupta</div>
<div style="clear: left"></div>
<div class="R">2</div>
<div>article-stack.com</div>

Output:

Warning:

For Browser’s compatibility

1. Never use clear property with DIV using for displaying contents like
2. Try to use clear:both instead of clear:left or clear:right.