javascript - Why the page is longer on Chrome? -
check page www.danielmalek.bugs3.com/oferta.html, on chrome can see bit long beam on left side not reaching end of site. on firefox , ie seems right, @ localhost chrome displays well.
html code:
<!doctype html public "-//w3c//dtd xhtml 1.0 strict//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl"> <head> <title>strony internetowe - daniel małek</title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <link href="style.css" type="text/css" rel="stylesheet" /> <script language="javascript" type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function (){ /*$("body").css("overflow-y", "hidden");*/ /*("#slider").css("overflow", "hidden");*/ function tytul() { } $(".galeria").click( function() { $("#ukryte").toggle(200); }); }); </script> </head> <body> <div id="container"> <div id="header"> <div id="header2"></div> <div id="pasek"></div> </div> <div id="przedluzenie"></div> <div id="content"> <div id="menu"> <div id="menu2"> <a class="start" href="index.html"></a> <a class="galeria" href="#"></a> <div id="ukryte" style="display: none;"> <a class="webdesign" href="webdesign.html"></a> <a class="grafika" href="grafika.html"></a> </div> <div id="oferta_b"></div> <a class="omnie" href="omnie.html"></a> <a class="kontakt" href="kontakt.html"></a> </div> </div> <div id="prawa_strona"> <div id="omnietxt" style="margin-bottom:60px;"> <ul style="margin-left:20px;" class="ofertatxt"> <li>administracja istniejącymi stronami internetowymi</li> <li>hosting, domeny instalacja stron na serwerze</li> <li>projektowanie kodowanie stron www</li> <li>identyfikacja wizualna (tworzenie logo)</li> <li>dedykowane systemy cms</li> <li>blogi wordpress</li> <li>oprogramowanie sklepów kqsstore</li> </ul> </br> <p class="ofertatxt"> ponadto, wraz ze znajomymi programistami tworzymy młody, ambitny zespół, który jest w stanie stworzyć w pełni funkcjonalne rozbudowane serwisy internetowe.</br></br> nie wystawiam faktury vat, preferowany rodzaj współpracy umowa o zlecenie lub umowa o dzieło.</p> </div> <div id="footerx"> <img src="img/foot_linia.png"></img><br> <p class="stopka">copyright © 2013 daniel małek </p> </div> </div> <div class="clear"></div> </div> </div> <script type="text/javascript" charset="utf-8"> var scrollspeed = 70; var step = 1; var current = 0; var imagewidth = 410; var headerwidth = 410; var restartposition = -(imagewidth - headerwidth); function scrollbg(){ current -= step; if (current == restartposition){ current = 0; } $('#header').css("background-position",current+"px 0"); } var init = setinterval("scrollbg()", scrollspeed); </script> <script type="text/javascript" charset="utf-8"> $(window).load(function(){ var content = $('#content').height(); var winh = $(window).height(); if(content>=winh){$('#menu').height(content);} else{ winh=winh-200; $('#menu').height(winh);} }); </script> </body> </html> and css:
* { padding: 0; margin: 0;} .clear {clear: both;} html{} html, body, #container, #content{} body {background: url('img/tekstura.png');background-repeat:repeat-y repeat-x;background-color:#d5d5d5;} #container {margin: 0 auto; position:relative;} #content {margin: 0 auto;position:relative;width:960px;overflow:auto;} #header {background-color:#2099c8;background: url('img/heder/tekstura.png') repeat-x; height:160px; margin:0 auto; position:relative; width:100%;box-shadow: 0 0 30px 9px white;} #pasek{height:3px;background: url('img/heder/pasek.png') repeat-x;} #header2{background: url('img/heder/przod2.png') no-repeat;background-repeat:repeat-y repeat-x;margin: 0 auto;width:960px; height:157px;} #gradient_poziom{height:37px; background: url('img/gradient_poziom.png') repeat-x;} #prawa_strona{ float:right;width:720px; margin-right:10px;} #przedluzenie{width:209px; height:40px;background-color:black;margin:0 auto;position:relative;right:376px;background: url('img/gradient_pion.png') repeat-y;} #menu {float:left;width:209px;margin-right:5px;background: url('img/gradient_pion.png') repeat-y;} #menu2{float:right;margin-right:20px;} #ukryte {position:relative;left:23px;} #start_b {background: url('img/start_b.png') no-repeat;height:29px;width: 169px;margin-bottom:15px;} .start {background:url('img/start.png') no-repeat;display:block;height:29px;width:169px;margin-bottom:15px;} a.start:hover {background-position: 0px -29px;} #galeria_b {background: url('img/galeria_b.png') no-repeat;height:29px;width: 169px;margin-bottom:15px;} a.galeria {background: url('img/galeria.png') no-repeat;display:block;height:29px;overflow:hidden;width: 169px;margin-bottom:15px;} a.galeria:hover {background-position: 0px -29px;} #webdesign_b {background: url('img/webdesign_b.png') no-repeat;height:20px;width: 142px;margin-bottom:15px;} a.webdesign {background: url('img/webdesign.png') no-repeat;display:block;height:20px;overflow:hidden;width: 169px;margin-bottom:15px;} a.webdesign:hover {background-position: 0px -20px;} #grafika_b {background: url('img/grafika_b.png') no-repeat;height:20px;width: 142px;margin-bottom:15px;} a.grafika {background: url('img/grafika.png') no-repeat;display:block;height:20px;overflow:hidden;width: 169px;margin-bottom:25px;} a.grafika:hover {background-position: 0px -20px;} #oferta{background: url('img/oferta_b.png') no-repeat;height:29px;width: 142px;margin-bottom:15px;} a.oferta {background: url('img/oferta.png') no-repeat;display:block;height:29px;width: 142px;margin-bottom:15px;} a.oferta:hover {background-position: 0px -29px;} #omnie_b{background: url('img/omnie_b.png') no-repeat;height:29px;width: 169px;margin-bottom:15px;} a.omnie {background: url('img/omnie.png') no-repeat;display:block;height:29px;width: 169px;margin-bottom:15px;} a.omnie:hover {background-position: 0px -29px;} #oferta_b{background: url('img/oferta_b.png') no-repeat;height:29px;width: 169px;margin-bottom:15px;} a.oferta {background: url('img/oferta.png') no-repeat;display:block;height:29px;width: 169px;margin-bottom:15px;} a.oferta:hover {background-position: 0px -29px;} #kontakt_b {background: url('img/kontakt_b.png') no-repeat;height:29px;width: 169px;margin-bottom:15px;} a.kontakt {background: url('img/kontakt.png') no-repeat;display:block;height:29px;width: 169px;margin-bottom:15px;} a.kontakt:hover {background-position: 0px -29px;} .minwebd{border: 1px solid #2e2e2e;float:left;position:relative;left:10px;} .cien{display:block;height:28px;width:216px;float:left;margin-left:22px;} #cienie{z-index:-1;float:right;position:relative;top:-8px;} #jrs{margin-top:25px;float:right;margin-left:7px;} .jrs{background: rgba(255, 255, 255, 0.7);width:218px;float:left;} .jrs_img{} .jrs_tekst{margin: 0 10px 15px 10px; text-align:justify;color:#464646;font-family:verdana, geneva, arial, helvetica, sans-serif;font-size:12px;} .znak_plus{position:relative;float:left;width:20px;font-size:20px;font-family:verdana, geneva, arial, helvetica, sans-serif;margin-top:15px;text-align:center;color:#3f3f3f;} #footerx{float:right;margin:20px 0;width:412px;} .stopka{float:right;font-family:verdana, geneva, arial, helvetica, sans-serif;font-size:0.6em;color:#2e2e2e;position:relative;margin-right:10px;margin-top:5px;} .obrazek1{ height:159px; width: 198px; float:left; border: 1px solid #417f99; } .obrazek2{} #galgraf{margin-right:30px;float:left;} #napis{ width:190px;float:right;height:35px;background: white;background: rgba(255, 255, 255, 0.7); display: block; padding: 5px ; margin: 0 0 20px 20px;} #wstep{float:left; position:relative; width:auto; background: white; background: rgba(255, 255, 255, 0.7);margin: 0 0 30px 66px; padding:10px 15px 10px 15px;color:#464646;} #gallery{ float:right; } #gallery2{ float:left; width:200px; } #webdopisy{ float:left; } #webdopis{float:right;width: 430px; background: white;background: rgba(255, 255, 255, 0.7); display: block;margin: 0 0 15px 40px; padding:15px;color:#464646;} #beczka{margin-bottom:30px;position:relative;float:left;} .webdopis {} .opis { text-decoration:none; color:#006c96; } .opis a:hover{ text-decoration:underline; color:#006c96; } h1 { color:black; font-size:0.9em; font-family:tahoma,helvetica,sans-serif; font-weight:100; text-align:center; } .omnietxt{line-height:20px;color:#464646;font-size:0.9em;float:left;font-family:arial,helvetica,sans-serif;padding: 0 5px 0 5px;} .ofertatxt{line-height:20px;color:#464646;font-size:0.9em;font-family:arial,helvetica,sans-serif;text-align:justify} #omnietxt{ float:left; width: 500px; background: white; background: rgba(255, 255, 255, 0.7); display: block; padding:15px 15px 15px 15px; margin: 0 0 110px 120px; } #wysokosc{ height:420px; } /* lajtboks */ .thumb { float:left; margin: 0 0 0 20px ; border: 1px solid #2e2e2e; } .clearfloat { clear:both; } /* kontakt */ #numery{ padding:20px 20px 20px 20px;float:left;position:relative;left:265px;background: rgba(255, 255, 255, 0.7); margin-top:15px;margin-bottom:150px;} .gg1 {position:relative;top:2px;left: 13px;} .gg2 {font-style:italic;font-size:1.2em;position:relative;top:5px;left:15px;} .adres1 {color:#015d81;font-size:15;font-family:arial,helvetica,sans-serif;} .adres2 {position:relative;top:5px;color:#015d81;font-size:15;font-family:arial,helvetica,sans-serif;}
you have 2 scripts embedded html:
<script type="text/javascript" charset="utf-8"> $(window).load(function(){ var content = $('#content').height(); var winh = $(window).height(); if(content>=winh){$('#menu').height(content);} else{ winh=winh-200; $('#menu').height(winh);} }); </script> <script type="text/javascript" charset="utf-8"> $(window).load(function(){ var content = $('#content').height(); $('#menu').height(content); }); </script> both fire @ same time: $(window).load, , both same thing: $('#menu').height(value);, value different.
obviously, erroneous. in chrome snippets finish in different order in other browsers, difference.
upd #1
i'm opening link chrome, , vertical scrollbar not appear. assume solution worked, please don't forget accept question. ;)
but know don't need javascript solve task?
here's example how vertical stretching can done in pure css: css 3 col template 100% same height
also, should not use non-semantic elements decoration: #przedluzenie, #pasek etc. can solved in pure css without messing html.
