SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Member
    Join Date
    Nov 2010
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Position fixed problem in Safari and Chrome

    I have problem with my new website. On IE, Firefox and Opera works ok but on Chrome and Safari not. All in newest version.
    Problem is with header, menu on left and right block (#NAGLOWEK, #MENU, #REKLAMA). In Chrome and Safari that blocks are positioned to right side of web browser.

    My site is on http://89.25.186.53/stos/index5.html

    HTML CODE:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl">
      <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <title>STOS</title>
        <link rel="stylesheet" href="style5.css" type="text/css" />
      </head>
      
      <body>
      <div id="main">
        	<div id="top">
    	    <div id="fixer"></div>	
    	     <div id="NAGLOWEK">Nagłówek szablonu</div>
    	     <div id="MENU">Menu nawigacyjne</div>
    	     <div id="REKLAMA">Dodatkowe informacje</div>
           </div>
                 <div id="TRESC">Treść strony Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent feugiat pretium nibh ac hendrerit. Etiam eleifend ipsum eu velit cursus tincidunt. Aenean metus justo, ullamcorper tempor porta non, consectetur vitae lorem. Aliquam sed est arcu. Fusce vitae sapien facilisis odio varius euismod et ut mi. In vitae nibh at nisi gravida dapibus. Nullam ultricies bibendum dapibus. Proin aliquet nisi id enim iaculis feugiat. Nullam vulputate ligula ac tellus ornare tristique. Maecenas ac turpis nulla. In orci nunc, adipiscing sit amet semper nec, consectetur nec velit. Fusce dictum leo ullamcorper ante ornare iaculis. Curabiuam aliquam velit a tortor dignissim sed dictum nunc ornare. Praesent vehicula, nunc a convallis varius, lorem diam vulputate turpis, vitae placerat nibh diam in urna. Praesent nec justo magna. Sed velit ipsum, scelerisque et posuere tempus, porttitor vitae turpis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin scelerisque gravida felis, et tincidunt quam rutrum sit amet. Nam malesuada consequat sem, ut molestie urna feugiat vel. Maecenas accumsan tincidunt nisl, non fringilla elit malesuada adipiscing. Nulla ac purus ut ligula imperdiet dignissim nec id massa. Aenean imperdiet fringilla vehicula. Sed commodo libero a lectus imperdiet nec fermentum metus fermentum. Ut eu magna in ante euismod accumsan. Integer quis dolor quis libero condimentum tincidunt. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Ut facilisis, neque ac venenatis eleifend, orci velit tristique nibh, sit amet pellentesque lectus velit malesuada urna. Nunc lectus neque, placerat id pretium ut, tincidunt at libero. Donec aliquet dapibus ultricies. Praesent sollicitudin mauris et purus elementum placerat. Duis laoreet tortor nec nunc tincidunt volutpat. Nullam scelerisque neque est. Duis dapibus dui at metus iaculis quis elementum lorem accumsan. Etiam quis eros non nunc vehicula fermentum et id tellus. Nulla iaculis mauris varius felis tempor at tincidunt libero adipiscing. </div>
    	     <div id="STOPKA">Stopka serwisu</div>
      </div>
    
      </body>
    </html>
    CSS CODE:
    Code:
    /* CSS Document */
    
    html, body {
    	background-color: #aff; /* ustalannie koloru tla, koloru fontu, usuwanie marginesow dla glownej strony */
    	color: #000;
    	margin: 0;
    	padding: 0;
    }
    
    #main { /* DOADATKOWY BLOK OBEJMUJACY*/
    	width: 960px;
    	margin: 0 auto;
    }
    
    #fixer { /* DODATKOWY BLOK ZAKRYWAJACY GORE STRONY -odsteb miedzy przegladarka a glownym blokiem (top) 25px */
    	width: 960px;
    	height: 25px;
    	background: #aff;
    }
    
    #top { /*blok obejmujacy - containing block*/
    	width: 960px; /*calosc 780px;*/
    	margin: 0 auto; /*powoduje ze blok glowny strony jest wysrodkowany*/
    	top: 0px;
    	position: fixed;
    }
    
    #NAGLOWEK {
    	background-color: #888;
    	height: 175px;
    }
    
    #MENU {
    	width: 200px; /*150px;*/
    	float: left;
    	overflow: hidden; /*w przypadku gdy zawartosc jest zbyt szeroka nastapi obciecie poprzez ukrycie za duzego elementu*/
    	background-color: #ccc;
    
    	top:200px;       /* te 3 linijki odpowiadaja za to ze */
    	bottom: 25px;    /* odrywaja warstwe (fixed) */
    	position: fixed; /* i rozciagaja automatycznie o 200px od gory i o szerokosc stopki na dole*/
    }
    
    #REKLAMA {
    	width: 160px;
    	float: right;
    	overflow: hidden;
    	background-color: #ccc;
    	
      top: 200px;
    	bottom: 25px; /* te 4 linijki rozciagaja w pione ale licza od lewej krawedzi PRZEGLADARKI a nie TOPu czy MAINa*/
    	position: fixed;
    	margin-left: 800px; /*a to zalatwia sprawe :), tyle czasu a to kwestia jednego polecenia */
    }
    
    #TRESC {
    	width: 600px; /* zawartosc, tresc 480px; */
    	overflow: hidden;
    	background-color: #fff;
    	margin: 200px auto 0px 200px;
    }
    
    #STOPKA {
    	clear: both; /*powoduje ze stopka nie wskakuje obok menu gdy jest malo tresci*/
    	width: 100%; /*eliminacja bledu IE6 w pozniejszych zbedne*/
    	background-color: #888;
    }
    What is wrong?

  2. #2
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Problem is with header, menu on left and right block (#NAGLOWEK, #MENU, #REKLAMA). In Chrome and Safari that blocks are positioned to right side of web browser.

    What is wrong?
    Hello 123tomek, Welcome to SitePoint!

    The problem is that position:fixed elements are positioned from the viewport. It looks like you may have understood that since you only set top: & bottom: offset positions. If you try to use left: or right: positions on a fixed element within a fixed width page it will not work.

    If you nest the fixed element within a float you can control it's horizontal positions without setting left: or right: positions. It looks like you may have been on the right track but you tried to float and fix at the same time, the fixed positioning wins out over the float.

    The problem was right here in chrome and safari, it was using the 800px left margin to position from the left edge of your #main wrapping div.
    Code:
    #REKLAMA {
        width: 160px;
        float: right;
        overflow: hidden;
        background-color: #ccc;
        
          top: 200px;
        bottom: 25px; /* te 4 linijki rozciagaja w pione ale licza od lewej krawedzi PRZEGLADARKI a nie TOPu czy MAINa*/
        position: fixed;
        margin-left: 800px; /*a to zalatwia sprawe :), tyle czasu a to kwestia jednego polecenia */
    }
    The easiest way to fix this and have it work in all browsers is to nest your fixed side columns in floated parent divs. As I mentioned above, then you do not have to set left and right positions for the fixed divs.

    Here is another example that is similar to what you were doing:
    http://www.css-lab.com/demos/fixed/c...-ft-sides.html

    Here is your code with the adjustments in place
    (I wasn't sure what you wanted to do with the footer so I made it fixed too)

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl">
    <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>STOS</title>
    
    <style type="text/css">
    
    html, body {
        background-color: #aff;
        color: #000;
        margin: 0;
        padding: 0;
    }
    #main {
        width: 960px;
        margin: 0 auto;
        background:red
    }
    /*#fixer {
        width: 960px;
        height: 25px;
        background: #aff;
    } use top border in place of this div*/
    
    #top {
        width: 960px;
        height: 175px;
        border-top:25px solid #aff; /*use border in place of #fixer div*/
        /*margin: 0 auto;*/
        top: 0;
        position: fixed;
        background-color: #888;
    }
    #left {/*nest #MENU in floated #left*/
        float: left;
        width: 200px;
    }
    #MENU {
        width: 200px;
        /*float: left;*/
        overflow: hidden;
        background-color: #ccc;
        top: 200px;
        bottom: 25px;
        position: fixed;
    }
    #right {/*nest #REKLAMA in floated #right*/
        float: right;
        width: 160px;
    }
    #REKLAMA {
        width: 160px;
        /*float: right;*/
        overflow: hidden;
        background-color: #ccc;
        top: 200px;
        bottom: 25px;
        position: fixed;
        /*margin-left: 800px;*/
    }
    #TRESC {
        width: 600px;
        overflow: hidden;
        background-color: #fff;
        margin: 0 160px 0 200px;
        padding:200px 0 25px 0; /*use padding to preserve fixed header and footer*/
    }
    #TRESC p {margin:2em 1em; line-height:1.5;}
    
    #STOPKA {
        position:fixed;
        left:0; bottom:0;
        width: 100%;
        height: 25px;
    }
    #innerfoot {
        width: 960px;
        height: 25px;
        margin: 0 auto;
        text-align:center;
        background-color: #888;
    }
    </style>
    </head>
      
    <body>
        <div id="main">
            <div id="top">
                NAGLOWEK szablonu
            </div>
            
            <div id="left">
                <div id="MENU">Menu nawigacyjne</div>
            </div>
            <div id="right">
                <div id="REKLAMA">Dodatkowe informacje</div>
            </div>
            
            <div id="TRESC">
                <p>TRESC</p>
                <p>Lorem ipsum dolor sit amet consectetuer pretium dolor mauris turpis tempus. Metus Pellentesque 
                lorem fringilla porttitor quis massa vitae augue consequat nibh. Vestibulum semper convallis nisl 
                elit Mauris odio augue enim.</p>
                <p>Interdum Nunc diam pharetra cursus non sed vel libero iaculis neque. Nulla venenatis sed dolor 
                eget Suspendisse Curabitur Vivamus Pellentesque libero id. Massa non quis purus nulla auctor id vel 
                eget sem nibh. Montes wisi lacus Lorem semper condimentum eros sapien a Curabitur.</p>
                <p>Lorem ipsum dolor sit amet consectetuer pretium dolor mauris turpis tempus. Metus Pellentesque 
                lorem fringilla porttitor quis massa vitae augue consequat nibh. Vestibulum semper convallis nisl 
                elit Mauris odio augue enim.</p>
                <p>Interdum Nunc diam pharetra cursus non sed vel libero iaculis neque. Nulla venenatis sed dolor 
                eget Suspendisse Curabitur Vivamus Pellentesque libero id. Massa non quis purus nulla auctor id vel 
                eget sem nibh. Montes wisi lacus Lorem semper condimentum eros sapien a Curabitur.</p>
            </div>
            
            <div id="STOPKA">
                <div id="innerfoot">STOPKA serwisu</div>
            </div>
        </div>
    </body>
    </html>

  3. #3
    SitePoint Member
    Join Date
    Nov 2010
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you.

    But it's one little problem wit this. When on #TRESC will be less text is hole between #TRESC and #STOPKA.
    The same problem is in demo on http://www.css-lab.com/demos/fixed/c...-ft-sides.html - it's visible when you cut some text and change background color.

    #TRESC should be adhered (sticked) to #STOPKA.

  4. #4
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    When on #TRESC will be less text is hole between #TRESC and #STOPKA.
    Hi,
    If you are wanting a sticky footer then that will require some more work. It sounds like you need to set min-height:100% on your #main div if you do not want to see any gaps (holes) between #TRESC and #STOPKA. The BG color would go on #main then.

    #TRESC should be adhered (sticked) to #STOPKA.
    Yes, I had mentioned in my last post that I was not sure what you wanted to do with it.

    I will make it a sticky footer for now and see if that is what you are wanting.

    Try this code:

    Code HTML4Strict:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl">
    <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>STOS</title>
     
    <style type="text/css">
    html, body {
        height:100%;
    }
    body {
        margin: 0;
        padding: 0;
        color: #000;
        background-color: #aff;
    }
    #main {
        min-height:100%;
        width: 960px;
        margin: 0 auto;
        background-color: #fff;
    }
    #top {
        width: 960px;
        height: 175px;
        border-top:25px solid #aff; /*use border in place of #fixer div*/
        /*margin: 0 auto;*/
        top: 0;
        position: fixed;
        background-color: #888;
    }
    #left {/*nest #MENU in floated #left*/
        float: left;
        width: 200px;
    }
    #MENU {
        width: 200px;
        /*float: left;*/
        overflow: hidden;
        background-color: #ccc;
        top: 200px;
        bottom: 25px;
        position: fixed;
    }
    #right {/*nest #REKLAMA in floated #right*/
        float: right;
        width: 160px;
    }
    #REKLAMA {
        width: 160px;
        /*float: right;*/
        overflow: hidden;
        background-color: #ccc;
        top: 200px;
        bottom: 25px;
        position: fixed;
        /*margin-left: 800px;*/
    }
    #TRESC {
        width: 600px;
        overflow: hidden;
        background-color: #fff;
        margin: 0 160px 0 200px;
        padding:200px 0 50px 0; /*use padding to preserve fixed header and sticky footer*/
    }
    #TRESC p {margin:1em; line-height:1.3;}
     
    #STOPKA {
        width: 960px;
        height: 25px;
        margin: -50px auto 0;
        background-color: red;
    }
    #innerfoot {
        width: 600px;
        height: 25px;
        margin: 0 0 0 200px;
        text-align:center;
        background-color: #888;
    }
    #fixer {
        position:fixed;
        left:0; bottom:0;
        width:100%;
        height: 25px;
        background: #aff;
    } 
    </style>
    </head>
     
    <body>
        <div id="main">
            <div id="top">
                NAGLOWEK szablonu
            </div>
     
            <div id="left">
                <div id="MENU">Menu nawigacyjne</div>
            </div>
            <div id="right">
                <div id="REKLAMA">Dodatkowe informacje</div>
            </div>
     
            <div id="TRESC">
                <p>TRESC</p>
                <p>Lorem ipsum dolor sit amet consectetuer pretium dolor mauris turpis tempus. Metus Pellentesque 
                lorem fringilla porttitor quis massa vitae augue consequat nibh. Vestibulum semper convallis nisl 
                elit Mauris odio augue enim.</p>
                <p>Interdum Nunc diam pharetra cursus non sed vel libero iaculis neque. Nulla venenatis sed dolor 
                eget Suspendisse Curabitur Vivamus Pellentesque libero id. Massa non quis purus nulla auctor id vel 
                eget sem nibh. Montes wisi lacus Lorem semper condimentum eros sapien a Curabitur.</p>
                <p>Lorem ipsum dolor sit amet consectetuer pretium dolor mauris turpis tempus. Metus Pellentesque 
                lorem fringilla porttitor quis massa vitae augue consequat nibh. Vestibulum semper convallis nisl 
                elit Mauris odio augue enim.</p>
            </div>
        </div><!--end main-->
     
        <div id="STOPKA">
            <div id="innerfoot">STOPKA serwisu</div>
        </div>
        <div id="fixer"></div><!--hide main BG color-->
    </body>
    </html>

  5. #5
    SitePoint Member
    Join Date
    Nov 2010
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Rayzur View Post

    I will make it a sticky footer for now and see if that is what you are wanting.
    Not exactlly. The last code was much better. Footer was ok in first example and demo on css-lab.

    But #TRESC wasn't.

    When is to less text in #TRESC this box didn't sticky to footer (#STOPKA).

    I want that #TRESC always was sticky to footer. For example when I put backgroud image to #TRESC (background: url("images/somethink.jpg") repeat; ) then this must be always visible. The background must be visible even when there is not enough text on #TRESC.

    Now is gap (hole) with #main background color.

  6. #6
    SitePoint Member
    Join Date
    Nov 2010
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I added to your first example:

    Code:
    #srodek {
        width: 600px;
    }
    
    #TRESC {
        width: 600px;
        //overflow: hidden;
        background-color: #222;
        margin: 0 160px 0 200px;
        //padding:200px 0 25px 0; /*use padding to preserve fixed header and footer*/
        
        overflow: auto; /*changed overflow hidden to auto and padding to top*/
        top: 200px;
        bottom: 25px;
        position: fixed;
    }
    and put div #TRESC inside div #srodek.

    http://89.25.186.53/sts/index_f1_1.php

    It's near this that I need. But when on resize website to little window, scroll bar must be not inside box #TRESC but on web browser.

  7. #7
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    For example when I put backgroud image to #TRESC (background: url("images/somethink.jpg") repeat; ) then this must be always visible. The background must be visible even when there is not enough text on #TRESC.
    If you would have put the BG image on #main then it would have worked. The #main div is the one that has min-height:100%.

    But when on resize website to little window, scroll bar must be not inside box #TRESC but on web browser.
    You need to remove the fixed positioning and overflow:auto from #TRESC then.

    Footer was ok in first example and demo on css-lab.
    Yeah, that was a fixed footer, not a sticky footer. We are having some communication problems here.

    One question though, Do you want the footer fixed to the very bottom or 25px from bottom like sidebars were originally?

    I think I know what you want now though, I'll post back shortly.

  8. #8
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    One question though, Do you want the footer fixed to the very bottom or 25px from bottom like sidebars were originally?
    I went ahead and left 25px at the bottom like your original example.

    This should work according to what you have requested.

    http://www.css-lab.com/test/123tomek.html

    Code HTML4Strict:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>STOS</title>
     
    <style type="text/css">
    html, body {
        height:100%;
    }
    body {
        margin: 0;
        padding: 0;
        color: #000;
        background-color: #aff;
    }
    #main {
        min-height:100%;
        width: 960px;
        margin: 0 auto;
        background: #8D8DFF url(images/mainbg.jpg); /*Background for #tresc */
    }
    #top {
        position: fixed;
        top: 0;
        width: 960px;
        height: 175px;
        border-top:25px solid #aff; /*use border in place of #fixer div*/
        background: #888;
    }
    #left {/*nest #menu in left float*/
        float: left;
        width: 200px;
    }
    #menu {
        width: 200px;
        position: fixed;
        top: 200px;
        bottom:25px;
        z-index:1;/*layer above #stopka*/
        overflow: hidden;
        background: #ccc;
    }
    #right {/*nest #reklama in right float*/
        float: right;
        width: 160px;
    }
    #reklama {
        width: 160px;
        position: fixed;
        top: 200px;
        bottom: 25px;
        z-index:1;/*layer above #stopka*/
        overflow: hidden;
        background: #ccc;
    }
    #tresc {
        width: 600px;
        overflow: hidden;
        margin: 0 160px 0 200px;
        padding:200px 0 50px 0; /*use padding to preserve fixed header and footer*/
        /*background: #fff; NO BACKGROUND HERE - MOVED TO #MAIN*/
    }
    #tresc p {
        margin:1em;
        line-height:1.3;
    }
    /* Footer */
    #stopka {
        position:fixed;
        left:50%; bottom:0;
        width: 960px;
        height: 25px;
        margin: 0 0 0 -480px;
        background: orange;
        border-bottom: 25px solid #aff; /*use border to hide #main BG color*/
    }
    #innerfoot {
        width: 600px;
        height: 25px;
        margin: 0 0 0 200px;
        text-align:center;
        background: #888;
     
    }
     
    </style>
    </head>
     
    <body>
        <div id="main">
            <div id="top">
                NAGLOWEK szablonu
            </div>
     
            <div id="left">
                <div id="menu">Menu nawigacyjne</div>
            </div>
            <div id="right">
                <div id="reklama">Dodatkowe informacje</div>
            </div>
     
            <div id="tresc">
                <p>TRESC</p>
                <p>Lorem ipsum dolor sit amet consectetuer pretium dolor mauris turpis tempus. Metus Pellentesque 
                lorem fringilla porttitor quis massa vitae augue consequat nibh. Vestibulum semper convallis nisl 
                elit Mauris odio augue enim.</p>
                <p>Interdum Nunc diam pharetra cursus non sed vel libero iaculis neque. Nulla venenatis sed dolor 
                eget Suspendisse Curabitur Vivamus Pellentesque libero id. Massa non quis purus nulla auctor id vel 
                eget sem nibh. Montes wisi lacus Lorem semper condimentum eros sapien a Curabitur.</p>
                <p>Lorem ipsum dolor sit amet consectetuer pretium dolor mauris turpis tempus. Metus Pellentesque 
                lorem fringilla porttitor quis massa vitae augue consequat nibh. Vestibulum semper convallis nisl 
                elit Mauris odio augue enim.</p>
            </div>
        </div><!--end main-->
     
        <div id="stopka">
            <div id="innerfoot">STOPKA serwisu</div>
        </div>
     
    </body>
    </html>


Bookmarks

Posting Permissions

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