Results 1 to 2 of 2

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

Hybrid View

  1. #1
    Join Date
    Mar 2009
    Fortaleza, CE, Brazil

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

    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.
    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">
      <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">
    function mostra_submenu(submenu)
    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";
    <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 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>
    <span><a class="menulnk" href="imprensa.html">5 - IMPRENSA</a></span><br>
    <span><a class="menulnk" href="contatos.html">6 - CONTATOS</a></span>
    <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>
    <span><a class="menulnk" href="#">SOUNDTRACK - 12</a></span>
    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/ .
    /* 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):
    And how it looks on Chrome(ugly):

    Thanks for your attention,


  2. #2
    Join Date
    Mar 2009
    Fortaleza, CE, Brazil
    Ignore this one, I've got it right already.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
HTML5 Development Center

Recent Articles