How to correct website design - IE versus Firefox

[OneGrassRoot]

I've created several blog designs which have a banner (title within a frame) at the top of the page. They look perfect in IE. In Firefox, however, it overlaps slightly on the right and for the life of me I can't get it to fit.

I've heard developers say there are often design glitches between IE and Firefox, as far as how a website displays.

Any tips?

Thanks. :)

[canetoad]

1. Do you have a link?

So we can look. If you are using css, IE is generally the rogue. It handles cell padding differently to other browsers.

[Shardik]

2. I think the first thing I would check is the width of the frame

and the width of the banner and make sure they match. Can't tell you much more without knowing more.

[OneGrassRoot]

3. This link is an example....

http://www.natureshealinggrace.blogspot.com/

I kept decreasing the banner image but it never would stay within the frame in Firefox; like I said, it's perfect in IE. Since it's a blogger site template that has been customized, I'm not sure how "tweakable" the code is.

I'm just curious how I can avoid this. Any time I've created a custom banner/heading/whatever you wanna call it, this happens in Firefox.

Any help is most appreciated!!! :)

[Shardik]

4. I'm seeing the same overlap in IE as I am in firefox...

Very attractive site. Your banner is 660 pixels wide. The same as the wrapper for the site. In an external graphics program such as Gimp or Photoshop, decrease the size to a 654 width and replace the banner on your site. I think that might do the job for you.

Edited to correct width.

[canetoad]

5. Dawg may be correct about decreasing banner size

I'd be looking at the header and inner wrapper and the margins on them.

A workaround could be to add the yellow frame and maroon borders to the header itself and re-save the whole thing as an image, then do away with the extra divs around the header. You may even be able to get rid of the header margin and see how it looks.

[OneGrassRoot]

6. Thanks to you both - very much! :)

I've learned how to play around within these templates just enough for friends to ask me to create them for them...lol...and I learn a little CSS gradually along the way. If I can figure out this banner issue, that'll be a huge hurdle I've consistently encountered.

Thanks again!

[OneGrassRoot]

7. Success! I'm going to be back with more questions...

lol.

I got that to work by changing the pixels in gimp - thanks! :)

I'm really trying to learn as much as I can gradually. I bought a download of Photoshop and just trying to extract the files are proving to be a challenge, let alone get into the program and learn it. That may be my next plea for help.

Now, time to change about four other banners. Thank you both again very, very much!

:)

[charlie]

8. Find this bit in your styles

#header-wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid #a9501b;
}

and change the width to 670px:

#header-wrapper {
width:670px;
margin:0 auto 10px;
border:1px solid #a9501b;
}

[OneGrassRoot]

9. Gotcha....

so I could edit within CSS as you show here, or redo image in Gimp as Dawg said.

Either way, I learned something today, so I thank you all very much!

And, canetoad, I was about to do just what you suggested if I couldn't figure out Gimp. LOL

:hi:

[Shardik]

10. Congratulations! I'll say this: You figured it out quiclkly

And I am happy you got your answers here.

[OneGrassRoot]

11. I'm a fairly quick study...thank goodness! But I couldn't....

have done anything I've done in the last year online were it not for this group. A year ago I didn't have a clue what CSS even was, now I'm addicted to widgets and customizing this, that and the other.

But I have oh so very far to go! lolol

I'm serious...I value you guys more than I can ever say. Thank you once again.

Have a great Friday evening. :)

[Shardik]

12. I get a lot of help and hints here as well.

Another great source is Stumble (when you choose the appropriate categories) and Linda.com.

You have a great evening as well!

[canetoad]

13. Don't you mean SERIES !!!111

...but you are right, this is a great group, snarkless, terrific people and really useful advice. :)

[OneGrassRoot]

14. OH NOES!!!!!

I forgot to use my freeperisms. LOLOL

Thanks again for everything! :)