Disappearing background image in IE

  • Unknown's avatar
    squareglasses · Member ·

    Hi all,

    I’ve adapted the White As Milk theme and I am posting my altered CSS into the ‘CSS Stylesheet Editor’: I’m not hosting this blog myself but I am altering the CSS “from scratch” – so replacing any existing theme.

    My problem is driving me mad. I have inserted a background image into the “#header a” which doesn’t show up at all in IE…UNLESS I add a float:left into the “#header a”….but then it disappears in FF! I’ve been tinkering with this for hours and cannot get it to appear in both IE and FF. The problem is compounded by the fact that the stylesheet editor auto-amends code so I can’t even do a CSS hack. I’ve had a search through forums but cannot find an answer specific to this. I know there’s a float issue with IE but I don’t think that’s what is affecting this…

    Here’s the relevant bit of code…any feedback warmly received!!

    html {
background-color:#fff;
height:100%;
margin-bottom:1px;
}

body {
font-size:65.5%;
font-family:"Helvetica Neue", Helvetica, Arial, Sans-Serif;
color:#282828;
text-align:center;
background-color:white;
}

#page {
background-repeat:repeat;
color:#4c4c4c;
text-align:left;
width:700px;
background-color:white;
margin:20px auto;
}

#header {
height:auto;
width:auto;
}

#header a {
text-decoration:none;
font-size:2em;
margin-left:15px; /* NUDGES THE HEADER A IMAGE INLINE WITH CONTENT BELOW */
background:url('http://www.fisk-industries.co.uk/images/squareglassesblog.jpg') no-repeat;
height:100%;
width:100%;
padding-right: 500px; /* TO DISPLAY THE BG IMAGE WHICH OTHERWISE DOESN'T SHOW */
}

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    squareglasses · Member ·

    Sorry – link to blog here: http://squareglasses.wordpress.com/

  • Unknown's avatar
    thesacredpath · Member ·

    Did you get this taken care of? I see it with Safari and Firefox. I don’t have the PC running right now, just my Mac so I can’t check with IE.

  • Unknown's avatar
    squareglasses · Member ·

    Hey thesacredpath….no I didn’t yet.

  • Unknown's avatar
    thesacredpath · Member ·

    I’m a little outside my experience here on CSS, but what you might try is to put a new section called #header (without the “a” and put your background declaration there. Make sure and remove it from #header a though. In the source code, the header is under div id=header.

  • Unknown's avatar
    squareglasses · Member ·

    Hey thesacredpath,

    Thanks for your suggestion. It worked! Well…I have added the bg image to both the header AND anchor because otherwise my blue rollovers fill it. The main point is I have solved the issue! Thanks so much for getting back, really appreciate it.

    Final code:

    html {
background-color:#fff;
height:100%;
margin-bottom:1px;
}

body {
font-size:65.5%;
font-family:"Helvetica Neue", Helvetica, Arial, Sans-Serif;
color:#282828;
text-align:center;
background-color:white;
}

#page {
background-repeat:repeat;
color:#4c4c4c;
text-align:left;
width:700px;
background-color:white;
margin:20px auto;
}

#header {
background:url('http://www.fisk-industries.co.uk/images/squareglassesblog.jpg') no-repeat top left;
font-size:2em;
width: 231px;
height: 36px;
margin: 10px 0 20px 15px;
}

#header a {
text-decoration:none;
color: white;
background-color: white;
background:url('http://www.fisk-industries.co.uk/images/squareglassesblog.jpg') no-repeat top left;
float: left;
}

#blog_title_hide {
display:none;
}
  • Unknown's avatar
    thesacredpath · Member ·

    That’s great, it looks good. Glad that worked for you.

    One thing I would do, since you have done a display:none; on the blog title is to go back to settings > general and add a blog title in. That way it will show in the tabs and title bars in browsers rather than the URL of the blog. Search engines like to see an actual title and without it, your search engine ranking will suffer a little.

  • The topic ‘Disappearing background image in IE’ is closed to new replies.