www.webdeveloper.com
Results 1 to 2 of 2

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

  1. #1
    Join Date
    Mar 2009
    Location
    Fortaleza, CE, Brazil
    Posts
    81

    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.
    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

  2. #2
    Join Date
    Mar 2009
    Location
    Fortaleza, CE, Brazil
    Posts
    81
    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