/    Sign up×
Community /Pin to ProfileBookmark

How do I make my fonts appear uniformly in all the browsers in all the platforms???

The fonts that I am using in my CSS are appearing bigger and different in Firefox of Ubuntu. Can you suggest a way in which I can make them appear uniformly in all the browsers??? Seriously need help in this…?

to post a comment
HTML

8 Comments(s)

Copy linkTweet thisAlerts:
@CharlesFeb 10.2011 — You can't do that with HTML. HTML is [i]supposed[/i] to render differently on different platforms. If you need things nailed down then you should be using PDF or JPGs.
Copy linkTweet thisAlerts:
@AB_RathauthorFeb 10.2011 — Buddy I have to put the normal text material in the website... Its appearing fine in all the browsers .....except in Mozilla that to only in Ubuntu.. The text is going off the specified area.

And thats quite an important platform and browser I'm targeting to...

How can I use PDF for normal text?
Copy linkTweet thisAlerts:
@CharlesFeb 10.2011 — The text is going off the specified area. [/QUOTE]That's a different matter. Post the URL so we can see what it is that you are doing wrong.
Copy linkTweet thisAlerts:
@PBSWebDesignFeb 11.2011 — What fonts are you using? There is a nice list of browser compliant fonts that you should use if you want it to appear uniform across multiple platforms. Ill see if I can dig up the website for you. I am using Firefox 4 beta 10 right now on Ubuntu if you had a link posted i could view the site here and on my xp machine and get a better Idea of what you are talking about. When I run across certain artistic fonts I want to use and would like everyone else to see, I open up gimp, make a jpg of the paragraph that I want to use and then insert it into my html document. The only downside to doing this is a.) Can't just change the wording around easily(have to make a new picture) and b.) Images are larger than just text on the screen which will slow down the time it takes to load the page (the change may not be noticeable to you but its there). Please post a link and more specifically the fonts that you are trying to use for us to better help you with your question. The greater the detail we have the more detailed an answer you will get.
Copy linkTweet thisAlerts:
@AB_RathauthorFeb 11.2011 — [code=html]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>

<style type="text/css">


div.transbox
{
position:absolute;
left:180px;
width:980px;
height:680px;
background-color:#000000;
/* for IE */
filter:alpha(opacity=40);
/* CSS3 standard */
opacity:0.4;
top: 0px;
}

div.logo
{
position:absolute;
left:197px;
top:10px;
z-index:1;
}

#navlist{position:absolute;}
#navlist li{
margin:0;
padding:0;
list-style:none;
position:absolute;
top:80px;
}
#navlist li, #navlist a{height:50px;display:block;}

#home{
left:197px;
width:50px;
height:55px;
}
#home{background:url('img_navsprites_hover.png') 0 0;}
#home a:hover{background: url('img_navsprites_hover.png') 0px -52px;}

#comp{
left:267px;
width:50px;
}
#comp{background:url('img_navsprites_hover.png') -55px 0px;}
#comp a:hover{background: url('img_navsprites_hover.png') -55px -54px;}

#proj{
left:339px;
width:50px;
}
#proj{background:url('img_navsprites_hover.png') -107px 0;}
#proj a:hover{background: url('img_navsprites_hover.png') -107px -55px;}

#tech{
left:407px;
width:50px;
}
#tech{background:url('img_navsprites_hover.png') -155px 0;}
#tech a:hover{background: url('img_navsprites_hover.png') -157px -54px;}

#myid{
left:477px;
width:50px;
}
#myid{background:url('img_navsprites_hover.png') -200px 0;}
#myid a:hover{background: url('img_navsprites_hover.png') -200px -55px;}

#serv{
left:547px;
width:50px;
}
#serv{background:url('img_navsprites_hover.png') -244px 0;}
#serv a:hover{background: url('img_navsprites_hover.png') -244px -52px;}

#cari{
left:617px;
width:50px;
}
#cari{background:url('img_navsprites_hover.png') -300px 0;}
#cari a:hover{background: url('img_navsprites_hover.png') -300px -54px;}

#blog{
left:687px;
width:50px;
}
#blog{background:url('img_navsprites_hover.png') -360px 0;}
#blog a:hover{background: url('img_navsprites_hover.png') -360px -54px;}

#cont{
left:760px;
width:50px;
}
#cont{background:url('img_navsprites_hover.png') -412px 0px;}
#cont a:hover{background: url('img_navsprites_hover.png') -412px -53px;}
</style>

</head>
<body background="background.jpg" bgproperties="fixed">
<center><div style="position:relative; top:731px; left: 0px"><font color="#FFFFFF">All Rights Reserved<br/>GANIT Labs 2011</font></div>
</center>
<div class="transbox">

</div>
<div class="logo"><img src="log.png" height="103" width="336"></div>
<div style="position:absolute; left:778px; top:0px; z-index:1"><img src="topimage.png" width="319" height="140"></div>
<div style="position:absolute; left:180px; top:156px; width: 982px;"><img src="navbar.png" width="980" height="45"></div>
<ul id="navlist">
<li id="home"><a href="testweb2.html" title="Home"></a></li>
<li id="comp"><a href="aboutus.html" title="About Us"></a></li>
<li id="proj"><a href="project.html" title="Projects"></a></li>
<li id="tech"><a href="technology.html" title="Technology"></a></li>
<li id="myid"><a href="myidea.html" title="My Idea"></a></li>
<li id="serv"><a href="services.html" title="Services"></a></li>
<li id="cari"><a href="career.html" title="Career"></a></li>
<li id="blog"><a href="http://www.ganitlabs.blogspot.com" target="new" title="Blog"></a></li>
<li id="cont"><a href="contact.hmll" title="Contact Us"></a></li>
</ul>

<div style="position:absolute; left:214px; top:228px; z-index:2; width: 913px; color:#FFFFFF; text-align:justify; font:Arial"><font size="+3" color="#999999" face="Verdana, Arial, Helvetica, sans-serif">Core Lab Services</font><br/>
<br/><p>We provide core lab services using following platforms/areas:</p>

<p><b><font size="+1" color="#CCCC66">Next-generation sequencing:</font></b> standard DNA and RNA sequencing by sequencing-by-synthesis method using Illumina GAIIx platform.</p>

<p><b><font size="+1" color="#CCCC66">Capillary sequencing:</font></b> the gold standard Sanger capillary long-read sequencing with the Applied Biosystem’s newest 3500 instrument.</p>

<p><b><font size="+1" color="#CCCC66">Microarray:</font></b> standard gene-expression, genotyping and methylation experiments using Illumina HiScan instrument.</p>

<p><b><font size="+1" color="#CCCC66">Quantitative real-time expression and genotyping:</font></b> experiments using standard taqman or SYBR green chemistries in individual tube assays using Q-PCR platform
Quantitative real-time expression and genotyping experiments using standard chemistries on Applied Biosystem’s Open Array platform. If you have more number of samples, we could provide you with very cost-effective genotyping or gene expression solution using this platform.</p>

<p>If interested, please write to us with, the organism-studying, amount of sequence interested in sequencing (if interested for sequencing), number of samples and the nature of experiment to [email protected]. </p>
</div>

</body>
</html>
[/code]
Copy linkTweet thisAlerts:
@PBSWebDesignFeb 11.2011 — OK lets see here. First off why are you not using an external css style sheet? Much easier to maintain your code that way. Secondly lets pick apart this line you have here.
[CODE]
<div style="position:absolute; left:214px; top:228px; z-index:2; width: 913px; color:#FFFFFF; text-align:justify; font:Arial"><font size="+3" color="#999999" face="Verdana, Arial, Helvetica, sans-serif">Core Lab Services</font>
[/CODE]

I see font: Arial; but that is css not html and that is the short hand property of what you should be using if your setting that just to Arial. What you should use in the css for that is font-family: family-name, generic-name just font: by itself is the short hand property to set font: font-style, font-variant, font-weight, font-size/line height, font-family. you can use font: but honestly if your only defining just Arial font-family: Arial is better. Also I notice that you are missing an ; after Arial. very important to add that. here is what you should use instead for the css part.
[CODE]
font-family: Arial, Verdana, Sans-serif;

[/CODE]


add that bit where you have font: now and see if that changes it for you. Hope it works ?
Copy linkTweet thisAlerts:
@AB_RathauthorFeb 16.2011 — Thanks for the valuable reply....it did sort my problem to some extent.. ?
Copy linkTweet thisAlerts:
@PBSWebDesignFeb 16.2011 — To what extent does it still not work?
×

Success!

Help @AB_Rath spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 5.18,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...