Thread

I use 2 simple pictures above and below of on weblog. The top-picture renders nicely but bottom does not when surfing with IE. What do i have to do that i get the graphics shown same way in both browsers?

Here is a picture to you to see what is my problem:

Sounds like a typical rendering problem with IE Vs FF.  This is a common issue with web development and you will encounter many more problems like it.  All I can suggest is writing some CSS hacks to present one set of rules for FF and another to IE:

http://www.maratz.com/blog/archives/2005/06/16/essentials-of-css-hacking-for-internet-explorer/

Figured that out. Must think another way to do this than simply put the img-tags to template after and before the {weblog}. Ive had the margins put to zero but that doesnt help either. (using the DIV).

Well i must peak that URL you posted when i have time and brains to focus on this IE problem. Thanks!

- Tuittu

Figured that out. Must think another way to do this than simply put the img-tags to template after and before the {weblog}. Ive had the margins put to zero but that doesnt help either. (using the DIV).

If you’re using IMG tags, rather than CSS, to add those images to your site, try making the images block level elements.  Which is as simple as:

foo.gif

You can find more info here.  It’s a somewhat older article, and talks about using images in table-based designs, the core issue is still the same.

Another idea would be to use CSS, and specify those images as background images.

Oh yeah. That helped. Now it shows without the white lines in IE7. Thank you very much!

Yours:
- Tuittu

If you’re going to be using IMG tags for images that are “layout” images (as opposed to “content” images), then it’s usually good idea to make them block elements (as well as remove their margins, border, and padding).  That way, you can get rid of any unsightly gaps like the one you saw.