Changing Header Image and Related How-tos

[av8rmike]

Since a number of these questions have come up over time, I decided to try to compile all the issues into one post.

Comments

[kimonos_house]

I'm having problems with my header displaying properly in Internet Explorer. I'm altering a Bunnylicious layout.

http://kimonos-house.livejournal.com/

The page will load correctly and look the way it's supposed to, with a black bar across the bottom of the header. If I scroll down and then scroll back up, a purple .gif from the original Bunnylicious layout will appear across the bottom of the header. I cannot figure out why the heck it's doing this. It's only in IE.

Also, I don't know if this is the appropriate place to ask, but I want to replace the star image by each entry title with another image. I've tried replacing the background to .asset-header, .asset-name and .asset-name-hover, all to no avail. What triggers the star graphic?

Any help is appreciated. My page is going to be spotlighted by LJ, so I'm trying to get it presentable as quickly as I can.

[av8rmike]

Congratulations on the spotlight! To get rid of the additional images, copy the CSS exactly from the second highlighted box above. I specifically mentioned Bunnylicious as one of the themes that has extra images.

Post ornaments are covered under the entry header tag. Try the directions in this post.

[kimonos_house]

Thank you so much for the quick reply! I've made the changes to the CSS as you mentioned. Unfortunately, it's still doing the weird background replacement after scrolling down and back up. Could an issue in some other div be causing it? I'm wondering if it's the "Peekaboo" bug (http://www.dracos.co.uk/code/ie6-css-bug/).

Congratulations on the spotlight!

Thanks! :D

[av8rmike]

There are a bunch of display problems with IE6 that are sometimes lumped under the "Peekaboo" bug, probably incorrectly so. When I load your page in IE6, I see a brief flash of the purple in the header, and the sidebar and journal content overlap the header until I scroll up and down. The purple can be changed with:
#header { background-color: #000000;}
I think the display problems may actually be due to some padding at the bottom of #header-content that is being used to "stretch" the header box downwards. Try:
#header-content { padding-bottom: 0px;} then increasing the height property of #header-inner.

[kimonos_house]

Changing the #header background color fixed the flash of purple background. Thank you for that! IE is still restyling the background under the header, though, and increasing the height of #header-inner just pushes the affected area further down.

I think the problem is in the #page and #page-inner divs, or something nested within them. I've changed the color of those divs to grey so you can see which area is restyling. Scrolling down and back up causes that section's background to switch to "body-bg.gif."

I'm really sorry to keep bugging you with this. Do you have any other ideas?

[av8rmike]

Yes! ;) Change the height of #header-inner back to match your image's height, then remove the padding that Bunnylicious has above the entries:
#content { padding-top: 0px; }

[kimonos_house]

Huzzah! The problem section has disappeared. Thank you so much for your help. I'll be adding you to my credits page. :)

[av8rmike]

Sweet. You're welcome!