Gaps around images in FF, but all is perfect in IE8!

[sussy123]

i have tried everything a newbie could possibly try. i battled through my first websites and managed to overcome and learn much. Now ironically that i tried a template, i am having more problems.
I was about to work on other pages of this site, cause everything looked perfect in IE8 but then i checked FF and all my images had gaps ontop and below them.... I tried doing display block to each image, that didnt work, i then tried vertical bottom to each image, that didnt work either.
I am about to develop a css tumour in my brain! Help anyone please.
the url is http://www.simplysussy.com

[essential]

You'll need to provide different stylesheet's, that handles layout(s) in different types of browsers.

[scru]

Does anybody else spot the irony in this?

[sussy123]

Thanks "essential" will research that and see if i get it right.

"Scru" i work by faith, that business will only be live once i am proficient in creating websites. i did the same with photoshop, taught myself through tutorials, forums etc...and now we run a profitable designing business. Comments like yours actually motivate me, so thanks. Someone saw irony when i started PS, said i would master it only when pigs fly....well "Swine Flu"

God bless

[drumichael87]

Good job, sussy. You will definitely get it. This is exactly the way I learned everything I know. :)

[MJ Pieterse]

i would suggest that you have it work right in FF and then include extra for IE since IE reads Conditional Comments. you include it like:

<!--[if IE]>
     .your class {
             your style;
     }
<![endif]-->

[sussy123]

Thanks mj080
I followed your advice, i redid the entire layout, and now i have it the way i want in FF. And as expected IE now throws in a few gaps (cant we sign a petition to ban IE)

will now play around and see how to do the conditional statement for IE. Not too sure which class and which style you mean i must put in that statement. Will research and try. Learning loads, thanks guys.

[MidiMagic]

There two tricks to it.

1. Do not put size styles (height, width) in the same style or on the same tag as nonzero surrounding styles (margin, border, padding). If you need both, nest tags.

2. Instead of putting a background color on each individual element, put it on the containing element.

[MJ Pieterse]

hi Sussy123, hope you figure it out. by the styles i mean for example:

.imagediv {       //This will read FF, Chrome etc.
            text-align:center;
    }

<!--[if IE]>          // IE will read this too, that will help with allignment
     .imagediv {    
             margin-left:5px;
     }
<![endif]-->