Header Background Color not showing in IE (7 posts)

  1. bizdiva82
    Posted 2 years ago #

    My blog is not displaying correctly in Internet Explorer. My header image background color (gray) is showing in Chrome but not in Internet Explorer. When I go to my website in Internet Explorer the header is just a solid white background. Also, in internet explorer, my header is too close to the menu buttons. I have been trying to figure how to fix this for the past two days. Any help will be much appreciated.

    Thank You

    [ Moderator Note: Please post code or markup snippets between backticks or use the code button. Or in this case just post a link to your site. ]

    /* =Header
    -------------------------------------------------------------- */
    #branding {
    	background: url(images/bg.gif);
    	border-top: 3px solid #333;
    hgroup {
    	overflow: hidden;
    	margin: 2em auto;
    	position: relative;
    #site-title {
    	float: left;
    	font-size: 3em;
    	font-weight: bold;
    	letter-spacing: -1px;
    	margin: 0 0.3em 0 0;
    	text-shadow: 0px 1px 1px #888;
    #site-title a {
    	color: #111;
    #site-description {
    	color: #111;
    	font-size: 1em;
    	font-weight: normal;
    	margin: 2em 0 0 0em;
    	text-shadow: 0px 1px 1px #999;
    /* Search Form */
    #branding #searchform {
    	position: absolute;
    	top: 1.4em;
    	right: 2.5%;
    	text-align: right;
    #branding #searchform div {
    	margin: 0;
    #branding #s {
    	float: right;
    	-webkit-transition-duration: 400ms;
    	-webkit-transition-property: width, background;
    	-webkit-transition-timing-function: ease;
    	-moz-transition-duration: 400ms;
    	-moz-transition-property: width, background;
    	-moz-transition-timing-function: ease;
    	-o-transition-duration: 400ms;
    	-o-transition-property: width, background;
    	-o-transition-timing-function: ease;
    	width: 150px;
    #branding #s:focus {
    	background-color: #e1e5e9;
    	width: 200px;
    #branding #searchsubmit {
    	display: none;
    #branding .only-search #searchform {
    	top: 5px;
    	z-index: 1;
    #branding .only-search #s {
    	background-color: #666;
    	border-color: #000;
    	color: #222;
    #branding .only-search #s,
    #branding .only-search #s:focus {
    	width: 85%;
    #branding .only-search #s:focus {
    	background-color: #bbb;
    #branding .with-image #searchform {
    	top: auto;
    	bottom: -27px;
    	max-width: 195px;
    #branding .only-search + #access div {
    	padding-right: 205px;
    /* header image */
    .header-image img {
    	background: #fff;
    	-webkit-border-radius: 3px;
    	-moz-border-radius: 3px;
    	border-radius: 3px;
    	-moz-box-shadow: 1px 1px 2px #111;
    	-webkit-box-shadow: 1px 1px 2px #111;
    	box-shadow: 1px 1px 2px #111;
    	padding: 1.5% 1.5%;
    	margin: 2em 0 0em;
    	width: 97%;
  2. Can you please provide a link to your site instead of the css please?

  3. bizdiva82
    Posted 2 years ago #

  4. Weird, the bg appears on IE9, but not 8 or 7.
    I only have a Mac here, so can't check it on IE other than using Adobe browser lab.
    The only thing I can think of is to try adding

    to your #branding div.

    I'm not sure though...

  5. bizdiva82
    Posted 2 years ago #

    Thank you Christine but that did not seem to work. Does anyone else have any suggestions?

  6. Andrew
    Forum moderator & snail smusher
    Posted 2 years ago #

    The first step for browser compatibility is validation.

  7. WPyogi
    Forum Moderator
    Posted 2 years ago #

    Part of the problem may be related to the fact that IE8 and earlier do not support use of hgroup tags -- so those styles assigned using that as a selector may not be working.


Topic Closed

This topic has been closed to new replies.

About this Topic


No tags yet.