[css-d] IE 6&7 Not responding to clears

[Keith Fjellman]

I've looked all over for an answer, but I've had no luck so here's hoping
you can help

I'm working on a design for a client and for some reason the IE's won't
expand with the content this time.  I've done all kinds of layouts and I've
tried all the solutions I can think of, but at this point I think I'm in too
deep and I'm missing something.

http://www.mindlike.net/Example/MockUp.html

 http://www.mindlike.net/Example/CSS/main.css

Any help is appreciated
__
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] Layout still broken, new problems

[Tim Climis]

On Tuesday, March 17, 2009 12:23:43 am Kim Brooks Wei wrote:
> Hi there People,
>
> I got my site to look the way I wish it to on my own Mac in Safari
> and FF but the layout seems broken in other environments. A friend
> using IE and another using FF told me that my type sits on top of the
> tiger and can't be read. They are not seeing the layout the way I
> wish it to look.
>
> Look I want here http://thewei.com/sandbox/tw/test/
> Look people are getting here http://thewei.com/sandbox/tw
>
> Help appreciated muchly.
>
> Cheers,
> Kimi

Just for additional input, it looks right on Konqueror and Linux Firefox.  
although, if your viewport is too narrow, when you side scroll the page, the 
bottom two paragraphs have no background color and the text becomes illegible 
over the position:fixed tiger.

---Tim
__
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] Layout still broken, new problems

[Kim Brooks Wei]

Hi there People,

I got my site to look the way I wish it to on my own Mac in Safari 
and FF but the layout seems broken in other environments. A friend 
using IE and another using FF told me that my type sits on top of the 
tiger and can't be read. They are not seeing the layout the way I 
wish it to look.

Look I want here http://thewei.com/sandbox/tw/test/
Look people are getting here http://thewei.com/sandbox/tw

Help appreciated muchly.

Cheers,
Kimi

-- 
This email sent by
Kimi Wei
201-475-1854  |  k...@thewei.com  |  thewei.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] Strange lack of hover effect on BOTH IE6 and IE7

[Atkinson, Sarah]

I think you can't do that in ie. You can only use hover to effect the  
a and not the img tags. Try taking out the img tag in the Css. The  
style should cascade down to the img anyway.

Sent from my iPhone

On Mar 16, 2009, at 11:15 PM, "Phil Matt"  wrote:

> De-lurking here.
>
> I've been working on a site that's my usual mostly-CSS thing.
>
> For some strange reason, I can't seem to get this simple hover  
> effect to
> work in EITHER IE6 or IE7 - works as expected in Firefox. Maybe it's
> been too long a day, but I can't seem to figure it out.
>
> In IE, NOTHING happens when you hover over the small GIF image - which
> is a graphic created from a specific font. The idea is to simulate the
> typical text-decoration you'd see on an ordinary text link. In FF, the
> expected red lower border appears on hover. Here's the code snippet:
>
>  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd";>
> http://www.w3.org/1999/xhtml""; xml:lang="en">
> 
> 
> Untitled Document
> 
>
> img {
> border: 0;
> }
> a:link img {
> text-decoration:none;
> padding:0;
> margin:0;
> border:0;
> }
> a:hover img, a:active img {
> border: 1px solid red;
> border-width: 0 0 3px 0;
> padding:0;
> margin:0;
> }
> 
> 
>
> 
>
> http://www.someURL.com"; class="titler">
> 
>
> 
> 
>
> What am I missing?
>
> TIA for your help.
>
>  Phil
> __
> 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] Strange lack of hover effect on BOTH IE6 and IE7

[Phil Matt]

De-lurking here.

I've been working on a site that's my usual mostly-CSS thing.

For some strange reason, I can't seem to get this simple hover effect to 
work in EITHER IE6 or IE7 - works as expected in Firefox. Maybe it's 
been too long a day, but I can't seem to figure it out.

In IE, NOTHING happens when you hover over the small GIF image - which 
is a graphic created from a specific font. The idea is to simulate the 
typical text-decoration you'd see on an ordinary text link. In FF, the 
expected red lower border appears on hover. Here's the code snippet:

http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd";>
http://www.w3.org/1999/xhtml""; xml:lang="en">


Untitled Document


img {
border: 0;
}
a:link img {
text-decoration:none;
padding:0;
margin:0;
border:0;
}
a:hover img, a:active img {
border: 1px solid red;
border-width: 0 0 3px 0;
padding:0;
margin:0;
}





http://www.someURL.com"; class="titler">





What am I missing?

TIA for your help.

 Phil
__
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

[Ingo Chao]

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] Clear: Both DIV misbehaving in IE7

[David Laakso]

Chris Knowles wrote:
> Hello, I have a page structure which contains a left and right floated div
> side-by-side with a third div that spans them both below using the clear:
> both property.
>
>
> However, when I have attempted to nest two new divs inside the third div
> (the one with the clear: both property), this pushes the third div below the
> two nested divs (as though the clear: both property is making the div clear
> ALL divs within the wrapper... even those nested within them).
>
>   
No crystal ball here... :-) .
This is one way to do it. Note thay IE/6 is is quirks.




-- 

A thin red line and a salmon-color ampersand forthcoming.

http://chelseacreekstudio.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] Clear: Both DIV misbehaving in IE7

[Gunlaug Sørtun]

Chris Knowles wrote:

> This problem is only occurring in IE7, the page displays as I would
> expect in both FF3, Safari and Chrome.

Will need live example in order to debug. IE7 has too many clear related
bugs.

You can look for something similar to your problem, and possible
solutions to it, here...


regards
Georg
-- 
http://www.gunlaug.no
__
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] Clear: Both DIV misbehaving in IE7

[Chris Knowles]

Hello, I have a page structure which contains a left and right floated div
side-by-side with a third div that spans them both below using the clear:
both property.

All three divs contain separate background images and were displaying
correctly in FF3 and IE7.

However, when I have attempted to nest two new divs inside the third div
(the one with the clear: both property), this pushes the third div below the
two nested divs (as though the clear: both property is making the div clear
ALL divs within the wrapper... even those nested within them).

This problem is only occurring in IE7, the page displays as I would expect
in both FF3, Safari and Chrome.

Can attempt to supply example code if the above doesn't make sense but am
bound by a non-disclosure agreement!
__
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] Font size dilemma

[Felix Miata]

On 2009/03/17 11:19 (GMT+1300) Richard Mason composed:

> On Mon, 16 Mar 2009, Cheryl D Wise wrote

>> However, Firefox does
>>not recognize the 120dpi or whatever other settings you choose in your OS
>>and will continue to display it as the browser's default point size.

> Firefox's default font size is in pixels, not points, so conversion from 
> points to pixels via screen dpi is not required.
> http://www.emdpi.com/fontsize.html

This is true. However, those who want their FF fonts to match IE fonts need
to adjust their FF size pref to match the px size IE uses for the actually
configured DPI. e.g. @120 DPI IE's 12pt default is precisely 20px. Those
astute enough to change the desktop DPI setting themselves should be
competent enough to adjust FF font size prefs.

There are open Mozilla bugs dealing with making it easier for the less astute
to not be bothered to encounter that difference, such as those whose laptops
are OEM set to 120 and don't know anything about DPI or its impact. Related
is a request on Linux to have FF inherit its size pref directly from the
desktop application pref.
-- 
"The plans of the diligent lead to profit as surely
as haste leads to poverty." Proverbs 21:5 NIV

 Team OS/2 ** Reg. Linux User #211409

Felix Miata  ***  http://fm.no-ip.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] IE 6 display issues

[David Laakso]

Kym Costanzo wrote:
>  
>
>
> Anyone who enjoys dealing with the IE6 bug fixing (ha), please take a look
> at my site and let me know where I've gone so astray. Yes, I'm new to CSS so
> I apologize if it's stupid errors. J
>
>  
>
> http://www.kymcostanzo.com
>
>
> Kym  
>   




The "star HTML" hack can be used to feed specific style corrections to IE/6.
* html #mainbody {width:710px; } /*IE/6 needs a little more horizontal 
playroom*/
* html #maincontent {height: 1%;} /*hasLayout trigger*/
Please see:




-- 

A thin red line and a salmon-color ampersand forthcoming.
http://chelseacreekstudio.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] Font size dilemma

[Richard Mason]

On Mon, 16 Mar 2009, Cheryl D Wise wrote

> However, Firefox does
>not recognize the 120dpi or whatever other settings you choose in your OS
>and will continue to display it as the browser's default point size.

Firefox's default font size is in pixels, not points, so conversion from 
points to pixels via screen dpi is not required.
http://www.emdpi.com/fontsize.html

-- 
Richard Mason
http://www.emdpi.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-d] IE 6 display issues

[Kym Costanzo]

Hi all, 

 

I thought I had my site working correctly in IE 6 and IE 7 but now that I'm
all done and went back I see that there are issues in IE6 still. Site works
fine in IE7 and Firefox. The content in my main div is dropping down below
the bottom of my sidebar. So I thought maybe it was either a size/padding
issue or a float issue, but I just installed Dreamweaver CS4 and the way
that it is rendering in the WYSIWYG mode is making me think there's more to
my problem.

 

Anyone who enjoys dealing with the IE6 bug fixing (ha), please take a look
at my site and let me know where I've gone so astray. Yes, I'm new to CSS so
I apologize if it's stupid errors. J

 

http://www.kymcostanzo.com

 

Thanks so much in advance, 

 

Kym  

__
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] Equal heights solutions

[Al Sparber]

> I just posted this got some wonderful answers, but I'm still looking

> for an ideal solution to equal heights problem
>
>
> I finally chose to use another javascript:
> 
>
> 
> which I don't like very much  as you can always see the leftnav "catch
> up" with the content area.
> We are also considering some expandable menus in the content area and
> so far they didn't work in Firefox.

Our script is a bit long in the tooth, though you could write the event 
handlers in the script (and the animation can be turned off). The better 
solution, especially if you want expanding stugg in the columns is to use 
CSS faux columns.

-- 
Al Sparber - PVII
http://www.projectseven.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

[Bill Brown]

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

[Milano]

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

[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;
   }
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

[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;
   }
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

[Bettina]

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] Equal heights solutions

[Nancy Johnson]

Hi,

I just posted this got some wonderful answers, but I'm still looking
for an ideal solution to equal heights problem

This is an older intereractive site.  http://www-odi.nhtsa.dot.gove/ewr/

I had been using YellowPencil's javascript solution until I discovered
it didn't work with IE8.

I then tried the CSS solution, I believe from Position is everything

#wrapper {overflow:hidden;}
#left, right {padding-bottom: 5000em;
margin-bottom: -4999.5em;}

It was great! however, we have one page with div id anchor tags in
which is a known error to this solution

I finally chose to use another javascript:



which I don't like very much  as you can always see the leftnav "catch
up" with the content area.
 We are also considering some expandable menus in the content area and
so far they didn't work in Firefox.

I also began to look at CSS tables, cool, and it doesn't work in IE6
ir IE7 and I would have to rebuild the entire site.

Thanks in advance for any other solutions.

Nancy
__
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

[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:

   
   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/

Re: [css-d] Font size dilemma

[Michael Adams]

On Mon, 16 Mar 2009 02:19:42 -0400
Came this utterance formulated by Felix Miata to my mailbox:

> On 2009/03/16 14:41 (GMT+0900) Philippe Wittenbergh composed:
> 
> > Felix Miata wrote:
> 
> >> I haven't figured out where Vrinda came from, other than it's a M$
> >font> NAICT originally from mid-2004.
> 
> > Vrinda is part of a default install of Windows XP (I wouldn't know
> > how it got installed on my VM's otherwise).
> 
> As I haven't been able to find a copy dated older than mid-2004, I
> don't believe it could have been part of an original XP install, nor a
> SP1 install. I keep copies of the oldest known versions of most M$
> fonts just for answering questions like this. I think Vrinda may be
> part of SP2 originally.

Correct
http://www.wazu.jp/gallery/Fonts_Bengali.html

-- 
Michael

All shall be well, and all shall be well, and all manner of things shall
be well

 - Julian of Norwich 1342 - 1416
__
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] WAS : Size calculations

[Ib Jensen]

2009/3/16 Gunlaug Sørtun :
> Ib Jensen wrote:

>> http:/ikjensen.dk/test/
>>
>> Where is IE hiding the text ??
> Stacked behind the page-background.
>
> Add...
> #menu-frame {position: relative;}
> ...to bring it up front.

Thanks.

And changing em to % is a good idea ??



-- 
Regards / Mhv.
Ib K. jensen - http://ikjensen.dk
__
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] WAS : Size calculations

[Gunlaug Sørtun]

Ib Jensen wrote:

> http:/ikjensen.dk/test/
> 
> 
> Where is IE hiding the text ??

Stacked behind the page-background.

Add...

#menu-frame {position: relative;}

...to bring it up front.

regards
Georg
-- 
http://www.gunlaug.no
__
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] input type=image active area shift

[Ido dekkers]

Hi

i have a strange problem with this site :
http://test3.dekkers.net/marriage.html
it's a site i inherited and need to fix.

the problem is with the arrow buttons on the bottom:
in IE all works fine, but in any standards compliant browser, the active
area of the button seems not to be connected with the button itself?
when i try to move the buttons down - the active area seems to stay in
place, and only where the input still covers it - as soon as the input
covers none of the active area the button stops working.
in the current situation only the upper half of the button is clickable.

I've tried every imaginable positioning technique - absolute, relative...
none work, I've tried just for the test to add an input type=button - same
problem...

does anyone here have an idea ?

thanks

Ido
__
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] WAS : Size calculations

[Ib Jensen]

Following a suggestion to a layout I had this result in :

Firefox 3.0 :
http://ikjensen.dk/test/capture_ff.jpg

IE 6.02
http/ikjensen.dk/test/capture_ie.jpg

The interval between the pictures are about 2 min.
Changing from FF to IE

The HTML and css :
http/ikjensen.dk/test/


Where is IE hiding the text ??





-- 
Regards / Mhv.
Ib K. jensen - http://ikjensen.dk
__
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] Size calculations

[Ib Jensen]

2009/3/16 Gunlaug Sørtun :
> Ib Jensen wrote:

> Think I got the above about right. Hard to compress "a thousand choices"
> into a mail.


Thank you very much for the explanation.

I must invite my self for a long weekend, for a little chit-chat about
developing sites. ;-)



-- 
Regards / Mhv.
Ib K. jensen - http://ikjensen.dk
__
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] Font size dilemma

[Cheryl D Wise]

-Original Message-
From: Felix Miata

>> why not just set the font size to 10pt?  

>4-IE's text sizer has no effect on pt (or px) sized text.

Having used a very high resolution to physical size Windows tablet PC for
years I know that if you use points on a Windows computer IE will size any
page that uses points to the DPI set in the OS in IE. However, Firefox does
not recognize the 120dpi or whatever other settings you choose in your OS
and will continue to display it as the browser's default point size. 

One other factor to throw into the mix is the popularity of LCD screens
where the display degrades considerably when you change the screen
resolution to anything other than the native screen resolution. Hence my
familiarity with how Windows, browsers and applications handle dpi other
than 96. Problems in using pixel based container sizes, especially with
point based text has shown up in a number of desktop applications, not just
in browsers. 

Cheryl D Wise 



__
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] Display problems in Firefox

[Gunlaug Sørtun]

Ansari Samir wrote:

> Please visit the link for the display www.samruz.com/jb/PostJob.html 
> Please view the page in Firefox and IE to see the problem.

Replace...

#register_main_content {display: inline-table;}

...with...

#register_main_content {overflow: hidden;}

...and Gecko will line up those elements as intended.

regards
Georg
-- 
http://www.gunlaug.no
__
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] Font size dilemma

[Lesley Binks]

2009/3/15 Michael Adams :
> On Sat, 14 Mar 2009 18:42:06 -1000
> Came this utterance formulated by david to my mailbox:
>
>> Jukka K. Korpela wrote:
>> > Michael Stevens wrote:
>> >
>> >> Calibri I have but do not have installed all the time and use it
>> >maybe a> couple times a month. And I've never heard of Vrinda.
>> >
>> > I picked up Vrinda after considering the material at
>> > http://www.codestyle.org/css/font-family/sampler-WindowsResults.shtml
>> > and noticing that Vrinda is the only widely available sans-serif
>> > font where letters are small as compared with the font size. So it's
>> > the best backup for Calibri, the font I'd really like to use. As you
>> > can see from http://www.ascenderfonts.com/font/vrinda-bengali.aspx
>> > Vrinda was really designed for Bengali writing, but it has Latin 1
>> > characters too, so it might serve as a fallback font when you don't
>> > need other characters. I guess the Bengali orientation explains the
>> > large intrinsic line-height.
>>
>> Well, in my 20+ years of using computers, including desktop
>> publishing, graphic and web design work - I've never used a computer
>> that had either Calibri or Vrinda on it. And I used to be a real font
>> junky! (That spans every version of Windows, Mac OS7/8/9 and OS X, one
>> version of UNIX and several distros of Linux.)
>>
>
> Calibri is one of a set of Office 2007 fonts which can be obtained free
> with the new powerpoint viewer.
> http://www.microsoft.com/downloads/details.aspx?familyid=048DC840-14E1-467D-8DCA-19D2A8FD7485&displaylang=en
> http://en.wikipedia.org/wiki/Calibri
> It's use is expected to grow as uptake of office 2007, and this free
> viewer, gets established.
>
Thanks for posting that link.

I'm writing from an XP laptop here -  no Calibri installed - when I
get Word documents sent me using Calibri I see a gothic font in Open
Office.
- which can sometimes be amusing - but is most definitely probably not
what was intended.

Regards

L.
__
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] Font size dilemma

[Lesley Binks]

2009/3/13 Michael Stevens :
> -Original Message-
> From: Jukka K. Korpela [mailto:jkorp...@cs.tut.fi]
> Sent: Friday, March 13, 2009 12:23 PM
> To: CSS discuss
> Subject: Re: [css-d] Font size dilemma
>
> Leave aside the font-size, as a CSS property, or as a propery of a font, for
> a moment. What those people want is not small font size but small letters.
> Then you could set, say,
>
> body { font-family: Calibri, Vrinda, sans-serif; }
> * { line-height: 1.2; }
>
> The point is that Calibri and Vrinda have letters that are small with
> respect to the font size, so the text looks considerably smaller than, say,
> Arial of the same size. Either of these fonts is available on the great
> majority of computers, and regarding others, let's hope their sans-serif
> pleases the user.
>
I have neither Calibri nor Vrinda installed on my machine so with that
fontstack
I would see your site in the browser default sans-serif font and would also see
your 1.2 line height.

> --
>
> Working in the Graphic Design field I've seen and heard of a lot of fonts.
> Calibri I have but do not have installed all the time and use it maybe a
> couple times a month. And I've never heard of Vrinda. Because of the
> inherent problems with calling out REAL typefaces I rarely do it. A few
> exceptions might be:
>
> {font-family: Helvetica, Helvetica55, "Helvetica 55", HelveticaNeue, Helv,
> Swiss721, Swiss721BT, Arial, Arial, sans-serif;}
With this font stack I'd get to Swiss721BT before Arial.

> {font-family: Garamond, GarmondITC, "Garamond ITC", ITCGaramond, "ITC
> Garamond", Gatineau, serif;}

I have a "Garamond Premier Pro" font installed but browsers on my machine might
go to the default serif font on this stack.

> {font-family: Palatino, PalatinoLinotype, "Palatino Linotype", "Book
> Antiqua", PalmSprings, "Palm Springs", serif;}
>

I'd pick up the Palatino Linotype option here.

> But I usually only define them as serif or sans-serif. Less worrying that
> way...

Although two fonts may be classified as serif or sans-serif there is
a lot more to fonts which has to be taken into account for one to be considered
a substitute for another. I'm certainly not au fait with that yet.
I have therefore tend to use the default families.b
>
> Your theory is an interesting one, though.

Regards

L.
__
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] Display problems in Firefox

[Ansari Samir]

Hi,

I am having display problem using Google AdSense on my web page.
I have 2 parts on my web page each one in a seperate .

Left  contains registration form and right  contains features I
have AdSense placed in my Left , when viewed in IE6 and above the
display is proper, but when I view it in Firefox the right side  comes
to the next line and the display gets disturbed.

Please visit the link for the display www.samruz.com/jb/PostJob.html
Please view the page in Firefox and IE to see the problem.

Pleas Help !

Thanks & regards,

Ansari Samir.



-- 
M/S Leelan
123, S.V. Road, Khar (W), Mumbai - 400 052.
Cell: +919820200390 / +919223267824 Fax: +912226040803
Tel: +912226051830
__
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/