[css-d] inline-block ignored by IE6

2009-03-16 Thread Geoffrey Hoffman 
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:

   !-- Example 1 --
   h1 {
  font-size:160%;
  font-family:Times New Roman, Times, serif;
  font-variant:small-caps;
  border-bottom:1px solid maroon;
   } 
   h1Lorem Ipsum Dolor Sit Amet/h1
   !-- End Example 1 --


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...


   !-- Example 2 --
   h1 {
  font-size:160%;
  font-family:Times New Roman, Times, serif;
  font-variant:small-caps;
   }
   h1 span {
  border-bottom:1px solid maroon;
   }
   h1spanLorem Ipsum Dolor Sit Amet/span/h1
   !-- End Example 2 --


I just discovered that display:inline-block gives me exactly what I want
in Gecko:


   !-- Example 3 --
   h1 {
  font-size:160%;
  font-family:Times New Roman, Times, serif;
  font-variant:small-caps;
  border-bottom:1px solid maroon;
  display:inline-block;
   }
   h1Lorem Ipsum Dolor Sit Amet/h1
   !-- End Example 3 --


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/

Re: [css-d] inline-block ignored by IE6

2009-03-16 Thread Bettina 
hi geoffrey,

did you try 

display:inline

put it in example 3 and it seems to work everywhere.

tina 



 Von: Geoffrey Hoffman geo...@globalmediaminds.com
 Datum: Mon, 16 Mar 2009 11:44:47 -0700
 An: CSS-Discuss css-d@lists.css-discuss.org
 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:
 
!-- Example 1 --
h1 {
   font-size:160%;
   font-family:Times New Roman, Times, serif;
   font-variant:small-caps;
   border-bottom:1px solid maroon;
} 
h1Lorem Ipsum Dolor Sit Amet/h1
!-- End Example 1 --
 
 
 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...
 
 
!-- Example 2 --
h1 {
   font-size:160%;
   font-family:Times New Roman, Times, serif;
   font-variant:small-caps;
}
h1 span {
   border-bottom:1px solid maroon;
}
h1spanLorem Ipsum Dolor Sit Amet/span/h1
!-- End Example 2 --
 
 
 I just discovered that display:inline-block gives me exactly what I want
 in Gecko:
 
 
!-- Example 3 --
h1 {
   font-size:160%;
   font-family:Times New Roman, Times, serif;
   font-variant:small-caps;
   border-bottom:1px solid maroon;
   display:inline-block;
}
h1Lorem Ipsum Dolor Sit Amet/h1
!-- End Example 3 --
 
 
 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/

Re: [css-d] inline-block ignored by IE6

2009-03-16 Thread Bill Brown 
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;
   }
h1Lorem Ipsum Dolor Sit Amet/h1
~~~

Hope it helps.
--Bill

-- 
!--
  ! Bill Brown macnim...@gmail.com
  ! Web Developologist, WebDevelopedia.com
--
__
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

2009-03-16 Thread Geoffrey Hoffman 
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;
   }
h1Lorem Ipsum Dolor Sit Amet/h1
~~~

Hope it helps.
--Bill

-- 
!--
  ! Bill Brown macnim...@gmail.com
  ! Web Developologist, WebDevelopedia.com
--
__
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

2009-03-16 Thread Milano 
Can't you use h1uTitle/uh1?

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;
   }
 h1Lorem Ipsum Dolor Sit Amet/h1
 ~~~

 Hope it helps.
 --Bill

 --
 !--
  ! Bill Brown macnim...@gmail.com
  ! Web Developologist, WebDevelopedia.com
 --
 __
 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

2009-03-16 Thread Bill Brown 
Milano wrote:
 Can't you use h1uTitle/uh1?

The u tag is depracated [1] and is in many ways an inelegant solution.

[^1] http://www.w3schools.com/tags/tag_u.asp

-- 
!--
  ! Bill Brown macnim...@gmail.com
  ! Web Developologist, WebDevelopedia.com
--
__
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

2009-03-16 Thread Ingo Chao 
2009/3/16 Geoffrey Hoffman geo...@globalmediaminds.com:
...
 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/