SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Enthusiast
    Join Date
    Sep 2008
    Posts
    70
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    can't center my content on IE

    Hello, my website is working just fine in FF and Chrome... but in IE, as usual, centered content doesn't work:

    http://cudamine.com/icame/sitemundial/

    css:
    Code CSS:
    * {margin:0;padding:0;} 
     
    html, body {
    	height: 100%;
        background-image:url(images/grass.jpg)
    }
     
    #wrap {
    	min-height: 100%;
    }
     
    #main {
    	overflow:auto;
    	padding-bottom: 50px;
    }  /* must be same height as the footer */
     
    #footer {
    	position: relative;
    	margin-top: -50px; /* negative value of footer height */
    	height: 50px;
    	background:#000;
    	clear:both;
    } 
     
    #footer-content {
    	width:1000px;
    	height:50px;
    	background-color:#fff;
    	margin-left:auto;
    	margin-right:auto;
    } 
     
    /*Opera Fix*/
    body:before {
    	content:"";
    	height:100%;
    	float:left;
    	width:0;
    	margin-top:-32767px;/
    }
     
    #header {
    	width:100%;
    	height:100px;
    	background-color:#000;
    } 
     
    #header-content {
    	width:1000px;
    	height:100px;
    	background-color:#fff;
    	margin-left:auto;
    	margin-right:auto;
    } 
     
    #flash {
    	margin-top:30px;
    	width:1000px;
    	height:150px;
    	background-color:#fff;
    	margin-left:auto;
    	margin-right:auto;
    } 
     
    #mainwrapper {
    	margin-right:auto;
    	margin-left:auto;
    	width:1000px;
    	height:100%;
    } 
     
    #content {
    	margin-top:30px;
    	width:700px;
    	height:850px;
    	background-color:#fff;
    	left:50%;
    	margin-bottom:30px;
    } 
     
    #contentbox1 {
    	width:250px;
    	height:200px;
    	margin-left:750px;
    	background-color:#fff;
    	position:absolute;
    } 
     
    #contentbox2 {
    	width:250px;
    	margin-top:230px;
    	height:200px;
    	margin-left:750px;
    	background-color:#fff;
    	position:absolute;
    } 
     
    #contentbox3 {
    	width:250px;
    	margin-top:460px;
    	height:200px;
    	margin-left:750px;
    	background-color:#fff;
    	position:absolute;
    } 
     
    #menu {
    	width:1000px;
    	top:70px;
    	position:absolute;
    	height:30px;
    	background-color:#00ffff;
    	margin-left:auto;
    	margin-right:auto;
    }

  2. #2
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,836
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Do you have a valid doctype tag as the very first thing in the HTML? If not then IE goes into quirks mode and centring doesn't work.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  3. #3
    SitePoint Enthusiast
    Join Date
    Sep 2008
    Posts
    70
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    i believe so felgall

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">

  4. #4
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,624
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Hi, which IE version are you taling about? IE6/7 center the content .
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  5. #5
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,624
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Ah, IE8..it's most likely because of this validation error
    Code:
    /*Opera Fix*/
    body:before {
        content:"";
        height:100&#37;;
        float:left;
        width:0;
        margin-top:-32767px;/
    }
    After the margin-top (the foward slash)
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  6. #6
    SitePoint Enthusiast
    Join Date
    Sep 2008
    Posts
    70
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I removed the slash, problem persists ... even tried removing the whole opera fix div to see if that was causing it.

    I've updated the files as well to reflect that change.

  7. #7
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,624
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    The problem is your conditional comment
    Code:
    <!--[if !IE 7]>
    	<style type="text/css">
    		#wrap {display:table;height:100&#37;}
    	</style>
    <![endif]-->
    IE6 doesn't understand display:table so that's why it isn't affected, and that CC doesn't affect IE7.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  8. #8
    SitePoint Enthusiast
    Join Date
    Sep 2008
    Posts
    70
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ryan, thanks so much dude, you're always fantastic help.

    Thanks everyone else as well for all the help.

    <3 Sitepoint.

  9. #9
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,624
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Glad it worked . You're welcome
    Always looking for web design/development work.
    http://www.CodeFundamentals.com


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
  •