469,328 Members | 1,327 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,328 developers. It's quick & easy.

inline margins in IE

I have something like this:

<span>a</span><span style="margin-left: 15px">b</span>

It appears to me that horizontal margins are allowed for inline
elements. (broken on preceding element right margin also)

http://www.w3.org/TR/CSS21/box.html#q11 section 8.6

Is that right?

This fails on IE5 win, it sets no margin. Is IE5 broken in regard to
this, or am I broken? Is there an IE5 fix/simulation? Does this work in IE6?

Jeff
Jul 20 '05 #1
2 2983
Jeff Thies <je**@spamalanadingong.com> wrote:
<span>a</span><span style="margin-left: 15px">b</span>

It appears to me that horizontal margins are allowed for inline
elements. (broken on preceding element right margin also)
All properties are allowed for all elements, but not all properties take
effect on all elements, or "apply to" all elements (to use the CSS
jargon). This may sound like cutting hairs, but the point is that there's
a difference being incorrect (which might mean that a browser may do
whatever it likes, or requirements on error processing might be imposed)
and not taking effect by the spec. Moreover, a property that does not
"apply to" an element might still affect its children through
inheritance.

So e.g. <span style="margin: 15px"> would still be correct CSS, but only
the horizontal margins would "apply to" the element (normally - when
the display property for the element has the value inline, as it by
default has for <span>).
This fails on IE5 win, it sets no margin.
Strange. I have no IE 5 to test this with, but I suspect that this might
depend on other things on the page - or does this really happen in a
minimal test case?
Does this work in IE6?


Yes, both in "standards" mode and in "quirks" mode. This is what makes it
strange that it does not work on IE 5.

Note: in many cases, one can use padding properties instead of margin
properties, to achieve the same effect, and padding properties often
apply when margin properties don't. In a situation like your simple test
case, I'm pretty sure that margin-left would do the job on IE 5 as well.

--
Yucca, http://www.cs.tut.fi/~jkorpela/
Jul 20 '05 #2
<snip>

So e.g. <span style="margin: 15px"> would still be correct CSS, but only
the horizontal margins would "apply to" the element (normally - when
the display property for the element has the value inline, as it by
default has for <span>).

This fails on IE5 win, it sets no margin.

Strange. I have no IE 5 to test this with, but I suspect that this might
depend on other things on the page - or does this really happen in a
minimal test case?


I just tried this:

<span style="margin-right: 50px">margin-right: 50px</span><span
style="margin-left: 15px">margin-left: 15px</span>

<span style="padding-right: 50px">padding-right: 50px</span><span
style="padding-left: 15px">padding-left: 15px</span>

with nothing else.

That fails in my IE5 windows. It "works" if I set display: block, but
that's not what I wanted.

Usually when I ask these questions I've been given an "exact" design
specification, and I'm trying to do this in the least ugly way. I'm the
only one who cares about the html. In this case they wanted this:

<URL: http://206.206.77.3/cgi-bin/navmaker.pl >
and I was trying to do this without the hidden images or non breaking
spaces.

BTW, just changing the list-style-image works pretty well but has enough
presentational margin differences to be unacceptable. It's really hard
to get lists to look the same across UA's.

Thanks,
Jeff

Does this work in IE6?

Yes, both in "standards" mode and in "quirks" mode. This is what makes it
strange that it does not work on IE 5.

Note: in many cases, one can use padding properties instead of margin
properties, to achieve the same effect, and padding properties often
apply when margin properties don't. In a situation like your simple test
case, I'm pretty sure that margin-left would do the job on IE 5 as well.

Jul 20 '05 #3

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

12 posts views Thread by Stanimir Stamenkov | last post: by
10 posts views Thread by yawnmoth | last post: by
1 post views Thread by Jeff Thies | last post: by
5 posts views Thread by KiwiBrian | last post: by
7 posts views Thread by massic80 | last post: by
reply views Thread by zhoujie | last post: by
reply views Thread by Purva khokhar | last post: by
reply views Thread by haryvincent176 | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.