View Full Version : Font size problem on large screens (16:9 ratio)

05-09-2010, 11:58 PM
It's not a major problem since nothing overlaps nor becomes hidden, yet the look of my web site is not the same. Texts look too big in my background.

This problem occurs on both Firefox and IExplorer. Chrome makes it look good.

Like I said, it's only on screen with 16:9 (1,777) resolution ratio that it happens.

For those who don't have a large screen, here's what it looks like:

Is there a way I can lock the font size, independantly of the screen resolution? So that it always appear the same way?

Thanks for the help.

05-16-2010, 06:13 AM
please, someone help me out with this....

05-16-2010, 01:36 PM
I’m sorry but your problem isn’t reproducable without you providing a link to the actual page in question. Normally there is no (relative) difference of sizes in different screen resolutions whatsoever, or screen resolution has nothing to do with font size, respectively. You must have done something else wrong. Consult the HTML validator (http://validator.w3.org/) and the CSS validator (http://jigsaw.w3.org/css-validator/) and check what they say. And if you want ay help from us, provide your (entire) code.

05-16-2010, 04:54 PM
It looks like you may have a div issue ( you code would help check this). Which way did you declare your font size? small, medium, large or by pt 14pt?


05-19-2010, 08:49 PM
I specified my font size in pt...

The actual page is http://www.mechantdesign.com

Everything is fine on 4:3 computer screens.

05-19-2010, 08:50 PM
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<META name="y_key" content="a2052f6e425b61fa">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="Création de sites web | Web Site Creation" />
<meta name="keywords" content="HTML, CSS, Site web, Siteweb, Web site, Website, Création, Abordable, Conception, Internet, Lacroix, Charles-Alexandre Lacroix, Méchant, Design, Méchant Design" />
<meta name="author" content="Charles-Alexandre Lacroix" />

<title>Méchant Design</title>

<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">
<link rel="stylesheet" href="style.css" type="text/css" />


<div class="page">

<div class="header-fr">

<div class="date">
Le mercredi 19 mai 2010. 14h49

<div class="tablenav">
<table class="nav" width="480" height="57" cellspacing="0" background="images/navigation.png" id="nav">
<td width="30">&nbsp;</td>
<td width="110" height="55"><div class="bouton-accueil"><a href="../index.php"></a></div></td>
<td width="110"><div class="bouton-services"><a href="../32-services.php"></a></div></td>
<td width="110"><div class="bouton-portfolio"><a href="../33-portfolio.php"></a></div></td>
<td width="110"><div class="bouton-coordonnees"><a href="../34-coordonnees.php"></a></div></td>
<td width="49">&nbsp;</td>
</tr><p class="style-texte01">&nbsp;</p>

<div class="corps">

<div class="title"><a href="41-home.php">english</a></div>

<div class="sidebar">
<h2>Activités récentes</h2>
<p class="style-sidebar01">Conception du nouveau site web de <span class="MDesign2">MDesign</span></p>
<p class="style-sidebar01">Conception du site web de <a href="http://www.lacroixconseil.com/">Lacroix Conseil</a></p>

<div class="titre-page">
<h1><img src="images/fleche-accueil.png" alt="accueil" width="151" height="35" /></h1>

<div class="texte">
<p class="style-texte01">Bienvenue sur le site de <span class="MDesign">MDesign</span> !</p>
<p class="style-texte01"><span class="MDesign">MDesign</span> est une compagnie offrant ses services en conception et en design web.</p>
<p class="style-texte01">Jetez un coup d'oeil à nos créations pour vous donner un aperçu de l'effort et de la qualité de nos services.</p>
<p class="style-texte01">&nbsp;</p>
<div class="signature">
<img src="images/Signature PRO.jpg" alt="signature" width="150" height="34" /><br />
Charles-Alexandre Lacroix,<br/>
et fondateur de <span class="MDesign2">MDesign</span>



<div class="like">
<iframe src="http://www.facebook.com/plugins/like.php?href=www.mechantdesign.com&amp;layout=standard&amp;show_faces=false&amp;width=450&amp;action=like&amp;font=taho ma&amp;colorscheme=light&amp;height=35" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:300px; height:35px;" allowTransparency="true">


<div class="footer">
<div class="footer-text" align="center"><a href="../index.php">Accueil</a>&nbsp;| &nbsp;<a href="../32-services.php">Services</a> &nbsp;| &nbsp;<a href="../33-portfolio.php">Portfolio</a> &nbsp;| &nbsp;<a href="../34-coordonnees.php">Nous joindre</a><br/>
2010 &copy; mechantdesign.com </div>

<div class="validators">

paiements sécurisés via <img src="../images/logo-paypal.png" alt="paypal" name="paypal" id="paypal" /> </div>

<div class="mini-bas-gauche">création <span class="MDesign"><a href="../index.php">mdesign</a></span>&nbsp;<img src="../images/nouveau logo M sans ombre.png" alt="logomd" name="logomd" id="logomd" /> - suivez nous sur &nbsp;<a href="http://www.facebook.com/pages/Mechant-Design/123384491009964?created" target="_blank"><img src="../images/logo-facebook.jpg" alt="facebook" name="facebook" id="facebook"/></a>&nbsp;

<a href="http://www.linkedin.com/companies/974630" target="_blank"><img src="../images/logo-linkedin.jpg" alt="linkedin" name="linkedin" id="linkedin"/></a>&nbsp;

<a href="http://twitter.com/MechantDesign" target="_blank"><img src="../images/logo-twitter6.png" alt="twitter" name="twitter" width="238" height="238" id="twitter"/></a> </div>


05-19-2010, 09:13 PM
I have a 5:4 screen and I can't reproduce the issue. However, HTML is completely platform-independent--I am hesitant to believe it's due to screen resolution, and much more likely to do with the fact that you used two separate browsers (Firefox & Chrome) to display the screenshots. Also, it doesn't help us that you've changed the design from the one in the screenshots.

05-21-2010, 01:53 AM
You may find a better unity with browser screen size adjusting.

<font size="2" face="Verdana">
This is a paragraph.