[css-d] Centering with margin:auto - help my browser compatibility test
All, I was working on a layout when I discovered that depending on which browser you use, margin:auto is calculated differently. Specifically, I was trying to make certain content elements flush up with a border that was part of a centered background image. I noticed that in IE, if you descrease or increase the browser window by 1 pixel increments, it alternately breaks/fixes the layout. By broken I mean the content is shifted 1 pixel to the left, causing it to overlap the border on that side and leave 1 pixel of white on the other. I subsequently figured out that it works in IE (6) if your background is an odd number of pixels wide and your div is an even number of pixels wide. I created 4 different tests, and tested IE, firefox, and Opera, and got differnet results for each. So far there isn't one scenario that seems to work in all browsers. I plan to test Konquerer later, but I don't have a Mac so I can't test Safari. If anyone would like to help me test (or is curious about the results), you can find them here: http://onefreevoice.com/~haaseg/even_even.html Also, if anyone has seen this before, has seen more information somewhere on the net (I searched a bit but did not find anything), or better yet has a solution, please let me know. Thanks, Greg Haase onefreevoice.com __ 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/
Re: [css-d] Centering with margin:auto - help my browser compatibility test
Roger, You're probably correct that it is some sort of rounding issue. Weird that the background and the div wouldn't behave the same (IE), and weirder still that Firefox renders correctly for an even width div and incorrectly for an odd width div (regardless of background image). I guess with knowing the exact width of the browser and some more careful testing we could deduce exactly how each browser handles the odd number. It probably isn't worth the time though. I won't show a link to the project I'm working on... a.) there are a million other things that need to be fixed on it right now, and b.) it's in a local access only development environment. I do believe that I'm going to try a different layout technique to get the results I want across all browsers. Or I'm going to alter the layout to one that doesn't need to be so pixel perfect (maybe best for my sanity). Right now I'm thinking of just adding another parent div the width of the background with position:relative and lining up the content position:absolute with a small left offset. It seems like an extraneous div, but it should work with minimal extra bandwidth. I added your test results to my chart - if you would like your name linked somewhere in the attribution, please e-mail me off-list with the destination. Thanks, Greg Haase onefreevoice.com Roger Roelofs wrote: Greg, firefox 1.501 matches ff 1.07 from your chart and Safari 1.3.2 matches Opera 8.51 from your chart. I think the anomaly is a rounding inconsistency. If yo have a body that is 873px wide and a background image that is 872px wide, that is to be centered one side must have 1px where the background image isn't covering. Which side is the 'right' side? Is it the same side for background images as it it is for centered content? I don't recall seeing this situation addressed in the spec, so you can expect some variation among compliant user agents. Can we see the page that started this investigation? There may be a workaround but it will depend on the specifics of the page in question. Having pages 'look alike' across browserland is not very hard. Having pages match pixel for pixel is an order of magnitude more difficult. Usually you can obtain the look you want without the need for pixel perfect placement. hth __ 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/
