CODEWITHSUNDEEP
css
Forza
Forza

Reputation: 1649

Why does this paragraph look different in different browsers?

This may be a noob question, but I can't get it to look the same in every browser. What am I doing wrong here? I want to display the text like it is in Firefox, in all browsers.

See: Firefox:

blabla http://piclair.com/data/ho0b9.jpg

Chrome:

Chrome http://piclair.com/data/mx336.jpg

Safari:

Safari http://piclair.com/data/q5ygn.jpg

My CSS:

#myslogan {
float: left;
margin-top: 50px;
margin-left: 0px;
width: 290px;
height: 75px;
background: url('../images/subhlogobg.png') no-repeat;
padding: 3px 0 0 11px; 
line-height: 35px;
}

p.subs {
font-weight: bold;
display: inline;
color: #F0821F;
font-size: 23px;
}

.harabara {
list-style: none;
font-family: 'harabararegular';
letter-spacing:1px;
}

My HTML:

<div id="myslogan" class="harabara">
    <p class="subs">Logo en huisstijl ontwerp <br /> 
    voor een scherpe prijs!
    </p>
</div>

Upvotes: 0

Views: 315

Answers (4)

Jukka K. Korpela
Jukka K. Korpela

Reputation: 201588

From the symptoms, it seems that you are using a “harabararegular” font, presumably as a downloadable font, and you are using a regular (not bold) typeface. Asking browsers to bold it will result in algorithmic bolding (thickening of strokes); the results are typographically poor and vary by browser. (There are many other causes of font rendering differences, but this one is crucial here.)

Thus, try and find a typeface that suits your needs as-is, as designed by a typographer. It should also have suitable spacing so that you do not need letter-spacing, which may also cause differences between browsers.

Upvotes: 1

G-Cyrillus
G-Cyrillus

Reputation: 105903

I would give up

  1. font-weight
  2. letter-spacing

And i would use from the beginning the bold font to avoid these big difference. http://www.dafont.com/harabara.font?text=Logo+en+huisstijl+ontwerp&psize=s test your text from there and see what difference it makes, there will be difference anyway, browser do not draw and render police with same methods.

Upvotes: 0

diggy
diggy

Reputation: 351

Different browsers handle fonts in different way. This question might be of your help.

Upvotes: 0

Marc Audet
Marc Audet

Reputation: 46775

You defined your parent container #myslogan with a fixed width.

If you have a large enough font, and a long enough line of non-breaking text, the content can overflow.

Different browsers have different default fonts (hence letter size/spacing) so the line width will vary across platforms.

Also, different browsers create bold lettering differently, so turn off bold to see what happens.

Upvotes: 2

Related Questions