...

View Full Version : Centering image?



michael180
07-12-2007, 07:05 AM
REF: http://moderntimes.com/tmp/

I have several images on this page and am wondering why I cannot center the images within the borders in FF, Safari, and Opera, however in IE7 the images seem to be centered?

Any help?

Thanks

_Aerospace_Eng_
07-12-2007, 09:02 AM
Add this to your CSS

.photo img {
display:block;
}
http://developer.mozilla.org/en/docs/Images,_Tables,_and_Mysterious_Gaps

michael180
07-12-2007, 07:13 PM
Hi Aerospace,

Thanks for your reply. But the fix does not solve my problem. I do not use tables, and the specific image is not in a cell. As you probably noticed from my CSS, I simply put a border around the image. And the link you provided seems to apply to tables and their problems.

I can fix it in FF, Safari, and Opera by making the bottom-padding 0px, but it does not display proper in IE7.

I suppose I should take the hit in IE, and design for FF etc.?

Thanks,
Michael

_Aerospace_Eng_
07-12-2007, 07:15 PM
Hi Aerospace,

Thanks for your reply. But the fix does not solve my problem. I do not use tables, and the specific image is not in a cell. As you probably noticed from my CSS, I simply put a border around the image. And the link you provided seems to apply to tables and their problems.

I can fix it in FF, Safari, and Opera by making the bottom-padding 0px, but it does not display proper in IE7.

I suppose I should take the hit in IE, and design for FF etc.?

Thanks,
Michael

Yes design for Firefox, tweak for IE. Maybe I'm missing something because you haven't explained yourself to well. The images seem fine to me. HOW are they supposed to look.

michael180
07-12-2007, 07:28 PM
Maybe it's my monitor, but I can see a larger gap at the bottom of the images even though the padding around the images is the same; 6px.?

_Aerospace_Eng_
07-12-2007, 07:42 PM
.photo_right img, .photo img {
display:block;
}
Try that before you say it doesn't work. That article doesn't only apply to tables either. The title is misleading.

michael180
07-12-2007, 08:11 PM
As I said earlier, I tried it and it didn't work. I tried it again and it still doesn't work. I do not think there is a fix for this? I will just have to remove the border, or make it part of the image?

Thanks anyway,
Michael

_Aerospace_Eng_
07-12-2007, 08:14 PM
Post a screen shot of what you are seeing. Circle the issue if possible. After using what I posted it works fine on your site. I used the web developer tool bar to test this. I would like you to implement my code into your CSS. You are likely doing it wrong.

michael180
07-13-2007, 01:41 AM
My apologies Aero, as usual you are right. I was coding it wrong. I did not realize that I must add a complete new class.

It works fine now.

Thanks so much,
Michael



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum