Trying to make page fit to window size. Working with FF, IE 8, but not with Chorme.

**Granite** · 11-26-2012, 04:59 AM

Hello everybody,

I'm trying to make a page that ajusts its dimensions according to window size. Now, it's working fine on Firefox, as well as IE 8, but not on Chrome. I'll post the whole CSS and HTML code below.

The fisrt 3 lines of the CSS are meant to do the task of making the page fit.

Code:

html { height:100%; }
body { padding:0; background-color:pink; text-align: center; height: 100% }
#geral { width: 100%; height:100%; margin-left: auto; margin-right: auto; position: relative; text-align: left; }
#conteudo { margin-top:2%; left:20%; height:80%; position:absolute; }
#menu_esq { margin-top:41%; text-align:left; position:absolute; width:30%; left:5%; } 
#menu_dir { margin-top:41%; text-align:right; position:absolute; width:30%; left:65%; }
#ficha_tecnica_submenu { display:none; text-align: right; }
#fotos_submenu { display:none; text-align: right; }
#equipe_submenu { display:none; text-align: left; }
a.menulnk { color:black; text-decoration: none; }
a.submenulnk_esq { padding-left:10%; color:black; text-decoration: none; }
a.submenulnk_dir { padding-right:10%; color:black; text-decoration: none; }

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head>
  <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
  <title>Doce Amianto</title>
  <link rel="stylesheet" type="text/css" href="reset.css">
  <link rel="stylesheet" type="text/css" href="geral.css">
  <script>
function mostra_submenu(submenu)
{
esconde_submenus();
var submenuid = submenu+"_submenu";
document.getElementById(submenuid).style.display = "inline";
}
function esconde_submenus()
{
var submenus = new Array("ficha_tecnica","fotos","equipe");
for(var davez in submenus)
{
var submenuid = submenus[davez]+"_submenu";
document.getElementById(submenuid).style.display = "none";
}
}
  </script>
</head><body>
<div id="geral">
<div id="conteudo">&nbsp;****, what's this? aaaah!</div>
<div id="menu_esq"><span><a class="menulnk" href="#">1 - NOVIDADES</a></span><br>
<span><a class="menulnk" href="#">2 - SINÓPSE</a></span><br>
<div onmouseover="mostra_submenu('ficha_tecnica')" onmouseout="esconde_submenus()">
	<span>3 - FICHA TÉCNICA</span><br>
	<div id="ficha_tecnica_submenu"><span><a class="submenulnk_esq" href="#">a - do Filme</a></span><br>
	<span><a class="submenulnk_esq" href="#">b - da Página</a></span></div>
</div>
<div onmouseover="mostra_submenu('fotos')" onmouseout="esconde_submenus()">
	<span>4 - FOTOS</span><br>
	<div id="fotos_submenu"><span><a class="submenulnk_esq" href="#">a - Still</a></span><br>
	<span><a class="submenulnk_esq" href="#">b - Making of</a></span><br>
	</div>
<span><a class="menulnk" href="imprensa.html">5 - IMPRENSA</a></span><br>
<span><a class="menulnk" href="contatos.html">6 - CONTATOS</a></span>
</div>
</div>
<div id="menu_dir">
<span><a class="menulnk" href="#">PAPÉIS DE PAREDE - 7</a></span><br>
<span><a class="menulnk" href="#">IMANGENS &amp; MISTÉRIOS - 8</a></span><br>
<span><a class="menulnk" href="#">GAME - 9</a></span><br>
<span><a class="menulnk" href="#">ARTISTAS COM OBRAS - 10</a></span><br>
<div onmouseover="mostra_submenu('equipe')" onmouseout="esconde_submenus()">
	<span>EQUIPE - 11</span><br>
	<div id="equipe_submenu"><span><a class="submenulnk_dir" href="#">Diretores - a</a></span><br>
	<span><a class="submenulnk_dir" href="#">Atores - b</a></span><br>
	<span><a class="submenulnk_dir" href="#">Produtores - c</a></span>
	</div>
</div>
<span><a class="menulnk" href="#">SOUNDTRACK - 12</a></span>
</div>
</div>
</body></html>

If you care, try this by yourself. The CSS file above is named "geral.css". I have another CSS file which is a "reset" that I got from http://meyerweb.com/eric/tools/css/reset/ .
Here:

Code:

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

Ok, now, have a look at how things are looking on FF and IE8(just as I think it should):
doceamiantoNoFF.jpg
And how it looks on Chrome(ugly):
doceamiantoNoChorme.jpg

Thanks for your attention,

Hênio

**Granite** · 11-26-2012, 11:01 AM

Ignore this one, I've got it right already.

Thread: Trying to make page fit to window size. Working with FF, IE 8, but not with Chorme.

Thread Tools

Display

Trying to make page fit to window size. Working with FF, IE 8, but not with Chorme.

Thread Information

Users Browsing this Thread

Tags for this Thread

Bookmarks

Bookmarks

Posting Permissions