SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Addict MikesBarto2002's Avatar
    Join Date
    May 2006
    Location
    New York City
    Posts
    317
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Unhappy Background image not repeating in FF

    The background image that I have in place isn't repeating. I have it repeating repeat-y so that the two columns it is behind will both have the same bottom. I surrounded the two columns with a
    HTML Code:
    <div id="content"></div>
    tag, and the background image is attached to this tag. It works fine in IE, but not at all in FF. Any ideas?

    Here is the site, and here is the css...

    Code:
    body, html{
    	margin : 0 auto;
    	padding : 0;
    	color : #000;
    	background : url("../pics/background_main.jpg") repeat-x top #000;
    }
    
    body{
    	min-width : 800px;
    }
    
    .clearfix:after{
    	content : "."; 
    	display : block; 
    	height : 0; 
    	clear : both; 
    	visibility : hidden;
    }
    
    .clearfix{
    	display : inline;
    }
    
    /* mac hide \*/
    * html .clearfix{
    	height : 1%;
    }
    
    .clearfix{
    	display : block;
    }
    /* End hide */
    
    /*-----------------------------*/
    /*---------- LAYOUT ----------*/
    /*-----------------------------*/
    
    #container{
    	width : 800px;
    	margin : 0 auto;
    	padding : 0;
    }
    
    #toptaskbar{
    	width : 800px;
    	font-family : Arial, Verdana;
    	font-size : 13px;
    	font-weight : bold;
    	color : #FFF;
    	background : #000;
    	margin : 0;
    	padding : 5px 0;
    }
    
    #toptaskbar a{
    	font-family : Arial, Verdana;
    	font-size : 12px;
    	font-weight : bold;
    	color : #FFF;
    }
    
    #toptaskbar a:hover{
    	font-family : Arial, Verdana;
    	font-size : 12px;
    	font-weight : bold;
    	color : #FF0000;
    }
    
    #toptaskbar ul{
    	list-style : none;
    }
    
    #toptaskbar ul li{
    	display : inline;
    }
    
    #toptaskbar ul li form{
    	display : inline;
    }
    
    #toptaskbar form{
    	padding-left : 40px;
    }
    
    #toptaskbar form label{
    	padding-right : 3px;
    	font-family : Arial, Verdana;
    	font-size : 12px;
    	font-weight : bold;
    	color : #FFF;
    }
    
    #header{
    	width : 798px;
    	margin : 0;
    	padding : 0;
    	border-left : 1px solid #000;
    	border-right : 1px solid #000;
    	background : #000;
    }
    
    #navigation{
    	width : 800px;
    	text-align : center;
    	background : #000;
    	z-index : 500;
    	padding-top : 3px;
    }
    
    #hirschfeld{
    	width : 798px;
    	margin : 0;
    	padding : 0;
    	background : #FFF;
    	border-left : 1px solid #000;
    	border-right : 1px solid #000;
    }
    
    #content{
    	width : 798px;
    	border-left : 1px solid #000;
    	border-right : 1px solid #000;
    	background : url("../pics/background_content.gif") repeat-y #FFF;
    }
    
    #left_home{
    	float : left;
    	width : 285px;
    	padding-left : 5px;
    	padding-right : 5px;
    	padding-bottom : 5px;
    	background : #FFF;
    	text-align : center;
    }
    
    #leftbox_home{
    	width : 285px;
    	background : #FFF;
    	font-family : Arial, Verdana;
    	font-size : 13px;
    	color : #000000;
    	text-align : left;
    }
    
    #leftbox_home a{
    	display : inline;
    	padding-left : 2px;
    	padding-right : 2px;
    	font-family : Arial, Verdana;
    	font-size : 16px;
    	font-weight : bold;
    	text-decoration : none;
    	color : #000;
    	background : #FEAC25;
    	border : 2px solid #000;
    }
    
    #right_home{
    	float : right;
    	width : 493px;
    	padding-left : 5px;
    	padding-right : 5px;
    	padding-bottom : 5px;
    	background : #FFF;
    	text-align : right;
    }
    
    #footer{
    	position : relative;
    	clear : both;
    	font-family : Arial, Verdana;
    	font-size : 11px;
    	font-weight : bold;
    	color : #FFF;
    	text-align : center;
    	padding-top : 10px;
    	padding-bottom : 10px;
    }
    
    #footer a{
    	font-family : Arial, Verdana;
    	font-size : 11px;
    	font-weight : bold;
    	color : #FFF;
    }
    
    #footer a:hover{
    	font-family : Arial, Verdana;
    	font-size : 11px;
    	font-weight : bold;
    	color : #FF0000;
    }
    
    h1{
    	font-family : Century Gothic, Arial, Verdana;
    	font-size : 24px;
    	font-weight : bold;
    	color : #000;
    }
    
    #right_home img{
    	border : 1px solid #000;
    }
    
    /*---------------------------------------*/
    /*---------- NAVIGATION MENU ----------*/
    /*---------------------------------------*/
    
    #navigation #nav, #navigation #nav ul{ 
    	padding : 0; 
    	margin : 0; 
    	list-style : none; 
    	width : 800px;
    	background : #000000;
    	text-align : center;
    }
    
    #navigation #nav a{ 
    	display : block; 
    	width : 10em; 
    } 
    
    #navigation #nav li{
    	position : relative;
    	float : left; 
    	width : 131px;
    	color : #FFFFFF;
    	font-family : Arial, Verdana;
    	font-weight : bold;
    	font-size : 13px;
    	background : #000000;
    	border : 1px solid #000000;
    }
    
    #navigation #nav li.nolink{ 
    	float : left; 
    	width : 133px;
    	color : #FFFFFF;
    	font-family : Arial, Verdana;
    	font-weight : bold;
    	font-size : 13px;
    	border : 1px solid #000000;
    	background : #000000;
    	height : 33px;
    }
    
    #navigation #nav li ul{ 
    	position : absolute; 
    	width : 10em; 
    	left : -999em; 
    	background : #000000;
    	text-align : left;
    	padding-left : 3px;
    	color : #FFFFFF;
    	font-family : Arial, Verdana;
    	font-weight : bold;
    	font-size : 13px;
    	border-top : 1px solid #000000;
    	border-bottom : 1px solid #000000;
    } 
    
    #navigation #nav li:hover ul, #navigation #nav li.sfhover ul{ 
    	left : -4px; 
    	top : 30px;
    }
    
    #navigation #nav li ul li{
    	font-family : Arial, Verdana;
    	font-size : 13px;
    	font-weight : bold;
    	color : #FFFFFF;
    	text-decoration : none;
    	padding-bottom : 5px;
    }
    
    #navigation #nav li ul li a{
    	font-family : Arial, Verdana;
    	font-size : 11px;
    	font-weight : bold;
    	color : #FFFFFF;
    	text-decoration : none;
    	padding-bottom : 2px;
    }
    
    #navigation #nav li ul li a:hover{
    	font-family : Arial, Verdana;
    	font-size : 11px;
    	font-weight : bold;
    	color : #EE0000;
    	text-decoration : none;
    	padding-bottom : 2px;
    }

  2. #2
    Winemaster bronze trophy BonRouge's Avatar
    Join Date
    Oct 2004
    Location
    Sendai, Japan
    Posts
    2,417
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    <div id="content" cless="clearfix"></div>

  3. #3
    Non-Member Egor's Avatar
    Join Date
    Jan 2004
    Location
    Melbourne, Australia
    Posts
    7,305
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Edit:



    Oh damn it, I'm late.


    Hi,

    Code:
    .clearfix:after{
    content : ".";
    display : block;
    height : 0;
    clear : both;
    visibility : hidden;
    }
    The float clearing fix isn't some magic that applies by itself. I did a search through your mark-up and found no reference to it. You will need to add the class to your float container.

    And it doesn't work fine in IE. It's a bug.


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
  •