Re: [css-d] IE6, absolute positioning, percentage heights

[Thierry Koblentz]

> I'm trying to nest an absolutely positioned DIV inside of a relatively
> positioned DIV and give that nested DIV a percentage height.
>
> This works fine in all browsers (including IE7 and 8) but IE6 refused
> to give the nested DIV the height I specify. I've tried giving it has
> layout to no avail.

This is a known issue. 
One way to fix this would be to use a CSS expression to get the computed
height of the parent, you could try this:

* html .myAbsolutelyPositionedElement {
behavior: expression(
(this.runtimeStyle.behavior="none") && (this.runtimeStyle.height =
(this.parentNode.offsetHeight/2) + "px"));
}


Do *not* replace the "* html" hack with the "_property" hack here, because
IE7 would get that expression too.

--
Regards,
Thierry | www.tjkdesign.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] IE6 vertical spacing issue on LI elements (imagine that)

[Thierry Koblentz]

Hi Rob,

> Thank you David!
>
> I added a conditional "IE less than 7" style sheet with...
>
> * html #navbar ul li { height: 1%; }
>
>... and that threw the "has-layout" trigger you suggested, and as was
> indicated by the article link that you provided.

With the syntax David suggested there is no need to use a Conditional
Comment.
If you *already* have one then there is no need for "* html" in there.

--
Regards,
Thierry | www.tjkdesign.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] IE6, absolute positioning, percentage heights

[Alan Gresley]

D A wrote:
(snip)
> I have some more specific examples of the issue:
> 
(snip)
> This, does not:
> 
> 
>
>
>
>Hello World
>Hello World
>Hello World
>Hello World
>Hello World
>Hello World
>
> 
> 
> The difference between the two is that in the first case, I'm giving
> an explicit height to the container div. In the second one, I'm
> letting the contained relatively positioned div define the height of
> the container.
> 
> It appears that IE6 can't calculate the height of the container div
> based on the nested relatively positioned div and therefore doesn't
> know % of *what* to make the absolutely positioned div.
> 
> -DA


You need to hack IE6. It does make sense of some percentages.


   
   
Hello World
Hello World
Hello World
Hello World
Hello World
Hello World
   



.container {background: yellow; width: 100px; position: relative;}
.ap {background: red; height:50%; width: 100px; position:
absolute; top: 0px; right:0;}
.rp {position: relative;}

* html .container {overflow:hidden;} /* hack for IE6, hides overflowing 
padding */
* html .ap {padding-top:200%;top:auto;bottom:50%;} /* hack for IE6 to 
give some height */


Hopefully the ap box isn't for a image, could get complicated. If so, 
padding-bottom:200% also works.


-- 
Alan http://css-class.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] Header and footer height questions

[David Laakso]

Brian M. Curran wrote:
> Hi All,
> How come if I don't specify a height for my footer, as opposed to specifying 
> a height to 1%, then the top of it does NOT stay flush against my sideBar or 
> content div -- depending on whichever has the larger height? With no height 
> set there is a gap above the footer
>   

Set a 1px solid border on #container and a 1px border top on #footer so 
you can see what is happening. Add the ruleset #footer p to your style 
sheet. Kill the default margin on that p  with margin: 0; and position 
it with something like padding: 10px 0 10px  10px;

If you want any column tallest see faux column here 

Or equal height columns here 





> How come if I don't specify a height for my header, as opposed to specifying 
> a pixel height for it, then the background color doesn't shade behind my nav 
> bar?
>   

Almost most of the time it is best to let content determine height so 
that the page retains vertical fluidity and the text does not walk out 
of the bottom of its parent with font-scaling. Delete the height on the 
header and try padding-bottom of approx 30px on the header and the nav 
will fill with black and not head for Havana when users scale the fonts. 
Maybe.


> site: www brianmcurran dot com
>
> Sincerely,
> Brian
>   

Your CSS file shows a byte-order-mark in the Web Developer Toolbar. This 
is not a CSS issue but it is a ggod idea to correct it.
See Wikipedia 

Best,
~d





-- 
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] Header and footer height questions

[James Hopkins]

> How come if I don't specify a height for my footer, as opposed to  
> specifying a height to 1%, then the top of it does NOT stay flush  
> against my sideBar or content div -- depending on whichever has the  
> larger height?

I'm assuming you're seeing this behavior in IE6 or IE7, since 'height: 
1%' is commonly used as a haslayout trigger in these browsers. From  
what you've said, it sounds as though you should continue feeding IE6/ 
IE7 this property value to achieve your desired result.

> How come if I don't specify a height for my header, as opposed to  
> specifying a pixel height for it, then the background color doesn't  
> shade behind my nav bar?

You need to clear the float of 'DIV#nav' which you can do by adding  
'overflow:hidden' to 'DIV#header'. You can then remove your fixed  
height value for 'DIV#header', as this element's height will now be  
computed to take into account 'UL#nav', too.

__
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] Header and footer height questions

[Brian M. Curran]

Hi All,
How come if I don't specify a height for my footer, as opposed to specifying a 
height to 1%, then the top of it does NOT stay flush against my sideBar or 
content div -- depending on whichever has the larger height? With no height set 
there is a gap above the footer.

How come if I don't specify a height for my header, as opposed to specifying a 
pixel height for it, then the background color doesn't shade behind my nav bar?

site: www brianmcurran dot com

Sincerely,
Brian
__
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] IE6 vertical spacing issue on LI elements (imagine that)

[Rob Emenecker]

Thank you David!

I added a conditional "IE less than 7" style sheet with...

* html #navbar ul li { height: 1%; }

... and that threw the "has-layout" trigger you suggested, and as was
indicated by the article link that you provided.

Best,
Rob



Rob Emenecker @ Hairy Dog Digital
www.hairydogdigital.com
 
Please note: Return e-mail messages are only accepted from discussion groups
that this e-mail address subscribes to. All other messages are automatically
deleted.
 

> -Original Message-
> From: David Laakso [mailto:da...@chelseacreekstudio.com] 
> Sent: Monday, December 28, 2009 3:59 PM
> To: Rob Emenecker
> Cc: cs...@css-discuss.org
> Subject: Re: [css-d] IE6 vertical spacing issue on LI 
> elements (imagine that)
> 
> Rob Emenecker wrote:
> > I'm scratching my head trying to figure out how to resolve 
> a vertical 
> > spacing issue on IE6. (Yes, that old beast.)
> >
> > http://preview.floydcompanyinc.com
> >
> >
> > ...Rob
> >
> >   
> 
> 
> 
> 
> 
> 
> * html #navbar ul li a,
> * html #navbar ul li a:hover,
> * html #navbar ul li a.currpage {height:1%;}
> 
> reference: 
> 
> 
> ~d
> 
> 
> 
> --
> 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] IE6, absolute positioning, percentage heights

[D A]

> I'm trying to nest an absolutely positioned DIV inside of a relatively
> positioned DIV and give that nested DIV a percentage height.
>
> This works fine in all browsers (including IE7 and 8) but IE6 refused
> to give the nested DIV the height I specify. I've tried giving it has
> layout to no avail.

I have some more specific examples of the issue:

This works:


   
   


You'll see a 300px tall div with the top being red (the nested div
going 50%) and bottom being yellow (the container div).

This, does not:


   
   
   
   Hello World
   Hello World
   Hello World
   Hello World
   Hello World
   Hello World
   


The difference between the two is that in the first case, I'm giving
an explicit height to the container div. In the second one, I'm
letting the contained relatively positioned div define the height of
the container.

It appears that IE6 can't calculate the height of the container div
based on the nested relatively positioned div and therefore doesn't
know % of *what* to make the absolutely positioned div.

-DA
__
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] IE6 vertical spacing issue on LI elements (imagine that)

[David Laakso]

Rob Emenecker wrote:
> I'm scratching my head trying to figure out how to resolve a vertical
> spacing issue on IE6. (Yes, that old beast.)
>
> http://preview.floydcompanyinc.com
>
>
> ...Rob
>
>   






* html #navbar ul li a,
* html #navbar ul li a:hover,
* html #navbar ul li a.currpage {height:1%;}

reference: 


~d



-- 
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 smaller on IE 8 [error correction]

[David Laakso]

MEM wrote:
> Ok... I have a lot on the to do list already.
>
> I'm on my way to significantly change the css.
>
> In the meanwhile, I'm afraid the design given to me to reproduce, will not
> allow 0.85em instead of 0.75em, for example, simple because the text will
> not fit on the boxes.
>
> In order to allow something like that, probably some layout structure needs
> to change. The dead line is near, and I'm stressing. Still, I'd like to ask:
>
> If we allow the user to zoom,

You don't have any choice.

>  and if we allow the user to use its own
> font-size that she/he feels/needs 

Again, you don't have any choice.

> like, what are the consequences of using
> small fonts like 0.75em, instead of 0.85em ? 
>   


Like, some users may not be able to read it.
This does not mean the world will end if you use.


And as mentioned two or three times over the past year or so, a rule of 
thumb some authors use to set fonts is:
Primary content 100%.
Secondary content 95%.
Tertiary content 90%.



>
> Please advice,
> Márcio
>   

~d














> _

~d



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

[css-d] IE6 vertical spacing issue on LI elements (imagine that)

[Rob Emenecker]

Hi all,

I'm scratching my head trying to figure out how to resolve a vertical
spacing issue on IE6. (Yes, that old beast.)

Here is the site:

http://preview.floydcompanyinc.com

The left-hand navigation bar, and overall site structure, is behaving as
desired in IE7, IE8, FF3.5, and Safari 4. In IE6 everything is behaving okay
EXCEPT FOR the left-hand navigation bar. I've peeked at it using the IE Dev
toolbar, and the bounding box for the LI element seems to be what is off. I
cannot figure out what to adjust to get it inline with the other browsers. 

Normally I don't sweat IE6 all that much, as long as it degrades to a
usable, reasonable facsimile of the original. This spacing however, is too
much.

Thanks for any advice and guidance the collective can provide!

...Rob


Rob Emenecker @ Hairy Dog Digital
www.hairydogdigital.com
 
Please note: Return e-mail messages are only accepted from discussion groups
that this e-mail address subscribes to. All other messages are automatically
deleted.
 

__
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] IE6, absolute positioning, percentage heights

[D A]

I'm trying to nest an absolutely positioned DIV inside of a relatively
positioned DIV and give that nested DIV a percentage height.

This works fine in all browsers (including IE7 and 8) but IE6 refused
to give the nested DIV the height I specify. I've tried giving it has
layout to no avail.

Googling the issue returns a few mentions of the problem, but I have
yet to find a workaround.

For now, I'm using this to add some visual enhancements to elements on
a page, so, in the end, if I have to kill the effect for IE6, not the
end of the world, but it'd be nice if I could get it working in IE6.

Is anyone familiar with this problem and know if there is a workaround?

-DA
__
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 smaller on IE 8 [error correction]

[Tom Livingston]

With a default browser install - no settings altered - which the vast
majority of users will be using, that size is very small and a large
majority of users don't know they CAN do something about the size of
text they are seeing. I reserve that size for disclaimers and
copyright lines, and even then some would argue that it's too small
for those things too.

I am sure a more complex reason is to come. ;-)

>
> If we allow the user to zoom, and if we allow the user to use its own
> font-size that she/he feels/needs like, what are the consequences of using
> small fonts like 0.75em, instead of 0.85em ?
>
>
> Please advice,
> Márcio
>
> __
> 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/
>



-- 

Tom Livingston | Senior Interactive Developer | Media Logic |
ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.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 smaller on IE 8 [error correction]

[MEM]

Ok... I have a lot on the to do list already.

I'm on my way to significantly change the css.

In the meanwhile, I'm afraid the design given to me to reproduce, will not
allow 0.85em instead of 0.75em, for example, simple because the text will
not fit on the boxes.

In order to allow something like that, probably some layout structure needs
to change. The dead line is near, and I'm stressing. Still, I'd like to ask:

If we allow the user to zoom, and if we allow the user to use its own
font-size that she/he feels/needs like, what are the consequences of using
small fonts like 0.75em, instead of 0.85em ? 


Please advice,
Márcio

__
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 smaller on IE 8 [error correction]

[Alan Gresley]

Felix Miata wrote:
> On 2009/12/28 19:06 (GMT+0100) Alan Gresley composed:
> 
>> below two do nothing and are not really needed.
> 
>> body {font-size: 100%;}[...]
> 
> True for good browsers.


Hello Felix,

Yes, I did overlook that old IE6 bug (and possibly IE7). My font-size: 
100% is declared to stop it. I first noticed it IE7 in April 2007.




The bug does not show in IE7 compatibility mode in IE8 locally but if my 
  memory serve me correct, the result is the same as IE6.

Please excuse any errors. This was my first ever test case.


Alan http://css-class.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 smaller on IE 8 [error correction]

[Felix Miata]

On 2009/12/28 19:06 (GMT+0100) Alan Gresley composed:

> below two do nothing and are not really needed.

> body {font-size: 100%;}[...]

True for good browsers.

For not so good M$ browsers it can be useful when your CSS is less than
ideal: http://css-discuss.incutio.com/?page=InternetExplorerWinBugs
http://fm.no-ip.com/auth/IE/IE6FontInherit3.html

The only thing having it can hurt is your pride in otherwise having reduced
the weight of your CSS to the absolute minimum.

> *LESS IS BETTER*.

+1
-- 
"   We have no government armed with power capable of
contending with human passions unbridled by morality and
religion."  John Adams, 2nd US President

 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 smaller on IE 8 [error correction]

[David Laakso]

Alan Gresley wrote:
> i
> The only font-size that I use for this page,
>
> 
>
> is this.
>
> h1 {font-size:160%;}
> h2 {font-size:125%;}
> h3 {font-size:115%;}
> h4 {font-size:100%;}
>
> a[href="#navigation"] {font-size:140%;}
>
> .float2 h3 {font-size:140%;}
>
> #wrapper2+div+div a {font-size:small;}
>
> #wrapper1+div p {font-size:143%;}
>
>
> Notice how I am only targeting specific elements (ones that contains 
> text) and not whole containers or boxes. This is how you simplify. The 
> below two do nothing and are not really needed.
>
> body {font-size: 100%;}
> #navigation ul {font-size: 100%;}
>
>
> Attempting to use ems in the first place when learning leads to the 
> long path of understanding font-size. My first rule in CSS which I 
> learned the hard way is,
>
> *LESS IS BETTER*.
>
>
>





Well, we're getting there, Felix. No need for math solutions that only 
geeks, accountants, pencil-pushers, and their ilk get.  The software 
understands less is more-- providing the author of the style sheet 
understands that concept and is capable of employing it. The software 
gets it, understands it, and renders it accordingly and consistantly. 
And, more important -- providing the sheet author honors user preference 
rather than hers -- users will get their preference.

~d










-- 
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 smaller on IE 8 [error correction]

[Alan Gresley]

MEM wrote:
>> Look at http://fm.no-ip.com/auth/Font/font-rounding.html in each of
>> your
>> installed browsers and you may see that more than two significant
>> digits to
>> em font-sizes are an invitation for inconsistent results. If you stick
>> to two
>> significant digits and take what you learn from that URL into account
>> you
>> might get acceptable results cross-browser.
> 
> It was amazing to see how much different they can get. I've not seen any EM
> units however. (where they the same as the %, since 100%=1em ?)

Default = 100% = 1em until you have nested elements.

The first element in the tree that can have a size (font-size and 
height) is the HTML element, then the BODY element and then any other 
elements within the body of the document.


> I've seen that .pt are quite inconsistent.

pt (points) change apparent visual size via your DPI setting.


> Px are precise. (but they not
> scale on some browsers) 
> and the keywords small...etc (are quite nice as well).
> The percent, seems to be quite nice also, if we stick with 2 digits. And
> because of this also, I associate EM with %. Hope to get it right.


Maybe this will help with your understanding. All sizes adjust according 
to your browser text (font) size settings. This also affect the height 
given to nested elements, even if it is just a DIV.




Notice how nested elements have a different size when inside elements 
that have a smaller or larger value in ems. Notice also how Default, 
100%, and 1em are all the same size.

Please observe that the text with font-size: 0.5em within the container 
with font-size: 1.5em is the same size as the text with font-size: 1.5em 
within the container with font-size: 0.5em.


>> I grepped font-size from
>> http://www.chequedejeuner.nuvemk.com/lib/css/main.css and found 31
>> lines,
>> plus a few with just font:. That's probably more than necessary.
>> Simplify and
>> see what happens.
> 
> What could we do to simplify? Should I remove some font-sizes and let them
> been hierarchy applied?

The only font-size that I use for this page,



is this.

h1 {font-size:160%;}
h2 {font-size:125%;}
h3 {font-size:115%;}
h4 {font-size:100%;}

a[href="#navigation"] {font-size:140%;}

.float2 h3 {font-size:140%;}

#wrapper2+div+div a {font-size:small;}

#wrapper1+div p {font-size:143%;}


Notice how I am only targeting specific elements (ones that contains 
text) and not whole containers or boxes. This is how you simplify. The 
below two do nothing and are not really needed.

body {font-size: 100%;}
#navigation ul {font-size: 100%;}


Attempting to use ems in the first place when learning leads to the long 
path of understanding font-size. My first rule in CSS which I learned 
the hard way is,

*LESS IS BETTER*.



-- 
Alan http://css-class.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/