Header image is off in Firefox

You seem to have a blank paragraph in the header,but you don’t use it.

Try removing it from the header.php

That blank paragraph was used for the old ad. In theory the blank space should be filled by the header. I changed some of my CSS last night. I’ve now specified the width and height of the header at the exact size of the header image.

Before it was 100% rather than in exact pixels. Someone with Firefox want to let me know if it’s still off?

I’ve noticed a lot of people with WordPress alignment problems between Firefox and IE, but I haven’t found mine specifically. It’s annoying.

Go to this portion of your CSS:

/* Begin Headers */
h1 {
padding-top: 40px;
margin: 0;
}

For some reason, you have the image in your header wrapped in h1 tags, so the above padding is being applied to it.

One way to fix the problem:

1. In your HTML file, take the image out of those h1 tags.
2. In your CSS file, ditch the h1 stuff.
3. Add to your CSS:

#header img {
padding-top:5px
}

There are, of course, other ways to do it, but this is a quick fix. Your best option, in the interest of keeping structure separated from content, is to put the header’s background image in your css file and get it out of your HTML completely. Something like:

#header {
background:url(header.jpg) no-repeat
}

Hope this helps.

I’m pretty new to CSS. The last and best fix you mentioned, this code:

#header {
background:url(header.jpg) no-repeat
}

Do I just need to put my header’s url in the parentheses? Like so:

#header {
background:url(https://www.mysite.com/folder/header.jpg) no-repeat
}

I need a complete example as I am a total amateur at this. I don’t want to try anything before I know I’m doing it right. Thanks for the help.

Okay, I managed to get the image to come directly from my CSS. It’s not in my html at all anymore. So, now I have some more questions. Is there anyway I can turn the image into a link?

Also, now if I try to reposition the picture at all, it disappears entirely! I had 40px of padding on the top of the picture before, but if I try to add it now, it just vanishes. Any thoughts?

Alright, I solved the padding problem, now as it stands, the code is thus:

#header {
background: url(“https://www.8bitninja.com/wp-content/uploads/header.jpg”) no-repeat
}

AND

#header {

margin: 40px auto;
height: 192px;
width: 740px;

}

The code is broken down this way in the template, that’s why it’s split into two different sections.

My only question now is: Does this look right in Firefox now? And, can anybody tell me how to make that picture a link?