• Hi,

    Few days back, I made some changes in my theme’s header, but when I opened it in IE 9, it aligned the page to the left rather than center, but working fine in all other browsers, I’ve tried. It’s not only happening with the header, but the header is causing the other content of the page to align to left side.

    /* ================================================================
         HEADER
    =================================================================== */
    
    #header {
    	width: 982px;
    	height: 184px;
    	color: #132C08;
    	font-size: 10px;
    	margin: 0px;
    	padding: 0px;
    	overflow: hidden;
    	}
    
    #header p {
    	font-size: 10px;
    	font-family: Verdana;
            color: #132C08;
    	font-weight: bolder;
            padding: 0px;
            margin: 0px 0px 5px 0px;
    }
    
    .headerleft {
    	width: 395px;
    	float: left;
    	font-size: 14px;
            clear: left;
    	margin: 0px;
    	padding: 0px;
    	}
    
    .headerright {
    	width: 586px;
    	float: right;
    	margin: 0px;
    	padding: 23px 0px 0px 0px;
    	font-weight: bolder;
    	}
    
    .headerleft2 {
    	width: 734px;
    	float: left;
    	font-size: 14px;
    	margin: 6px 0px 0px 6px;
    	padding: 0px;
    	}
    
    .headerleft2 a img {
    	border: none;
    	margin: 0px;
    	padding: 0px;
    	}
    
    .headerright2 {
    	width: 225px;
    	float: right;
    	margin: 6px 4px 0px 0px;
    	padding: 0px 0px 0px 0px;
    	font-weight: bold;
    	}
    
    .headerright2 a img {
    	border: none;
    	margin: 0px 0px 3px 0px;
    	padding: 0px;
    	border: 1px solid #FFFFFF;
    	}

    to

    /* ================================================================
         HEADER
    =================================================================== */
    
    #header {
    	width: 982px;
    	height: 184px;
    	color: #132C08;
    	font-size: 10px;
    	overflow: hidden;
    	margin: 0;
    	padding: 0px;
            align:center;
    	}
    
    #header p {
    	font-size: 10px;
    	font-family: Verdana;
            color: #132C08;
    	font-weight: bolder;
            padding: 0px;
            margin: 0px 0px 5px 0px;
    }
    
    .headerLeft {
    	width: 395px;
    	float: left;
    	font-size: 14px;
            clear: left;
    	margin: 0px;
    	padding: 0px;
    	}
    
    .headerCenter {
    	width: 275px;
    	float: left;
    	margin: 0px;
    	padding: 25px 0px 0px 0px;
    	font-weight: bolder;
    	}
    
    .headerRight {
            background: #FFFFFF url(images/searchBKG.png) no-repeat;
    	width: 301px;
    	float: right;
            font-size: 11px;
            font-family: "Tahoma", "Geneva", sans-serif
            color: #c9d7ab;
            padding: 5px 0px 5px 3px;
            margin: 28px 0px 10px 0px;
    	}
    
    .headerleft2 {
    	width: 734px;
    	float: left;
    	font-size: 14px;
    	margin: 2px 0px 0px 6px;
    	padding: 0px;
    	}
    
    .headerleft2 a img {
    	border: none;
    	margin: 0px;
    	padding: 0px;
    	}
    
    .headerright2 {
    	width: 225px;
    	float: right;
    	margin: 2px 4px 0px 0px;
    	padding: 0px 0px 0px 0px;
    	font-weight: bold;
    	}
    
    .headerright2 a img {
    	border: none;
    	margin: 0px 0px 3px 0px;
    	padding: 0px;
    	border: 1px solid #FFFFFF;
    	}

    I’m currently using the following code in my header for IE 6 and 7, but not for 8 and 9.

    <!--[if gte IE 7.]>
    
    <link href="<?php bloginfo('template_directory'); ?>/ie7.css" rel="stylesheet" type="text/css" />
    
    <![endif]-->
    
    <!--[if lte IE 6]>
    
    <link href="<?php bloginfo('template_directory'); ?>/ie6.css" rel="stylesheet" type="text/css" />
    
    <![endif]-->
  • The topic ‘IE 9 Themes problems’ is closed to new replies.