Different browsers may display your banner in slightly different ways. Because of this, it can occur that your banner does not look identical across all browsers. If your banner looks off in some browsers, this probably concerns variations in text properties such as font size, letter spacing, and font weight. 

Problem 1: text is being cut off vertically

Below you will see an example of the same banner, displayed differently in Internet Explorer and Chrome. The text on the left is being cut off, as you can see in the banner title.

In different situations, different browsers can cause similar errors. It does not always have to be so that Chrome displays it correctly. 

We can not control what browsers do, but we can help you with a fix that will solve most of these issues. After all, we prefer nice-looking and consistent banners, just like you!

The cause, in this case, is the use of a custom font.

The chances of your banner looking weird increase especially if you are making use of a custom font. When you use a custom font, it's important to use the correct file type. We currently support .ttf files in Bannerwise. 

Still, even if you already have a .ttf file, it can cause errors because the font is perhaps not a web font. If you want to learn how to convert your font files to .ttf correctly, check out this article.

Problem 2: Text is being cut off horizontally

The same kind of visual problem can occur vertically. Sometimes the text box is too small to display all of your text, because of the difference in which browsers render the content. So even if everything looks perfect in one browser, suddenly the same text box is too small for another one. In the example below, we can see that the text is filling the text box completely leaving no room between the text itself and the textbox border. If the browser renders the font larger than originally intended, some text might be pushed to a different line, or get cut off completely. 

The workaround, in this case, is to increase the text box size.

Using a simple trick, you can increase the size of text boxes to prevent text from being cut off in your banner in some browsers. 

To be on the safe side when creating display banners, always add some extra space on the right side of your textbox. That way, you leave space for the difference in rendering by a browser!

We can’t control browser rendering, but do find it important that banners look beautiful no matter how you view them. Using these tricks we hope you can prevent this common error from happening!

Did this answer your question?