Re: [css-d] Font size dilemma
On 2009/03/15 10:27 (GMT-0400) Tim Climis composed: It seems that this whole font sizing mess boils down to the fact that pixel is not a standardized unit of measure. one pixel on my monitor is a different size from one pixel on your monitor. Exactly the reason it's best to size nothing important in px. But a point is a standardized unit of measure. it's 1/72 of an inch. And an inch is 0.0254 meters. And meters are well defined. This is also true, except on a computer display. Most computer displays have a physical amount of px per inch or cm that varies widely, from less than 40/in in some environments to more than 200/in at the other extreme. The heart of the range last century when the internet took off was much lower than it is today, around 70 or so then, closer to 90 today, with a wider variation today than yesteryear. The most popular operating systems though, assume a fixed amount of px/in, usually 96. Thus on a computer display the value of an inch or cm is a logical one, not a physical one. The disparity between a typical logical inch and a real inch used to average much higher than it does today. In context, this meant that text that would print at 12pt would typically display on screen at a seemingly gargantuan real 16pt or more. Today, with higher average display DPI, it's about as likely that 12pt will display smaller than print than it would larger. ...it stands to reason that if you want your fonts to be 10pt (which is normal I want my fonts to be what I can read, not what you think looks good. It's my puter. CSS is designed to suggest, not mandate. for print media) instead of 12 or 16pt (which is the common default size at the most common monitor resolutions) 12pt (IE) or 16px (Safari, Gecko), big difference from 16pt. why not just set the font size to 10pt? At least four reasons: 1-As explained above, a pt on a computer display is a logical size that varies quite a bit among environments. 2-Like px, pt sizing totally disregards user preference, which is rude. 3-Usability experts recommend 10pt as a minimum size, a size below which no page content should go below, including fine print. 4-IE's text sizer has no effect on pt (or px) sized text. As to why 96 assumed instead of 72: http://blogs.msdn.com/fontblog/archive/2005/11/08/490490.aspx -- 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] Font size dilemma
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. -- 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/
[css-d] Display problems in Firefox
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 DIV. Left DIV contains registration form and right DIV contains features I have AdSense placed in my Left DIV, when viewed in IE6 and above the display is proper, but when I view it in Firefox the right side DIV 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/
Re: [css-d] Font size dilemma
2009/3/13 Michael Stevens bigm...@bigmikes.org:
-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/
Re: [css-d] Font size dilemma
2009/3/15 Michael Adams linux_m...@paradise.net.nz: 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-19D2A8FD7485displaylang=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] Display problems in Firefox
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
-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] Size calculations
2009/3/16 Gunlaug Sørtun gunla...@c2i.net: 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/
[css-d] WAS : Size calculations
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/
[css-d] input type=image active area shift
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/
Re: [css-d] WAS : Size calculations
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/
Re: [css-d] WAS : Size calculations
2009/3/16 Gunlaug Sørtun gunla...@c2i.net:
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] Font size dilemma
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/
[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-d] Equal heights solutions
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:
script type=text/javascript src=/includes/p7_eqCols2_10.js/script
body onLoad=P7_equalCols2(0,'left','p','main','p')
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/
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 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
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
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
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
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] Equal heights solutions
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: script type=text/javascript src=/includes/p7_eqCols2_10.js/script body onLoad=P7_equalCols2(0,'left','p','main','p') 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/
[css-d] IE 6 display issues
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] Font size dilemma
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/
Re: [css-d] IE 6 display issues
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:
http://www.satzansatz.de/cssd/onhavinglayout.html
--
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
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/
[css-d] Clear: Both DIV misbehaving in IE7
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] Clear: Both DIV misbehaving in IE7
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... http://www.brunildo.org/test/index.html 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] Clear: Both DIV misbehaving in IE7
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. http://www.chelseacreekstudio.com/ca/cssd/test-109.html -- 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] inline-block ignored by IE6
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/
[css-d] Strange lack of hover effect on BOTH IE6 and IE7
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:
!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Strict//EN
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd;
html xmlns=http://www.w3.org/1999/xhtml; xml:lang=en
head
meta http-equiv=Content-Type content=text/html; charset=iso-8859-1
titleUntitled Document/title
style type=text/css
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;
}
/style
/head
body
a href=http://www.someURL.com; class=titler
img src=donuts.gif alt=Donuts //a
/body
/html
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] Strange lack of hover effect on BOTH IE6 and IE7
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 p...@philmatt.com 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:
!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Strict//EN
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd;
html xmlns=http://www.w3.org/1999/xhtml; xml:lang=en
head
meta http-equiv=Content-Type content=text/html;
charset=iso-8859-1
titleUntitled Document/title
style type=text/css
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;
}
/style
/head
body
a href=http://www.someURL.com; class=titler
img src=donuts.gif alt=Donuts //a
/body
/html
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/
Re: [css-d] Layout still broken, new problems
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/
