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 4 of 4
  1. #1
    Regular Coder
    Join Date
    Apr 2010
    Posts
    417
    Thanks
    4
    Thanked 1 Time in 1 Post

    footer divs are not side by side in IE8 Vista

    divs are not side by side in IE8 Vista but shows ok in IE8 XP and firefox XP.

    they show one under the other with a 50% gap on the right hand side.

    what should i change to my code to get them side by side.

    Code:
    <div id="footer2010">
    <div class="copyright2010">Copyright &copy; 2009-<?=date("Y");?></div>
    <div class="copyright2010">disclaimer</div>
    <div class="clear"></div>
    </div>
    Code:
    .copyright2010  { float: left; width: 50%; text-align: center; background-color:#4F4F4F; color: #FFFFFF; font-size:8pt; line-height: 30px; }
    
    .footer2010 { margin:0 auto; }
    
    .clear { height: 0; font-size: 1px; margin: 0; padding: 0; line-height: 0; clear: both; }

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,692
    Thanks
    22
    Thanked 1,830 Times in 1,814 Posts
    Hello jasonpc1,
    Maybe you have another problem you did not show? The bit you posted will work fine with a DocType and valid code.
    when pasted into my standard blank webpage your two .copyright2010 divs side by side in FF3.x, IE8 and IE7.


    I have no way to check it in IE6, it's certainly possible for that browser to mess up on the 50% part.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    Regular Coder
    Join Date
    Apr 2010
    Posts
    417
    Thanks
    4
    Thanked 1 Time in 1 Post
    the problem happens in IE8 on vista machines.


    edit.

    sorry just had it confirmed it is using IE 7 !! my fault. sorry, i shall get them to update their browsers

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,692
    Thanks
    22
    Thanked 1,830 Times in 1,814 Posts
    Like I said, what you posted should work. Show us the rest of your code and maybe we can find the error.

    Did you validate? See the links in my signature line about validation.


    Here's a snippet that shows your code working and a second footer coded a different way -
    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>Untitled Document</title>
    <style type="text/css">
    html, body {
    	font: 100% "Comic Sans MS";
    	background: #FC6;
    	margin: 0;
    }
    .footer2010 {
    	margin: 0;
    	overflow: auto;
    }
    	.copyright2010 {
    		width: 50%;
    		float: left;
    		text-align: center;
    		background:#4f4f4f;
    		color: #fff;
    		font-size:8pt;
    		line-height: 30px;
    	}
    /*	second footer	*/
    		.newfooter2010 {
    			margin: 100px 0 0 0;
    			overflow: auto;
    			text-align: center;
    			background:#4f4f4f;
    			color: #fff;
    			font-size:8pt;
    			line-height: 30px;
    		}
    			.newcopyright2010 {
    				width: 50%;
    				float: left;
    			}
    			.twocopyright2010 {
    				margin: 0 0 0 50%;
    			}
    </style>
    </head>
    <body>
        <div class="footer2010">
                <div class="copyright2010">Copyright &copy; 2009-
                    <?=date("Y");?>
                <!--end .copyright2010--></div>
            <div class="copyright2010">disclaimer</div>
        <!--end .footer2010--></div>
            <div class="newfooter2010">
                    <div class="newcopyright2010">Copyright &copy; 2009-
                        <?=date("Y");?>
                    <!--end .copyright2010--></div>
                <div class="twocopyright2010">disclaimer</div>
            <!--end footer2010--></div>    
    </body>
    </html>
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad


  •  

    Posting Permissions

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