[css-d] Webkit's wobbly centering
Making a photo gallery, I want to center a row of thumbnails below the main photo. My code works well in all browsers *except* for those based on Webkit. A cut-down version of the code is here: http://codepen.io/hucklesby/pen/xjKEL What am I doing wrong? Any suggestions gratefully accepted. Thank. -- Cordially, David __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Webkit's wobbly centering
On Mon, Apr 21, 2014 at 2:12 PM, David Hucklesby huckle...@gmail.com wrote: Making a photo gallery, I want to center a row of thumbnails below the main photo. My code works well in all browsers *except* for those based on Webkit. A cut-down version of the code is here: http://codepen.io/hucklesby/pen/xjKEL What am I doing wrong? Any suggestions gratefully accepted. Thank. -- Cordially, David __ Turning off the word-spacing on .thumbs in Chrome inspector fixed it, though the space between thumbnails became less. Maybe that will put you on the right track... -- Tom Livingston | Senior Front-End Developer | Media Logic | ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Webkit's wobbly centering
On 4/21/14, 11:18 AM, Tom Livingston wrote: On Mon, Apr 21, 2014 at 2:12 PM, David Hucklesby huckle...@gmail.com wrote: Making a photo gallery, I want to center a row of thumbnails below the main photo. My code works well in all browsers *except* for those based on Webkit. A cut-down version of the code is here: http://codepen.io/hucklesby/pen/xjKEL [...] __ Turning off the word-spacing on .thumbs in Chrome inspector fixed it, though the space between thumbnails became less. Maybe that will put you on the right track... Brilliant! Thank you Tom. Adding margin-right to the li instead seems to give me what I want. -- Cordially, David __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Webkit's wobbly centering
On Apr 21, 2014, at 1:18 PM, Tom Livingston tom...@gmail.com wrote:
On Mon, Apr 21, 2014 at 2:12 PM, David Hucklesby huckle...@gmail.com wrote:
Making a photo gallery, I want to center a row of thumbnails below the main
photo. My code works well in all browsers *except* for those based on
Webkit.
A cut-down version of the code is here:
http://codepen.io/hucklesby/pen/xjKEL
What am I doing wrong?
Any suggestions gratefully accepted. Thank.
--
Cordially,
David
__
Turning off the word-spacing on .thumbs in Chrome inspector fixed it,
though the space between thumbnails became less. Maybe that will put
you on the right track...
Hi David,
Don't know if you got this fixed, but the code below worked for me and allowed
me to add thumbnails and stay centered.
.plain-list {
list-style-type: none;
margin: 0;
padding: 0;
width: 40em;
}
.thumbs {
background-color: #fd0;
line-height: 0;
word-spacing: .05em;
text-align: center;
}
.thumbs li {
display: inline-block;
}
.thumbs li a {
display: block;
background-color: #f43;
width: 3em;
height: 3em;
margin: 0 inherit;
}
Also, this worked even better (I think)
.plain-list {
list-style-type: none;
margin: 0;
padding: 0;
width: 40em;
}
.thumbs {
background-color: #fd0;
line-height: 0;
margin: 0 auto;
text-align: center;
}
.thumbs li {
display: inline-block;
padding: 0 .25em;
}
.thumbs li a {
display: block;
background-color: #f43;
width: 3em;
height: 3em;
margin: 0;
}
Best,
Karl DeSaulniers
Design Drumm
http://designdrumm.com
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
