SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  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)

    Question Having a layout issue

    I am having a layout issue. The site looks almost correct in IE and nowhere close in Mozilla. Here's the deal...

    The site looks pretty close in IE, so I would look at it there first to see what I am going for. The only thing is that I want to put a footer on the bottom of the page. If you look at the page in Mozilla, you can see the footer peaking out from behind the mess in the background. Also in Mozilla, everything in the body of the site is all jumbled, and I can't figure out what I am doing wrong.

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

    Code:
    body, html{
    	margin : 0 auto
    	padding : 0px;
    	background : url("../pics/background_main.jpg") repeat-x #FEAC25;
    	color : #000000;
    }
    
    body{
    	min-width : 900px;
    }
    
    
    .clearfix:after{
    	content : "."; 
    	display : block; 
    	height : 0; 
    	clear : both; 
    	visibility : hidden;
    }
    
    .clearfix{
    	display : inline-block;
    }
    
    /* mac hide \*/
    * html .clearfix{
    	height : 1%;
    }
    
    .clearfix{
    	display : block;
    }
    /* End hide */
    
    /*-----------------------------*/
    /*---------- LAYOUT ----------*/
    /*-----------------------------*/
    
    #container_top{
    	width : 900px;
    	margin : 0 auto;
    	background : url("../pics/background_containertop.gif") no-repeat;
    }
    
    #container_header{
    	width : 900px;
    	height : 210px;
    	margin : 0 auto;
    	background : url("../pics/background_containerheader.gif") no-repeat;
    }
    
    #toptaskbar{
    	position : relative;
    	top : 10px;
    	left : 200px;
    }
    
    #announcement{
    	position : relative;
    	top : 16px;
    	left : 629px;
    }
    
    #navigation{
    	position : relative;
    	top : 25px;
    	left : 220px;
    }
    
    #container_body{
    	width : 798px;
    	margin : 0 auto;
    	padding-top : 10px;
    	padding-left : 51px;
    	padding-right : 51px;
    	background : url("../pics/background_container.gif") repeat-y;
    }
    
    #leftcolumn{
    	float : left;
    	width : 399px;
    	text-align : center;
    }
    
    #rightcolumn{
    	float : right;
    	width : 399px;
    	text-align : center;
    }
    
    #container_bottom{
    	width : 900px;
    	margin : 0 auto;
    	background : url("../pics/background_containerbottom.gif") no-repeat;
    }
    
    /*--------------------------------------------*/
    /*---------- FONTS, LINKS, COLORS ----------*/
    /*--------------------------------------------*/
    
    #toptaskbar, #toptaskbar a{
    	font-family : Arial, Verdana;
    	color : #000000;
    	font-size : 12px;
    	font-weight : bold;
    }
    
    #toptaskbar a:hover{
    	font-family : Arial, Verdana;
    	color : #FF0000;
    	font-size : 12px;
    	font-weight : bold;
    }
    
    /*---------------------------------------*/
    /*---------- NAVIGATION MENU ----------*/
    /*---------------------------------------*/
    
    #navigation #nav, #navigation #nav ul{ 
    	padding : 0; 
    	margin : 0; 
    	list-style : none; 
    	width : 600px;
    	background : #000000;
    	text-align : center;
    }
    
    #navigation #nav a{ 
    	display : block; 
    } 
    
    #navigation #nav li{
    	position : relative;
    	float : left; 
    	width : 100px;
    	color : #FFFFFF;
    	font-family : Arial, Verdana;
    	font-weight : bold;
    	font-size : 13px;
    	background : #000000;
    }
    
    #navigation #nav li.nolink{ 
    	float : left; 
    	width : 100px;
    	color : #FFFFFF;
    	font-family : Arial, Verdana;
    	font-weight : bold;
    	font-size : 13px;
    	background : #000000;
    }
    
    #navigation #nav li ul{ 
    	position : absolute; 
    	width : 115px; 
    	left : -999em; 
    	background : #000000;
    	text-align : left;
    	color : #FFFFFF;
    	font-family : Arial, Verdana;
    	font-weight : bold;
    	padding-left : 5px;
    	font-size : 13px;
    } 
    
    #navigation #nav li:hover ul, #navigation #nav li.sfhover ul{ 
    	left : 10px; 
    	top : 34px;
    }
    
    #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;
    }
    HHHHEEEEELLLLLPPPPPP PPPLLLLEEEEAAAASSSSEEEE!!!!!!!

  2. #2
    doing my best to help c2uk's Avatar
    Join Date
    May 2005
    Location
    Cardiff
    Posts
    1,832
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You seem to have some css errors:
    1.
    Code:
    body, html{
    	margin : 0 auto;
    	padding : 0px;
    	background : url("../pics/background_main.jpg") repeat-x #FEAC25;
    	color : #000000;
    }
    No ; after margin: 0 auto !
    2.
    Code:
    .clearfix{
    	display : inline-block;
    }
    Never came across display: inline-block; - try display:inline;

    If that doesn't do the trick, come back and we'll have another look.
    Dan G
    Marketing Strategist & Consultant

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

    Question Thanks, but...

    Thanks for the advice, that helped some margin issues, but I still can't get the footer to actually foot the bottom of the page. Any other advice?

  4. #4
    doing my best to help c2uk's Avatar
    Join Date
    May 2005
    Location
    Cardiff
    Posts
    1,832
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I would try and get rid of those position: relative; and that top & left positioning and work with float all the way. You then need to put a clear:both; in your containerbottom.

    For a good example and a bit of inspiration look at the first important topic and follow the link, there are more examples than just the 3 column liquid.
    Dan G
    Marketing Strategist & Consultant


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
  •