On 7/31/06, I wrote about http://mss.uchicago.edu/MRB/citation_example.html:
> It looks like IE is having issues with trying to juggle the > text-indent along with the positioning and the margin. I found that > replacing the margin-left: 3em with padding-left: 3em, setting the > label's left position to zero, and then giving the paragraph layout, > seemed to do the trick. On 7/31/06, Michael Boudreau <[EMAIL PROTECTED]> wrote: > Thanks for this, Michael. Is replacing margins with padding a > technique that solves other problems too? I was trying different > positioning and floating options myself without much luck, and it > felt pretty random, so I'm wondering if I can draw any kind of > generalized technique from your solution. I'm not sure it's really a generalization, but my train of thought followed this path: 1) The <span> is an inline element, which I've found tends to be harder to grasp than block elements, when it comes to absolute positioning. Maybe it's as complicated for IE as it is for my head, so let's make the <span> a block element. 2) That didn't change anything, so maybe adding the text-indent is the complexity. Maybe there's a way to fake out the text indent? Maybe I can remove the text-indent, make the <span> position relative, then shift it left 3ems. The space taken up by the <span> remains where it is, mimicking the text-indent, but shifting it left makes it appear where you want it. 3) That works, but only if the positioned text is always the same width, which seems unreasonable. Let's reinsert the text-indent, and try floating it left and adding negative left margin. 4) That's buggy, so let's start over and, instead of using negative positioning, let's make the left position zero, and use padding to move the content over instead of margin. 5) That looks like it's about right, except for layout issues, so let's add layout with height: 1%. 6) Looks good, sending out e-mail. This points out one of CSS's strengths -- there's usually more than one way to skin a cat. It's really great practice to think through a number of different ways to achieve an effect, to get a sense of just how much variety can be created just using the basic "box model" and "position/float" concepts. I'm pretty lucky, in that I work with several other front-end developers who use CSS. We once put together some exercises, where we looked at a mockup of a simple element like a footnote and then went off to make the most elegant code we could to follow the mockup. It amazed me how many different ways people chose to achieve the same effect. So maybe that's the generalization -- borrowing from PERL, TMTOWTDI.[1] > In the meantime, I also tried the <dl> approach, which works: <snip /> > Float the <dt> left, and it appears to begin on the same line as the > <dd> text, which can then be formatted as a regular or hanging indent > in the usual way. I prefer the <p> markup for its clarity, but the > <dl> approach doesn't require IE-specific hacks. You might want to see if you need to add layout in other circumstances, too. If so, you might end up feeding IE-specific code in a separate stylesheet, or some other way to send some specific styles to IE only. If that's the case, then adding layout to the paragraphs might simply be an addition to those rules. Changing from margin to padding should work in all the other browsers. HTH, Michael [1] http://catb.org/jargon/html/T/TMTOWTDI.html ______________________________________________________________________ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
