SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member
    Join Date
    Aug 2008
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS Footer is broken in IE, but works fine in FF

    Hey guys,

    I've been searching around for a couple days for this fix and I am stumped when it comes to the IE fix. I'm not much of a programmer so I've probably screwed something up but here's the code.

    CSS:

    Code:
    @charset "UTF-8";
    
    
    
    /*-- Resets --*/
    
    html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
    margin : 0;
    padding : 0;
    border : 0;
    font-size : 100%;
    font : inherit;
    vertical-align : baseline;
    
    }
    article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
    display : block;
    }
    
    body {
    line-height : 1;
    }
    
    ol, ul {
    list-style : none;
    }
    
    blockquote, q {
    quotes : none;
    }
    
    blockquote:before, blockquote:after, q:before, q:after {
    content : '';
    content : none;
    }
    
    table {
    border-collapse : collapse;
    border-spacing : 0;
    }
    
    /*-- End of Resets--*/
    
    
     * html #footer{top:0;} /*IE */
    
    
    body {
    margin : 0;
    padding : 0;
    font-family : Arial, Helvetica, sans-serif;
    background-color : #fff;
    line-height : 19px;
    background : #888280 url(img/main_container.png) repeat-x;
    
    }
    
    
    #main .container {
    background-image : url(img/container.png);
    background-repeat : no-repeat;
    padding:10px;
    }
    
    
    
    .container {
    color : #000;
    width : 950px;
    min-height : 100%;
    margin : 0 auto -4em; 
    
    }
    
    
    #grudge_left {
    background : url(img/grudge_left.png);
    height : 300px;
    width : 200px;
    margin-top : -338px;
    margin-left : -200px;
    }
    
    
    #grudge_right {
    float : right;
    background : url(img/grudge_right.png);
    height : 300px;
    width : 200px;
    margin-top : -300px;
    margin-right : -200px;
    }
    
    
    #header {
    margin-top : 0;
    }
    
    
    #logo h1, #logo small {
    margin : 0;
    display : block;
    text-indent : -9999px;
    }
    
    
    #logo {
    background-image : url(img/logo.gif);
    background-repeat : no-repeat;
    height : 83px;
    margin-top : -30px;
    }
    
    
    #testimonials {
    font-style : italic;
    margin-top : 85px;
    font-size : 18px;
    color : #737373;
    width : 500px;
    }
    
    
    #quote {
    margin-top : -43px;
    margin-left : 580px;
    }
    
    
    .block {
    margin : -10px 0 20px;
    }
    
    
    .block_inside {
    display : block;
    background : #ffffff url(img/showcase.png);
    padding : 77px;
    width : 795px;
    height : 147px;
    overflow : hidden;
    margin-left : 0;
    }
    
    
    .image_block {
    margin-top : 50px;
    margin-left : 0;
    background : url(img/block_content.png);
    width : 550px;
    height : 340px;
    position : fixed;
    color : #fff;
    }
    
    
    .image_text {
    margin-top : 30px;
    margin-left : 20px;
    background : url(img/content_title.png);
    width : 500px;
    height : 35px;
    position : relative;
    color : #fff;
    }
    
    
    .image_text1 {
    margin-top : 30px;
    margin-left : 20px;
    background : url(aboutus.png);
    width : 500px;
    height : 35px;
    position : relative;
    color : #fff;
    }
    
    
    .image_text2 {
    margin-top : 30px;
    margin-left : 20px;
    background : url(img/videos.png);
    width : 500px;
    height : 35px;
    position : relative;
    color : #fff;
    }
    
    
    .image_text5 {
    margin-top : 30px;
    margin-left : 20px;
    background : url(img/classes.png);
    width : 500px;
    height : 35px;
    position : relative;
    color : #fff;
    }
    
    
    .image_text3 {
    margin-top : 30px;
    margin-left : 20px;
    background : url(img/instructors.png);
    width : 500px;
    height : 35px;
    position : relative;
    color : #fff;
    }
    
    
    .image_text4 {
    margin-top : 30px;
    margin-left : 20px;
    background : url(img/calendar.png);
    width : 500px;
    height : 35px;
    position : relative;
    color : #fff;
    }
    
    
    #block_content {
    margin-left : 10px;
    margin-top : 50px;
    font-family : Verdana, Arial, Helvetica, sans-serif;
    font-size : 14px;
    width : 500px;
    position : relative;
    float : left;
    }
    
    
    .webform {
    width : 265px;
    font : 11px Arial, Helvetica, sans-serif;
    color : #fff;
    background-color : #888280;
    float : right;
    margin-top : -10px;
    margin-right : -360px;
    position : relative;
    }
    
    
    .webform label {
    display : block;
    width : 300px;
    font-weight : bold;
    }
    
    
    .webform .inputbox {
    background : url(img/form2.gif);
    height : 25px;
    width : 290px;
    padding : 4px 3px 2px 3px;
    margin : 2px 0 10px 3px;
    border : 1px solid #ccc;
    }
    
    
    .webform textarea {
    background : url(img/form2.gif);
    height : 100px;
    width : 290px;
    padding : 4px 3px 2px 3px;
    margin : 2px 0 10px 3px;
    border : 1px solid #fff;
    font : 13px Arial, Helvetica, sans-serif;
    }
    
    
    .submit {
    margin : 1px 0 0 3px;
    background-color : #eee;
    height : 30px;
    width : 70px;
    padding : 0;
    border : 1px solid #ccc;
    display : block;
    color : #000;
    }
    
    
    .questions {
    margin-left : 85px;
    margin-top : -21px;
    }
    
    
    h2 {
    margin : -5px 0 10px 0;
    font-size : 25px;
    font-family : Helvetica, Arial, Sans-serif;
    color : #fff;
    }
    
    
    h3 {
    color : #fff;
    font-size : 15px;
    }
    
    
    h4 {
    font-size : 15px;
    color : #fff;
    }
    
    
    small {
    color : #595856;
    font-weight : bold;
    font-size : 11px;
    display : block;
    margin-bottom : 15px;
    }
    
    
    a {
    color : #fff;
    text-decoration : none;
    }
    
    
    ul {
    margin-top : 20px;
    position : relative;
    right : 0;
    list-style : none;
    }
    
    
    ul li {
    border : 0 solid #fff;
    margin-top : 10px;
    float : right;
    list-style-type : none;
    overflow : hidden;
    display : inline;
    margin-left : 12px;
    }
    
    
    ul li a, ul li a:hover, ul li a:visited {
    text-decoration : none;
    color : #fff;
    font-family : Verdana, Arial, Helvetica, sans-serif;
    font-size : 10px;
    font-weight : bold;
    text-transform : uppercase;
    }
    
    
    .normalMenu, .normalMenu:visited, .hoverMenu, .hoverMenu:visited, .selectedMenu, .selectedMenu:visited {
    outline : none;
    padding : 10px 10px;
    display : block;
    }
    
    
    .hoverMenu, .hoverMenu:visited, .selectedMenu, .selectedMenu:visited {
    margin-top : -30px;
    background : #fff url(img/greenlink.gif) repeat-x;
    color : #fff;
    }
    
    
    .selectedMenu, .selectedMenu:visited {
    margin : 0;
    }
    
    
    .normalMenu, .normalMenu:visited {
    color : white;
    }
    
    
    p {
    margin : 0 0 15px 0;
    color : #fff;
    }
    
    
    /*-- Footer --*/
    
    #footer {
    font-family : Verdana, Arial, Helvetica, sans-serif;
    font-size : 15px;
    background : url(img/footer.png) repeat-x;
    position:fixed;
    bottom:0px;
    width:100%;
    height:60px;   /* Height of the footer */
    clear: both;
    
    
    }
    
    .footer_text {
    color : #fff;
    text-align : center;
    display: block;
    position: relative;
    margin-top:20px;
    }
    
    
    .footer_column {
    color : #fff;
    float : left;
    width : 190px;
    margin-right : -60px;
    }
    
    
    #footer .left {
    margin-left : 0;
    float : left;
    width : 400px;
    }
    
    
    #footer .right {
    margin-top : 20px;
    float : right;
    width : 300px;
    }
    
    
    #footer h3 {
    color : #e2dddc;
    text-transform : uppercase;
    font-size : 10px;
    }
    
    
    .footer_column li, .footer_column ul {
    margin : 0;
    padding : 0;
    }
    
    
    
    /*-- Nivo Slider --*/
    
    .nivoSlider {
    position : relative;
    width : 795px;
    height : 147px;
    background : url(img/loading.gif) no-repeat 50% 50%;
    }
    
    
    .nivoSlider img {
    width : 795px;
    height : 200px;
    position : absolute;
    display : none;
    }
    
    
    .nivoSlider a {
    border : 0;
    display : block;
    }
    
    
    .nivoSlider {
    position : relative;
    width : 100px;
    margin-left : -75px;
    margin-top : -75px;
    }
    
    
    .nivoSlider img {
    height : 500px;
    width : 1000px;
    position : absolute;
    top : 0;
    left : 0;
    }
    
    
    .nivoSlider a.nivo-imageLink {
    position : absolute;
    top : 0;
    left : 0;
    width : 100%;
    height : 100%;
    border : 0;
    padding : 0;
    margin : 0;
    z-index : 6;
    display : none;
    }
    
    
    .nivo-slice {
    display : block;
    position : absolute;
    z-index : 5;
    height : 100%;
    }
    
    
    .nivo-box {
    display : block;
    position : absolute;
    z-index : 5;
    }
    
    
    .nivo-caption {
    position : absolute;
    left : 0;
    bottom : 0;
    background : #000;
    color : #fff;
    width : 100%;
    z-index : 8;
    }
    
    
    .nivo-caption p {
    padding : 5px;
    margin : 0;
    }
    
    
    .nivo-caption a {
    display : inline !important ;
    }
    
    
    .nivo-html-caption {
    display : none;
    }
    
    
    .nivo-directionNav a {
    position : absolute;
    top : 45%;
    z-index : 9;
    cursor : pointer;
    }
    
    
    .nivo-prevNav {
    left : 0;
    }
    
    
    .nivo-nextNav {
    right : 0;
    }
    
    
    .nivo-controlNav a {
    position : relative;
    z-index : 9;
    cursor : pointer;
    }
    
    
    .nivo-controlNav a.active {
    font-weight : bold;
    }
    And the 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">
    <head>
    
    
    
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>Strategic Arms Tactical - "Making The Tactics Work For You" </title>
        <link href="style.css" rel="stylesheet" type="text/css" />
    	<link rel="stylesheet" href="nivo-slider.css" type="text/css" media="screen" />
    	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
    	
    	<!-- JQUERY FADE EFFECT -->
    	
    	<script type="text/javascript" src="jquery-1.4.3.min.js"></script>
    	<script type="text/javascript" src="custom.js"></script>
    	
    	<!--                   -->
    	
    	
    	<script src="jquery.nivo.slider.pack.js" type="text/javascript"></script>
        <script type="text/javascript">
    $(window).load(function(){
        $('#slider').nivoSlider({
            controlNav:false, //1,2,3...
        }).
        find('a.nivo-prevNav').text('').end().
        find('a.nivo-nextNav').text('');
    });
    	</script>
    
    	<!-- End Pre_Scripts -->
    	
    </head>
    
    <body>	
    
    	    <div id="main">
        	<div class="container">
    
            	<div id="header">
    		
    			
    				
    				
                	<ul id="navigationMenu">
                    	<li><a href="calendar.html" class="normalMenu">Calendar</a> </li>
    				    <li><a href="instructors.html" class="normalMenu">Instructors</a></li>
                    	<li><a href="classes.html" class="normalMenu">Classes</a></li>
                    	<li><a href="videos.html" class="normalMenu">Videos</a></li>
                    	<li><a href="aboutus.html" class="normalMenu">About Us</a></li>
    					<li><a href="index.html" class="normalMenu">Home</a></li>
                    </ul>
    				
    
                	<div id="logo">
                    	<h1>Strategic Arms Tactical</h1>
                        <small>"making the tactics work for you"</small>
                    </div>
    
                </div>
    			
    			
                <div id="block_featured" class="block">
                	<span class="block_inside">
    
                    
    				<div id="slider" class="nivoSlider">
    				<img src="img/pic1.png" height="147px" weight="795px" alt="" title=""/>
    				<img src="img/pic2.png" alt="" title="#htmlcaption" /></a>
    				<img src="img/pic3.png" alt="" title="This is an example of a caption" />
    			
    		</div>
    				
                        
                    
                    </span>
                </div>
    			<div id="grudge_left"></div>
    			<div id="grudge_right"></div>
    			<div class="image_block">
    			<div class="image_text">
                <div id="block_content">
    			<p>
                	<b><u>September 22, 2011</b></u> - Personal Protection, The Police Hut.  
    			</p>
    			</div>
                </div>
    		
    			
    		<form method="post" action=”mailto:adamsimpson@dotsolveconsulting.com” class="webform" />  
    			<input type="text" name="user_name" value="Your Name" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;" class="inputbox"/>   
    			<input type="text" name="user_email" value="Your Email" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;" class="inputbox"/>   
    			<textarea name="user_message" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;">A Brief Message Here</textarea>  
    			<input type="submit" value="submit" name="submit" class="submit"/>  
    		<div class="questions"> Questions? Call Us: 901.493.0700
    		</div>
    		</form> 
    
            </div>
    
    	</div>
    </div>  
    
    	<div id="footer">
        	<div class="footer_text">
    Strategic Arms Tactical, All Rights Reserved - 2011
            	</div>
                </div>
    
    
                   
                
      
    </body>
    </html>
    I know this is like beating a dead horse, but i'm out of ideas ... Thanks in advance!

  2. #2
    SitePoint Member
    Join Date
    Aug 2008
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I apologize. The website is http://www.strategicarmstactical.com/ ... Its the 1024x768 resolution sizes that cause it to break.

  3. #3
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,097
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Hi braumab. Welcome to SitePoint.

    What you are creating there is a "sticky footer", and CSS and browsers are not really designed for this. It can be done, but is tricky. There is a thread here that details perhaps the only reliable way to do it, so I recommend you walk through this tutorial carefully, as it will show you haw to do this in a way that will work in all browsers:

    http://www.sitepoint.com/forums/show...66#post1239966

    Let us know how you go!
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  4. #4
    SitePoint Member
    Join Date
    Aug 2008
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you for a quick response. I'll let you know how it works out for me.

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,276
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    It looks as though you are actually creating a "fixed footer" rather than a "sticky footer" and IE6 doesn't understand position:fixed so you are better off just letting IE6 have a normal footer especially as usage is very low for ie6 these days.

    If your problem was in a newer version of IE then you'll need to clarify as it seemed ot look ok in ie8 to me.


Tags for this Thread

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
  •