Jürgen Zarske wrote:
> <http://www.zarske.ch/galleryTest/p1.html>
> [...] after searching and reading through a lot of hints how to
> center elements with css I am still not able to center just one
> thing. Maybe I have to solve it completely different?
Code first, explanation below.
Replace your CSS for #content #wrap and shadow/image inside it, with the
following - verbatim...
#content #wrap { /* all browsers */
width: 660px;
float: left;
text-align: center;
}
#content #pic { /* older Gecko - Fx2 etc. */
margin: 0 auto;
display: table;
}
#content #pic { /* all browsers */
background: #bbb;
position: relative;
top: 3px;
left: 3px;
display: inline-block;
}
* html #content #pic { /* IE6 */
display: inline;
}
*:first-child+html>body #content #pic { /* IE7 */
display: inline;
}
#content #pic img { /* all browsers */
border: 10px solid white;
position: relative;
top: -3px;
left: -3px;
display: block;
}
* html #content #pic img { /* IE6 */
margin-bottom: -4px;
}
*:first-child+html>body #content #pic img { /* IE7 */
margin-bottom: -4px;
}
...and you'll get Opera, Gecko, WebKit, Konqueror, IE8b2, IE7 and IE6 in
line. That should do - at least for now.
------------
The most standard compliant browsers "get it" right away, but some older
versions need additional workarounds that makes the styles look a bit
complicated.
To help on understanding I've added comments/notes for which browsers
use which styles, but all styles are needed - in the exact order - for
this to work.
------------
Details:
1: since you have images of varying width, the shadow must shrink-wrap.
Turning #content #pic into an 'inline-block' takes care of that.
2: Gecko pre Fx3 doesn't support 'inline-block', so they are given a
fallback to 'table' with auto-margins.
3: IE7/6 don't apply 'inline-block' properly without some extra
trickery, so they are targeted separately with 'inline'.
4: an 'inline-block' gets centered same as text, which 'text-align:
center' on #content #wrap takes care of.
5: IE6/7 don't have the "almost standard" rendering of "lone images in
boxes", so 'display: block' is added on #content #pic img - for all
browsers.
6: IE6/7 still add a few pixels below the image - making the shadow look
odd, so a few pixels are subtracted only for these IE versions. Are
other ways to fix this problem, but I found this solution to be most stable.
regards
Georg
--
http://www.gunlaug.no
______________________________________________________________________
css-discuss [[email protected]]
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/
