PDA

View Full Version : centering image using gradient css


mtnbiker
Dec-01-2007, 04:36 PM
I can't figure out which element to change to get my images to center align when I am viewing my page in Firefox

I added this to my CSS

.galleries #galleriesBox,
.galleries #categoriesBox,
.galleries #featuredBox {
display: block;
text-align: center !important;
}
and them image in focus in the gallery is now centered when using Safari, but is still left justified when viewing the page in Firefox.

help?

Allen
Dec-01-2007, 05:18 PM
I can't figure out which element to change to get my images to center align when I am viewing my page in Firefox

I added this to my CSS

.galleries #galleriesBox,
.galleries #categoriesBox,
.galleries #featuredBox {
display: block;
text-align: center !important;
} and them image in focus in the gallery is now centered when using Safari, but is still left justified when viewing the page in Firefox.

help?
"get my images" what images? what page? Can you be more specific?

denisegoldberg
Dec-01-2007, 05:24 PM
Are you talking about centering the photo on the right in smugmug mode?

This is what I have in my CSS, it may be what you're looking for:
/* center photos (vertically oriented photos were left aligned, move to center */
#ajaxPhotoBox {text-align: center;}


In case you want a reference, here's the thread where I initially saw this info - http://www.dgrin.com/showthread.php?t=70253&highlight=ajaxphotobox.

--- Denise

mtnbiker
Dec-01-2007, 06:26 PM
denise that is what I am trying to do, even with the addition to my CSS that fails to center the image.
an example is here

http://mtnbiker.smugmug.com/gallery/3906113#226610192

I was able to center the caption, and the image in safari.
only the caption in firefox

denisegoldberg
Dec-01-2007, 06:41 PM
denise that is what I am trying to do, even with the addition to my CSS that fails to center the image.
an example is here

http://mtnbiker.smugmug.com/gallery/3906113#226610192

I was able to center the caption, and the image in safari.
only the caption in firefox
I suspect there is something in the theme that you are using that is blocking the CSS, but I haven't been able to figure out what it is. The photo is centered for me in IE7 (on Vista) but not in Firefox. Interesting that it's also centered for you in Safari.

Sorry I couldn't solve the problem... I'm sure that one of the real smugWizards will be able to help.

--- Denise

mtnbiker
Dec-01-2007, 06:43 PM
Thanks for your help Denise.

denisegoldberg
Dec-02-2007, 04:42 AM
Thanks for your help Denise.
Well, I still don't have an answer, but I went back in to your site in Firefox, requested edit CSS, and removed the CSS for the gradient gray theme. When I did that the photo centered in smugmug view. I still haven't been able to identify the piece of code that is causing the problem though.

Allen? Andy? Any ideas?

--- Denise

Allen
Dec-02-2007, 04:55 AM
.. I still haven't been able to identify the piece of code that is causing the problem though.

Allen? Andy? Any ideas?

--- Denise
This is what is preventing the mainImage from centering in the theme. If
overriding it in CSS don't know what it would do if the screen is stretched.

#smugmug #mainImage, #smugmug_small #mainImage {
display: block;
margin-left: auto;
margin-right: auto;
}


Disabling that lets this work to center image.

#ajaxPhotoBox {text-align: center !important;}

denisegoldberg
Dec-02-2007, 05:41 AM
This is what is preventing the mainImage from centering in the theme. If
overriding it in CSS don't know what it would do if the screen is stretched.

#smugmug #mainImage, #smugmug_small #mainImage {
display: block;
margin-left: auto;
margin-right: auto;
}


Disabling that lets this work to center image.

#ajaxPhotoBox {text-align: center !important;}
I'm curious - do you have any idea why the photos are centered in every browser except for Firefox? Is that the only browser that is behaving properly, or are the others (IE and Safari) correct?

--- Denise

mtnbiker
Dec-02-2007, 07:18 AM
thanks Allen, doesn't seem to stretch anyways. I remove the 'offending' code.