Re: [css-d] inline-block ignored by IE6
2009/3/16 Geoffrey Hoffman : ... > I've already had a look at trying to force hasLayout, using zoom: 1 [1], > and other IE6/7 inline-block posts[2] but none seem to work in my case. > [1] http://www.satzansatz.de/cssd/onhavinglayout.html > [2] http://www.brunildo.org/test/InlineBlockLayout.html see [2], Conclusions, "Elements having both hasLayout and display:inline work similarly to the standard inline-blocks ..." Ingo __ css-discuss [cs...@lists.css-discuss.org] 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/
Re: [css-d] inline-block ignored by IE6
Milano wrote: > Can't you use Title? The tag is depracated [1] and is in many ways an inelegant solution. [^1] http://www.w3schools.com/tags/tag_u.asp -- __ css-discuss [cs...@lists.css-discuss.org] 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/
Re: [css-d] inline-block ignored by IE6
Can't you use Title?
Rodrigo Ribeiro de Abreu
On Mon, Mar 16, 2009 at 4:17 PM, Geoffrey Hoffman <
geo...@globalmediaminds.com> wrote:
> Thanks Bill, Bettina. It works perfectly now.
>
> "...if you trigger hasLayout on a block element, and then set it to
> display:inline, it magically becomes an inline-block in IE!" [1]
>
> I wonder if we will ever regain all of the time we've wasted trying to
> get IE6 to behave.
>
> [1]
> http://foohack.com/2007/11/cross-browser-support-for-inline-block-stylin
> g/
>
>
> -Original Message-
> From: Bill Brown [mailto:macnim...@gmail.com]
> Sent: Monday, March 16, 2009 12:11 PM
> To: Geoffrey Hoffman
> Cc: css-d@lists.css-discuss.org
> Subject: Re: [css-d] inline-block ignored by IE6
>
> Geoffrey Hoffman wrote:
> > I've already had a look at trying to force hasLayout, using zoom: 1
> [1],
> > and other IE6/7 inline-block posts[2] but none seem to work in my
> case.
> >
> > Any suggestions?
>
> The display:inline must be in a separate rule for IE.
> This should do it:
>
> ~~~
> h1
> {
> border-bottom: 1px solid maroon;
> display: inline-block;
> font-size: 160%;
> font-family: "Times New Roman", Times, serif;
> font-variant: small-caps;
> }
> h1
> {
> /* FOR IE: _MUST_ BE IN A SEPARATE RULE */
> display: inline !ie;
> }
> Lorem Ipsum Dolor Sit Amet
> ~~~
>
> Hope it helps.
> --Bill
>
> --
>
> __
> css-discuss [cs...@lists.css-discuss.org]
> 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/
>
__
css-discuss [cs...@lists.css-discuss.org]
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/
Re: [css-d] inline-block ignored by IE6
Thanks Bill, Bettina. It works perfectly now.
"...if you trigger hasLayout on a block element, and then set it to
display:inline, it magically becomes an inline-block in IE!" [1]
I wonder if we will ever regain all of the time we've wasted trying to
get IE6 to behave.
[1]
http://foohack.com/2007/11/cross-browser-support-for-inline-block-stylin
g/
-Original Message-
From: Bill Brown [mailto:macnim...@gmail.com]
Sent: Monday, March 16, 2009 12:11 PM
To: Geoffrey Hoffman
Cc: css-d@lists.css-discuss.org
Subject: Re: [css-d] inline-block ignored by IE6
Geoffrey Hoffman wrote:
> I've already had a look at trying to force hasLayout, using zoom: 1
[1],
> and other IE6/7 inline-block posts[2] but none seem to work in my
case.
>
> Any suggestions?
The display:inline must be in a separate rule for IE.
This should do it:
~~~
h1
{
border-bottom: 1px solid maroon;
display: inline-block;
font-size: 160%;
font-family: "Times New Roman", Times, serif;
font-variant: small-caps;
}
h1
{
/* FOR IE: _MUST_ BE IN A SEPARATE RULE */
display: inline !ie;
}
Lorem Ipsum Dolor Sit Amet
~~~
Hope it helps.
--Bill
--
__
css-discuss [cs...@lists.css-discuss.org]
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/
Re: [css-d] inline-block ignored by IE6
Geoffrey Hoffman wrote:
> I've already had a look at trying to force hasLayout, using zoom: 1 [1],
> and other IE6/7 inline-block posts[2] but none seem to work in my case.
>
> Any suggestions?
The display:inline must be in a separate rule for IE.
This should do it:
~~~
h1
{
border-bottom: 1px solid maroon;
display: inline-block;
font-size: 160%;
font-family: "Times New Roman", Times, serif;
font-variant: small-caps;
}
h1
{
/* FOR IE: _MUST_ BE IN A SEPARATE RULE */
display: inline !ie;
}
Lorem Ipsum Dolor Sit Amet
~~~
Hope it helps.
--Bill
--
__
css-discuss [cs...@lists.css-discuss.org]
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/
Re: [css-d] inline-block ignored by IE6
hi geoffrey,
did you try
display:inline
put it in example 3 and it seems to work everywhere.
tina
> Von: Geoffrey Hoffman
> Datum: Mon, 16 Mar 2009 11:44:47 -0700
> An: CSS-Discuss
> Betreff: [css-d] inline-block ignored by IE6
>
> Hi List,
>
> I'm trying to code a Photoshop layout given to me where the H1 element
> has a border-bottom that is only the length of the text. I first tried
> this:
>
>
>h1 {
> font-size:160%;
> font-family:"Times New Roman", Times, serif;
> font-variant:small-caps;
> border-bottom:1px solid maroon;
>}
>Lorem Ipsum Dolor Sit Amet
>
>
>
> The problem with the above is that the maroon line goes all the way to
> the right edge of the container. As it should; H1 is a block level
> element.
>
> Even though the below example looks perfect, I would like to avoid using
> a span tag if possible, because in addition to extraneous markup, the
> site content will be editable from within a CMS and I can't expect my
> users to know about inserting span tags inside their h1's...
>
>
>
>h1 {
> font-size:160%;
> font-family:"Times New Roman", Times, serif;
> font-variant:small-caps;
>}
>h1 span {
> border-bottom:1px solid maroon;
>}
>Lorem Ipsum Dolor Sit Amet
>
>
>
> I just discovered that display:inline-block gives me exactly what I want
> in Gecko:
>
>
>
>h1 {
> font-size:160%;
> font-family:"Times New Roman", Times, serif;
> font-variant:small-caps;
> border-bottom:1px solid maroon;
> display:inline-block;
>}
>Lorem Ipsum Dolor Sit Amet
>
>
>
> But as with most wonderfully simple solutions, of course, IE6
> misbehaves.
>
> I've already had a look at trying to force hasLayout, using zoom: 1 [1],
> and other IE6/7 inline-block posts[2] but none seem to work in my case.
>
> Any suggestions?
>
> Thanks,
>
> Geoff
>
> [1] http://www.satzansatz.de/cssd/onhavinglayout.html
> [2] http://www.brunildo.org/test/InlineBlockLayout.html
>
> __
> css-discuss [cs...@lists.css-discuss.org]
> 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/
>
__
css-discuss [cs...@lists.css-discuss.org]
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/
[css-d] inline-block ignored by IE6
Hi List,
I'm trying to code a Photoshop layout given to me where the H1 element
has a border-bottom that is only the length of the text. I first tried
this:
h1 {
font-size:160%;
font-family:"Times New Roman", Times, serif;
font-variant:small-caps;
border-bottom:1px solid maroon;
}
Lorem Ipsum Dolor Sit Amet
The problem with the above is that the maroon line goes all the way to
the right edge of the container. As it should; H1 is a block level
element.
Even though the below example looks perfect, I would like to avoid using
a span tag if possible, because in addition to extraneous markup, the
site content will be editable from within a CMS and I can't expect my
users to know about inserting span tags inside their h1's...
h1 {
font-size:160%;
font-family:"Times New Roman", Times, serif;
font-variant:small-caps;
}
h1 span {
border-bottom:1px solid maroon;
}
Lorem Ipsum Dolor Sit Amet
I just discovered that display:inline-block gives me exactly what I want
in Gecko:
h1 {
font-size:160%;
font-family:"Times New Roman", Times, serif;
font-variant:small-caps;
border-bottom:1px solid maroon;
display:inline-block;
}
Lorem Ipsum Dolor Sit Amet
But as with most wonderfully simple solutions, of course, IE6
misbehaves.
I've already had a look at trying to force hasLayout, using zoom: 1 [1],
and other IE6/7 inline-block posts[2] but none seem to work in my case.
Any suggestions?
Thanks,
Geoff
[1] http://www.satzansatz.de/cssd/onhavinglayout.html
[2] http://www.brunildo.org/test/InlineBlockLayout.html
__
css-discuss [cs...@lists.css-discuss.org]
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/
