Woah! Great! Thank you!! :) Now it looks exactly like I wanted it to. I learned and still learn a lot!
Best wishes Juergen Gunlaug Sørtun schrieb: > 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 ______________________________________________________________________ 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/
