[EMAIL PROTECTED] wrote:
> I am using a list to layout three images horizontally along the bottom of
> a content column. The content column is fluid, set to 70%. I would like,
> if possible, to have my <ul> stay centered within the liquid content
> column as the window is resized, and at the same time, have each <li>
> contained with in the <ul> to remain evenly spaced horizontally.
>
> Theoretically, how I though it would work:
>
> Center the <ul> with margin: 0 auto; and text-align: center; for IE; then
> set each <li> to width: 33%, (there are three images in this example) and
> then center the images with in each <li> through margin: 0 auto; and
> text-align: center again.
>
Sounds like a good idea -- now can you tell us what your problem is?
:-) Not many of us are curious enough about other people's problems to
recreate their page out of code provided, fire up browsers, compare
different renderings, and finally discover what may be the mystery
problem (or not, if the problem was in a browser the tester didn't have
access to, or the tester misinterprets which of the renderings was the
desired one and which was the buggy one). If you can't provide us with
a link to a live page, can you at least tell us what the problem is and
what browsers you see it in? That will make it much more likely that
you will get help.
That being said, you are mixing a whole lot of different styles that are
conflicting with each other. See my annotations to your CSS below;
perhaps it will fix your problem. Please let us know if it does, and if
it doesn't, let us know what rendering it does result in so we can go
from there.
> Here is the basic markup and general styles:
>
> <!--HTML-->
> <ul id="content-images">
> <li><img src="i/content-img-polar.jpg" width="140" height="140" /></li>
> <li><img src="i/content-img-boards.jpg" width="140" height="140" /></li>
> <li><img src="i/content-img-adidas.jpg" width="140" height="140" /></li>
> </ul>
>
> /* CSS */
>
> #content-images {
> margin: 0 auto; /* auto not needed, set to 0 */
> text-align: center; /* not needed, remove */
> padding: 0;
> width: 100%; /* not needed, remove */
> display: inline; /* not needed, remove */
> float: left; /* not needed, remove */
> list-style: none; /* ADD */
> }
> #content-images li {
> margin: 0 auto; /* auto not needed, set to 0 */
> display: inline; /* not needed, remove */
> width: 33%;
> padding: 0;
> float: left;
> text-align: center; /* ADD */
> }
> #content-images li img {
> display: block; /* not needed, remove */
> margin: 0 auto; /* not needed, remove */
> text-align: center /* not needed, remove (note you were missing
> semi-colon at end) */
> width: 140px;
> float: left; /* not needed, remove */
> }
>
Thanks,
Zoe
--
Zoe M. Gillenwater
Design Services Manager
UNC Highway Safety Research Center
http://www.hsrc.unc.edu
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
