Font size chaos

2 replies [Last post]

Wed, 2011-07-06 01:00

Lateralus_cl

Offline

newbie

Timezone: GMT-4

Joined: 2011-07-06

Posts: 2

Points: 3

Hi,

I've been trying to set-up a simple website in css using Flux (a web design software for mac). After a lot of trial and error, I came up with a design that looks ok on Safari on Mac. Sadly, whenever someone opens it in Firefox or Chrome, there are a lot of problems with alignment and text size. If the website is opened in browser in Windows, the problem gets worse.

I've read a lot of information on this and several forums (tried setting a global font size in the body css, then using em measures for specific font sizes), but I haven't been able to solve the issue. When it's fixed on the firefox side, it gets gigantic text on the safari side.

Any suggestions on which way should I go to try to fix it?

A sample of the website that shows the odd behavior is would be: http://www.mmc-consultores.cl/estudios.html

The webpage code is

<html><head>
		<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
		<meta name="author" content="Flux User" >
		<meta name="description" content="My Website" >
		<meta name="keywords" content="Flux, Mac" >
		<link href="main.css" rel="stylesheet" type="text/css" >
		<title>MMC Consultores</title>
	</head><body style="" >
 
<div style="" id="mycontent" flux:locked="true" ><div id="header" flux:locked="true" ><a href="about.html" target="" name="" ><img src="images/nosotros.png" alt="" style="position:relative; left:183px; top:112px; border-style:none; " flux:locked="true" ></a><a href="research.html" target="" name="" ><img src="images/research.png" alt="" style="position:relative; left:209px; top:112px; border-style:none; " flux:locked="true" ></a><a href="innova.html" target="" name="" ><img src="images/innova.png" alt="" style="position:relative; left:238px; top:111px; border-style:none; " flux:locked="true" ></a><a href="contacto.html" target="" name="" ></a><a href="mailto:contacto@mmc-consultores.cl" target="" name="" ><img src="images/contacto.png" alt="" style="position:relative; left:264px; top:112px; border-style:none; " flux:locked="true" ></a><a href="index.html" target="" name="" ><img src="images/logo.png" alt="" style="position:relative; left:-260px; top:66px; border-style:none; " flux:locked="true" ></a><a href="http://www.mmc-consultores.cl:2095/" target="" name="" ><img src="images/intranet.png" alt="" style="position:relative; left:160px; top:119px; border-style:none; " flux:locked="true" ></a></div><div style="" id="cuadrocont" flux:locked="true" ><div style="" id="subtitulo" flux:locked="true" >Estudios</div><div style="" id="columnastexto" ><br><br><br><br><br>MMC Research se especializa en la investigación social aplicada. Ofrecemos estudios de alta calidad desde su diseño y aplicación en terreno hasta el análisis de resultados y la elaboración de informes.<br><br>MMC Research diseña estudios ad-hoc según los requerimientos de cada cliente. Entre las áreas comunmente desarrallodas se encuentran:<br> <br><br><br> <br><br><div style="position:relative; width:246px; color:#FFFFFF; height:362px; left:275px; top:-315px; " ><br><br><br>Estudios de opinión pública:<br><br>- &nbsp;Percepción social y política<br>- &nbsp;Preferencias electorales<br>- &nbsp;Imagen política<br><br>Estudios de mercado:<br><br>- &nbsp;Imagen y posicionamiento<br>- &nbsp;Hábitos y motivaciones<br>- &nbsp;Perfiles de clientes<br>- &nbsp;Satisfacción de clientes<br><br>Estudios especializados:<br><br>- &nbsp;Evaluaciones de impacto&nbsp;<br>- &nbsp;Evaluaciones de programas sociales<br>- &nbsp;Validación de pruebas y test psicométricos<br></div></div><div style="" id="bottom" ><br>MMC Consultores -&nbsp;Suecia 84, Oficina 44, Providencia<br><br></div></div><div style="font-size:20pt; " id="cuna" >Innovando desde la consultoría</div><div style="position:relative; color:#0098DF; font-family:Arial; font-size:80px; height:43px; width:50px; font-weight:bold; letter-spacing:-6px; top:-640px; left:-27px; " >‘‘</div><div style="position:relative; color:#0098DF; font-family:Arial; font-size:80px; width:50px; font-weight:bold; letter-spacing:-6px; left:139px; height:43px; top:-605px; " >’’</div><div style="" id="mininav" ><a href="estudios.html" target="" name="" >Estudios</a> &nbsp; :: &nbsp; <a href="metodologia.htlm" target="" name="" ></a><a href="metodologia.html" target="" name="" >Metodología</a></div></div></body></html>

And the main.css code is:

#bottom {
	text-align:right;
	height:20px;
	color:#777574;
	font-family:'Trebuchet MS';
	margin-top:-4px;
	margin-left:-2px;
	letter-spacing:1px;
	position:relative;
	width:540px;
	font-size:8px;
	right:-11px;
	top:83px;
}
 
#intro {
}
 
#textoabajo2 {
	position:relative;
	width:197px;
	font-family:Times;
	font-size:14px;
	color:#FFFFFF;
	height:76px;
	left:349px;
	top:10px;
}
 
#textoabajo1 {
	position:absolute;
	height:138px;
	color:#FFFFFF;
	font-family:Cambria;
	text-align:right;
	width:337px;
	font-size:34px;
	left:176px;
	top:0;
}
 
#lateral {
	position:relative;
	height:82px;
	width:524px;
	border-bottom-left-radius:5px 5px;
	-webkit-border-bottom-left-radius:5px 5px;
	-o-border-bottom-left-radius:5px 5px;
	-moz-border-radius-bottomleft:5px 5px;
	border-top-right-radius:5px 5px;
	-webkit-border-top-right-radius:5px 5px;
	-o-border-top-right-radius:5px 5px;
	-moz-border-radius-topright:5px 5px;
	border-top-left-radius:5px 5px;
	-webkit-border-top-left-radius:5px 5px;
	-o-border-top-left-radius:5px 5px;
	-moz-border-radius-topleft:5px 5px;
	background-color:#66C1E4;
	border-bottom-right-radius:5px 5px;
	-webkit-border-bottom-right-radius:5px 5px;
	-o-border-bottom-right-radius:5px 5px;
	-moz-border-radius-bottomright:5px 5px;
	left:0;
	top:-151px;
}
 
#back {
	position:relative;
	height:80%;
	width:100%;
	border-top-left-radius:5px 5px;
	-webkit-border-top-left-radius:5px 5px;
	-o-border-top-left-radius:5px 5px;
	-moz-border-radius-topleft:5px 5px;
	border-top-right-radius:5px 5px;
	-webkit-border-top-right-radius:5px 5px;
	-o-border-top-right-radius:5px 5px;
	-moz-border-radius-topright:5px 5px;
}
 
a {
	color:#B4B4B4;
	font-family:Calibri;
	font-style:normal;
	font-weight:bold;
	text-decoration:none;
}
 
#mininav {
	position:relative;
	margin-bottom:0;
	font-family:Calibri;
	font-weight:bold;
	font-size:12px;
	height:16px;
	color:#B4B4B4;
	width:320px;
	left:186px;
	top:-719px;
}
 
#cuna {
	position:relative;
	height:229px;
	text-align:right;
	font-family:Cambria;
	font-size:32px;
	width:133px;
	left:4px;
	top:-396px;
}
 
#lenguetaseccion {
	position:relative;
	height:141px;
	border-bottom-left-radius:5px 5px;
	-webkit-border-bottom-left-radius:5px 5px;
	-o-border-bottom-left-radius:5px 5px;
	-moz-border-radius-bottomleft:5px 5px;
	border-top-left-radius:5px 5px;
	-webkit-border-top-left-radius:5px 5px;
	-o-border-top-left-radius:5px 5px;
	-moz-border-radius-topleft:5px 5px;
	width:45px;
	background-color:#B4B4B4;
	left:137px;
	top:-124px;
}
 
#columnastexto {
	position:relative;
	color:#FFFFFF;
	left:15px;
	top:66px;
	width:246px;
	height:327px;
	font-family:'Trebuchet MS';
	text-align:left;
	font-size:12px;
}
 
#columastexto2 {
	width:246px;
	font:inherit;
	color:#FFFFFF;
	position:absolute;
	left:275px;
	top:-30px;
	height:333px;
	font-family:'Trebuchet MS';
	font-size:12px;
}
 
#subtitulo {
	position:absolute;
	background-color:#FFFFFF;
	border-bottom-right-radius:5px 5px;
	-webkit-border-bottom-right-radius:5px 5px;
	-o-border-bottom-right-radius:5px 5px;
	-moz-border-radius-bottomright:5px 5px;
	border-top-right-radius:5px 5px;
	-webkit-border-top-right-radius:5px 5px;
	-o-border-top-right-radius:5px 5px;
	-moz-border-radius-topright:5px 5px;
	font-family:Calibri;
	font-weight:bold;
	color:#0098DF;
	padding-left:18px;
	height:22px;
	padding-top:4px;
	margin-bottom:1px;
	width:183px;
	left:0;
	top:33px;
}
 
#cuadrocont {
	position:relative;
	top:30px;
	left:182px;
	width:552px;
	border-bottom-left-radius:5px 5px;
	-webkit-border-bottom-left-radius:5px 5px;
	-o-border-bottom-left-radius:5px 5px;
	-moz-border-radius-bottomleft:5px 5px;
	border-bottom-right-radius:5px 5px;
	-webkit-border-bottom-right-radius:5px 5px;
	-o-border-bottom-right-radius:5px 5px;
	-moz-border-radius-bottomright:5px 5px;
	border-top-left-radius:5px 5px;
	-webkit-border-top-left-radius:5px 5px;
	-o-border-top-left-radius:5px 5px;
	-moz-border-radius-topleft:5px 5px;
	border-top-right-radius:5px 5px;
	-webkit-border-top-right-radius:5px 5px;
	-o-border-top-right-radius:5px 5px;
	-moz-border-radius-topright:5px 5px;
	background-color:#777574;
	height:411px;
}
 
#header {
	width:100%;
	position:relative;
	top:0;
	left:0;
	background-image:url(images/cabecera.png);
	height:163px;
}
 
#mycontent {
	width:734px;
	position:relative;
	float:none;
	margin-left:auto;
	margin-right:auto;
	display:block;
	height:800px;
	background-color:transparent;
	top:5px;
}
 
body {
}
 
.mystyle {
}

Please don't laugh at my web design. I'm no web designer and had to start at this out of necessity: I'm starting a company with some friends, but we don't have enough money to hire a web-designer.

Thanks for your input!

Tags:

Wed, 2011-07-06 01:02

Lateralus_cl

Offline

newbie

Timezone: GMT-4

Joined: 2011-07-06

Posts: 2

Points: 3

Sorry for any grammar errors,

Sorry for any grammar errors, english is not my mother tongue.

Wed, 2011-07-06 01:35

Deuce

Offline

Guru

Timezone: GMT-5

Joined: 2005-11-20

Posts: 4421

Points: 1840

You don't have a doctype and

You don't have a doctype and you have invalid HTML attributes in your code.
http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.mmc-consultores.cl%2Festudios.html

I should start there. You need a solid foundation before you start getting into anything too fancy.

all » http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

Sorry for any grammar errors,

You don't have a doctype and

New forum topics

User login

Navigation