Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    Regular Coder Ludatha's Avatar
    Join Date
    Jan 2008
    Posts
    250
    Thanks
    51
    Thanked 5 Times in 5 Posts

    Bug in Firefox? White space at the bottom of my site

    For some bizzar reason my site works fine with IE but not in Firefox...

    http://www.ludatha.com/test/index.php

    In Firefox there is a white space at the bottom of every page. It is 13px high.
    It doesn't appear in IE

    My Layout CSS:

    Code:
    /****************************************************************/
    /*   Design:   Ludatha - Dark                                   */
    /*   File:     Grid Toolbox                                     */
    /*--------------------------------------------------------------*/
    /*   Design:   design.ludatha.com                               */
    /*   Date:     Febuary 11, 2008                                 */
    /*--------------------------------------------------------------*/
    /*   Copyright: Copright to Ludatha Ltd. All Rights Reserved    */
    /****************************************************************/
    
    /******************/
    /* GLOBAL LAYOUT  */
    /******************/
    
     body {font-size:62.5%; background-color:#0c0c0c; background-image:url(../img/bg.gif); font-family:arial,sans-serif;} /*Font-size: 1.0em = 10px when browser default size is 16px*/
    .container {width:1012px; padding-top:0px; padding-bottom:0px; margin:0 auto; font-size:1.0em;}
    .header {width:1012px; min-height:130px /*Non-IE6*/; height:auto !important /*Non-IE6*/; height:130px /*IE6*/; border-left:solid 1px rgb(200,200,200); border-right:solid 1px rgb(200,200,200); background:rgb(225,225,225) url(../img/bg_header.jpg) repeat-x /*Total header background image entered here. Height: 125px*/; font-size:1.0em;}
    .header-top {clear:both; width:1012px; height:174px; background:rgb(218,218,218) url(../img/header-bg.gif) /*Top header background image entered here. Height: 100px*/; font-size:1.0em;}
    .header-bottom {clear:both; width:1012px; min-height:30px /*Non-IE6*/; height:auto !important /*Non-IE6*/; height:30px /*IE6*/; background:rgb(225,225,225) url(../img/ad-bg.gif) repeat-x /*Bottom header background image entered here: Height: 25 px*/; font-size:1.0em;}
    .navbar {white-space:nowrap /*IE hack*/; float:left; width:1012px; height:32px; border-left:solid 1px rgb(200,200,200); border-right:solid 1px rgb(200,200,200); background:rgb(225,225,225) url(../img/nav-bg.gif); font-family:tahoma,arial,sans-serif; font-size:130% !important /*Non-IE6*/; font-size:120% /*IE6*/;} /*Color navigation bar normal mode*/
    .main {clear:both; width:1012px; padding:0px 0 20px 0; border-left:solid 1px rgb(200,200,200); border-right:solid 1px rgb(200,200,200); background-color:#0c0c0c; font-size:1.0em;}
    .content {
    	display:inline; /*Fix IE floating margin bug*/
    	padding:24px 24px 24px 24px;
    	float:left;
    	width:636px;
    	background-color:#0c0c0c;
    	background-position:24px 24px 24px 24px;
    	font-size:1.0em;
    	overflow:visible !important /*Non-IE6*/;
    	overflow:hidden /*IE6*/;
    }
    .subcontent {display:inline /*Fix IE floating margin bug*/; float:right; width:328px; background-color:rgb(200,200,200); font-size:1.0em; overflow:visible !important /*Non-IE6*/; overflow:hidden /*IE6*/;}
    .footer {clear:both; width:1012px; padding:1.0em 0 1.0em 0; border-left:solid 1px rgb(200,200,200); border-right:solid 1px rgb(200,200,200); background-color:rgb(225,225,225); font-size:1.1em !important /*Non-IE6*/; font-size:1.0em /*IE6*/; overflow:visible !important /*Non-IE6*/; overflow:hidden /*IE6*/;}
    
    /****************/
    /*  HEADER-TOP  */
    /****************/
    
    /* Sitename and slogan */
    .sitelogo {width:70px; height:70px; position:absolute; z-index:1; margin:15px 0 0 15px; background:url(../img/bg_logo.gif);}
    .sitename {width:300px; height:70px; position:absolute; z-index:1; margin:27px 0 0 95px; overflow:hidden;}
    .sitename h1 {font-family:"trebuchet ms",arial,sans serif; font-weight:normal; font-size:290% !important /*Non-IE6*/; font-size:260% /*IE6*/;}
    .sitename h2 {font-family:verdana,arial,sans serif; margin-top:-5px; padding-bottom:2px; color:rgb(125,125,125); height:20px; font-weight:normal; font-size:130% !important /*Non-IE6*/; font-size:120% /*IE6*/;}
    .sitename a{text-decoration:none; color:rgb(125,125,125);}
    .sitename a:hover {text-decoration:none;}
    
    /* Button navigation */
    .navbutton {width:600px; position:absolute; z-index:2; margin-top:13px; margin-left:547px !important /*Non-IE6*/; margin-left:550px /*IE6*/;}
    .navbutton ul {float:right;}
    .navbutton li {display:inline; list-style:none;}
    .navbutton li a {padding-left:3px;}
    .navbutton a:hover {text-decoration:none;}
    .navbutton a img {height:32px;}
    
    /* Global navigation */
    .navglobal {width:600px; position:absolute; z-index:3; margin-top:65px; margin-left:349px !important /*Non-IE6*/; margin-left:351px /*IE6*/;}
    .navglobal ul {float:right; font-weight:normal;}	
    .navglobal li {display:inline; list-style:none;}
    .navglobal li a {display:block; float:left; padding:2px 5px 2px 5px; color:rgb(125,125,125); text-decoration:none; font-size:130% !important /*Non-IE6*/; font-size:120% /*IE6*/;}
    .navglobal a:hover {text-decoration:none; color:rgb(255,255,255);}
    
    /*******************/
    /*  HEADER BOTTOM  */
    /*******************/
    
    /* Breadcrumb */
    .header-bottom ul {float:left; text-align:center; width:1012px; list-style:none; background-image: url(../img/celltitle_level1.gif);}
    .header-bottom ul li {display:inline; padding:0 0 0 10px; background:transparent url(../img/bg_bullet_arrow.gif) no-repeat 0 50%; font-size:110% !important /*Non-IE6*/; font-size:100% /*IE6*/;}
    .header-bottom ul li.nobullet {display:inline; padding:0; background:none; color:rgb(75,75,75);}
    .header-bottom ul a {color:rgb(125,125,125); font-weight:bold; text-decoration:none;}
    .header-bottom ul a:hover {color:rgb(255,255,255);}
    
    /* Search form */
    .header-bottom .searchform {float:right; width:430px;}
    .header-bottom .searchform form fieldset {float:right; border:none; padding-top:5px; padding-right:1px;}
    .header-bottom .searchform input.field {width:15.0em; height:1.2em; padding:1px !important /*Non-IE6*/; padding:2px /*IE6*/; border:solid 1px rgb(200,200,200); background-color:rgb(255,255,255); font-size:110% !important /*Non-IE6*/; font-size:100% /*IE6*/;}
    .header-bottom .searchform input.button {width:4.5em; height:1.6em; background-color:rgb(240,240,240); border:solid 1px rgb(150,150,150); text-align:center; color:rgb(100,100,100); font-size:110% !important /*Non-IE6*/; font-size:100% /*IE6*/;}
    .header-bottom .searchform input.button:hover {cursor:pointer; border:solid 1px rgb(80,80,80); background-color:rgb(220,220,220); color:rgb(80,80,80);}
    
    /********************/
    /*  NAVIGATION BAR  */
    /********************/
    
    /* Main menu */
    .navbar ul {list-style-type:none; background:url(../img/nav-bg.gif); }
    .navbar ul li {float:left; z-index:auto !important /*Non-IE6*/; z-index:1000 /*IE6*/; background:none; }
    .navbar ul li a {float:none !important /*Non-IE6*/; float:left /*IE-6*/; display:block; height:32px; line-height:32px; padding:0 16px 0 16px; text-decoration:none; font-weight:bold; color:rgb(100,100,100); border-right:solid 0px rgb(215,215,215);}
    .navbar ul li ul {display:none; border:none;}
    
    /* Submenu (Non-IE6 hovering) */
    .navbar ul li:hover {position:relative;} /*Sylvain IE hack*/
    .navbar ul li:hover a {background-color:rgb(235,235,235); text-decoration:none;} /*Color main cells hovering mode*/
    .navbar ul li:hover ul {display:block; width:10.0em; position:absolute; z-index:1000; top:2.4em; margin-top:0.1em; left:0; padding:0px 16px 0px 16px; border-top:solid 1px rgb(215,215,215);}
    .navbar ul li:hover ul li a {white-space:normal; display:block; width:10.0em; height:auto; line-height:1.3em; margin-left:-17px; padding:4px 16px 4px 16px; border-right:solid 1px rgb(215,215,215); border-left:solid 1px rgb(215,215,215); border-bottom: solid 1px rgb(215,215,215); background-color:rgb(235,235,235); font-weight:normal; color:rgb(100,100,100);} /*Color subcells normal mode*/
    .navbar ul li:hover ul li a:hover {background-color:rgb(225,225,225); text-decoration:none;} /*Color subcells hovering mode*/
    
    /* Submenu (IE6 hovering) */
    .navbar table {position:absolute; z-index:1000; top:0px; left:-1px; border-collapse:collapse;}
    .navbar ul li a:hover {position:relative /*Sylvain IE hack*/; z-index:1000 /*Sylvain IE hack*/; background-color:rgb(235,235,235); text-decoration:none;} /*Color main cells hovering mode*/
    .navbar ul li a:hover ul {display:block; width:10.0em; position:absolute; z-index:1000; top:3.1em; t\op:3.0em; left:0px; marg\in-top:0.1em; border-top:solid 1px rgb(215,215,215); }
    .navbar ul li a:hover ul li a {white-space:normal; display:block; w\idth:10.0em; height:1px; line-height:1.3em; padding:4px 16px 4px 16px; border-right:solid 1px rgb(215,215,215); border-left:solid 1px rgb(215,215,215); border-bottom: solid 1px rgb(215,215,215); background-color:rgb(235,235,235); font-weight:normal; color:rgb(100,100,100);} /*Color subcells normal mode*/
    .navbar ul li a:hover ul li a:hover {background-color:rgb(225,225,225); text-decoration:none;} /*Color subcells hovering mode*/
    
    /*************/
    /*  CONTENT  */
    /*************/
    
    /* Content cell (no subcells) */
    .content-cell {width:636px; background-color:#dadada;}
    
    /* Content cell + subcells (subcells are NOT in boxform)  */
    .content-cell-nobox {width:676px; background-color:rgb(255,255,255);}
    .content-subcell-left-nobox {display:inline; float:left; width:337px; border-right:solid 1px rgb(215,215,215) /*Use this statement if left column is longer than the right column. Activate by removing "xx_" from property name*/; background-color:rgb(255,255,255);}
    .content-subcell-right-nobox {display:inline; float:right; width:337px; border-left:solid 1px rgb(215,215,215)/*Use this statement if right columnn is longer than the left column. De-activate by adding "xx_" to propery name*/; background-color:rgb(255,255,255);}
    
    /* Content cell + subcells (subcells ARE in boxform) */
    .content-cell-box {width:676px; background-color:transparent;}
    .content-subcell-left-box {display:inline; float:left; width:333px; background-color:transparent;}
    .content-subcell-right-box {display:inline; float:right; width:333px;  background-color:transparent;}
    .content-subcell-cell-box {width:333px; background-color:rgb(255,255,255);}
    
    /***************/
    /* SUBCONTENT  */
    /***************/
    
    .subcontent-cell {width:328px; float:right; background-color:rgb(255,255,255);}
    
    /************/
    /*  FOOTER  */
    /************/
    .footer p {clear:both; line-height:0em; text-align:center; color:rgb(125,125,125); font-weight:bold; font-size:110%;}
    .footer p.credits {clear:both; font-weight:normal;}
    .footer a, .footer a:visited {text-decoration:underline; color:rgb(125,125,125);}
    .footer a:hover {text-decoration:none; color:rgb(0,0,0);}
    
    /*********************/
    /*  ROUNDED CORNERS  */
    /*********************/
    
    /* Page */
    .corner-top {width:978px; height:10px; background:transparent url(../img/bg_corner_top.gif) no-repeat; overflow:hidden;}
    .corner-bottom {width:978px; height:10px; padding-bottom:20px; background:transparent url(../img/bg_corner_bottom.gif) no-repeat; overflow:hidden;}
    
    /* Content */
    .content-cell-corner-top {clear:both; width:676px; height:7px; background:white url(../img/content-top.png) no-repeat; overflow:hidden;}
    .content-cell-corner-bottom {width:637px; height:29px; background:transparent url(../img/content-bottom.gif) no-repeat;}
    .content-subcell-corner-top {width:333px; height:7px; background:transparent url(../img/bg_corner_content_subcell_top.gif) no-repeat; overflow:hidden;}
    .content-subcell-corner-bottom {width:333px; height:7px; margin-bottom:0px; background:transparent url(../img/bg_corner_content_subcell_bottom.gif) no-repeat; overflow:hidden;}
    
    /* Subcontent */
    .subcontent-cell-corner-bottom {clear:both; width:328px; height:6px; margin-bottom:0px; background:transparent url(../img/bg_corner_subcontent_cell_bottom.gif) no-repeat; overflow:hidden;}
    
    /******************/
    /*  CLEAR FLOATS  */
    /******************/
    .container:after, .header:after, .header-top:after, .header-bottom:after, .navbar:after, .main:after, .content:after, .content div:after, .subcontent:after, .subcontent div:after, .footer:after {content:"."; display:block; height:0; clear:both; visibility:hidden;}
    .content-cell:after, .content-subcell-left:after, .content-subcell-right:after, .content-subcell-cell:after, .content-cell-box:after, .content-subcell-left-box:after, .content-subcell-right-box:after, .content-subcell-cell-box:after, .subcontent-cell:after {content:"."; display:block; height:0; clear:both; visibility:hidden;}
    .content-cell-corner-top:after, .content-cell-corner-bottom:after, .content-subcell-corner-top:after, .content-subcell-corner-bottom:after, .subcontent-cell-corner-top:after, .subcontent-cell-corner-bottom:after {content:"."; display:block; height:0; clear:both; visibility:hidden;}
     p:after {content:"."; display:block; height:0; /*clear:both; Do not use here to avoid paragraphs clearing next to images*/;  visibility:hidden;}
     
    /**************/
    /*  PRINTING  */
    /**************/
    /* To avoid that some layouts may break during printing */
    /* we remove one vertical border-line for the subcells  */                 
    @media print {.content-subcell-right-nobox {display:inline; float:right; width:337px; border-left:none; background-color:rgb(255,255,255);}}
    How do I remove it?

  • #2
    Senior Coder jcdevelopment's Avatar
    Join Date
    Oct 2007
    Location
    Cowboy Nation
    Posts
    2,182
    Thanks
    174
    Thanked 257 Times in 257 Posts
    what about adding to body

    Code:
    height:100%;
    does that make a difference?

  • #3
    Regular Coder Ludatha's Avatar
    Join Date
    Jan 2008
    Posts
    250
    Thanks
    51
    Thanked 5 Times in 5 Posts
    Quote Originally Posted by jcdevelopment View Post
    what about adding to body

    Code:
    height:100%;
    does that make a difference?
    Nah, nothing changes, thanks for the input

  • #4
    Regular Coder
    Join Date
    Feb 2007
    Location
    Canada
    Posts
    924
    Thanks
    10
    Thanked 56 Times in 55 Posts
    .main { padding-bottom:0; }

    see if that works. it is currently at 20 px. firebug says it should work.
    and consider making that div an id instead of a class? are there any others div's using the same css?

  • #5
    Regular Coder Ludatha's Avatar
    Join Date
    Jan 2008
    Posts
    250
    Thanks
    51
    Thanked 5 Times in 5 Posts
    Nope, still happens...
    I wouldn't be that annoyed if it was in IE, but Firefox... the only browser that actually works doesn't...

  • #6
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,798
    Thanks
    8
    Thanked 131 Times in 129 Posts
    add:
    Code:
    overflow: hidden;
    to your container. The content is floated and your not clearing your floats.
    Stop making things so hard on yourself.
    i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis

  • #7
    Regular Coder Ludatha's Avatar
    Join Date
    Jan 2008
    Posts
    250
    Thanks
    51
    Thanked 5 Times in 5 Posts
    That didnt work, but I looked through the errors and all I had to do was remove
    background-position:24px 24px 24px 24px;

    It's fixed now


  •  

    Posting Permissions

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