Changed a table based thumbnail gallery to a floating thumbnail gallery.
All works fine except I'm having difficulties center aligning the thumbnails within their assigned width.
CSS:
.thumbnail {float: left; width: 164px; margin: 0; padding: 3px;}
Anyone with good advice?
TRY:
text-align center on the image container for IE.
Margin:auto; on the image for Moz.DaveSW,
Many thanks.
Boy, do I feel stoopid after rereading my question.
How simple is that? Must have been a glich...
*hehe*How do you get multiple things to center in non-IE?Originally posted by IncaWarrior
How do you get multiple things to center in non-IE?
What I wanted was to center all images in these galleries (<!-- m --><a class="postlink" href="http://www.lettonica.info/postcards/independence/">http://www.lettonica.info/postcards/independence/</a><!-- m -->).
Then vertical designed postcards on some of the images would not left align by default, which would look kinda stoopid.
Now, all images center aligns due to DaveSW's little trick, which actually looks quite obvious now.
Only the "text-align:center" bit was added to my "thumbnail" div, which looks kewl in all my 4 different browsers.
Edit: Link updateOriginally posted by IncaWarrior
How do you get multiple things to center in non-IE?
margin: auto is the correct way and usually works in Mozilla. That would be applied to the object that is to be centered. You need it for stuff like tables, but images may work under text align.
text-align: center is technically a hack - since it's intended for text lol.
That site looks really interesting philaweb. Good job.
Originally posted by DaveSW
That site looks really interesting philaweb. Good job.
Many thanks!
Am trying to learn the best I can.
Actually, the first real improvements to the overall design, layout was made after I began visiting this board.
Prior to that I've been wrestling on/off with that site for more than 2 years.Originally posted by DaveSW
margin: auto is the correct way and usually works in Mozilla. That would be applied to the object that is to be centered. You need it for stuff like tables, but images may work under text align.
text-align: center is technically a hack - since it's intended for text lol.
Yet Gecko-based browsers render images on a line, just like text. That's the reason images have a space beneath them in gecko browsers. Besides, images are inline by default, just as text. I always assumed text-align worked on elements rendered on a line and margin: auto worked on block elements to center them within other block elements.
Images are an exception to the block/inline rule because they are replaced elements and need a height and width specified.When I said it was a hack I had in mind it's use for centralising divs of page content in IE.
I guess using it for images is a hack if you take the name of the property at it's face value - i.e. text-align.what if you have:
<div>...stuff...</div><div>...more stuff...</div>
and you want those to center on the same line but be able to go to different lines if there isn't enough space?give them a width and float them?
All works fine except I'm having difficulties center aligning the thumbnails within their assigned width.
CSS:
.thumbnail {float: left; width: 164px; margin: 0; padding: 3px;}
Anyone with good advice?
TRY:text-align center on the image container for IE.
Margin:auto; on the image for Moz.DaveSW,
Many thanks.
Boy, do I feel stoopid after rereading my question.
How simple is that? Must have been a glich...
*hehe*How do you get multiple things to center in non-IE?Originally posted by IncaWarrior
How do you get multiple things to center in non-IE?
What I wanted was to center all images in these galleries (<!-- m --><a class="postlink" href="http://www.lettonica.info/postcards/independence/">http://www.lettonica.info/postcards/independence/</a><!-- m -->).
Then vertical designed postcards on some of the images would not left align by default, which would look kinda stoopid.
Now, all images center aligns due to DaveSW's little trick, which actually looks quite obvious now.
Only the "text-align:center" bit was added to my "thumbnail" div, which looks kewl in all my 4 different browsers.
Edit: Link updateOriginally posted by IncaWarrior
How do you get multiple things to center in non-IE?
margin: auto is the correct way and usually works in Mozilla. That would be applied to the object that is to be centered. You need it for stuff like tables, but images may work under text align.
text-align: center is technically a hack - since it's intended for text lol.
That site looks really interesting philaweb. Good job.
Originally posted by DaveSW That site looks really interesting philaweb. Good job.
Many thanks!
Am trying to learn the best I can.
Actually, the first real improvements to the overall design, layout was made after I began visiting this board.
Prior to that I've been wrestling on/off with that site for more than 2 years.Originally posted by DaveSW
margin: auto is the correct way and usually works in Mozilla. That would be applied to the object that is to be centered. You need it for stuff like tables, but images may work under text align.
text-align: center is technically a hack - since it's intended for text lol.
Yet Gecko-based browsers render images on a line, just like text. That's the reason images have a space beneath them in gecko browsers. Besides, images are inline by default, just as text. I always assumed text-align worked on elements rendered on a line and margin: auto worked on block elements to center them within other block elements.
Images are an exception to the block/inline rule because they are replaced elements and need a height and width specified.When I said it was a hack I had in mind it's use for centralising divs of page content in IE.
I guess using it for images is a hack if you take the name of the property at it's face value - i.e. text-align.what if you have:
<div>...stuff...</div><div>...more stuff...</div>
and you want those to center on the same line but be able to go to different lines if there isn't enough space?give them a width and float them?