HighDots Forums  

Re: IE6 overflow problem

Cascading Style Sheets Layout/presentation on the WWW (comp.infosystems.www.authoring.stylesheets)


Discuss Re: IE6 overflow problem in the Cascading Style Sheets forum.



Reply
 
Thread Tools Display Modes
  #1  
Old   
Ben C
 
Posts: n/a

Default Re: IE6 overflow problem - 03-31-2009 , 05:46 PM






On 2009-03-31, dorayme <doraymeRidThis (AT) optusnet (DOT) com.au> wrote:
[...]
Quote:
This is in spite of 100% width for a P being default.
I know what you mean, but it's not strictly accurate. The initial value
of width is "auto", which is not the same as "100%".

Width: auto makes the P's margin box fill its container, width: 100%
makes its content box width equal to the containing width.

They result in the same "used width" as the spec calls it only if the P
has zero for all its horizontal borders, padding and margins (which it
would unless someone set them otherwise).


Reply With Quote
  #2  
Old   
dorayme
 
Posts: n/a

Default Re: IE6 overflow problem - 03-31-2009 , 06:31 PM






In article <slrngt53rm.4j4.spamspam (AT) bowser (DOT) marioworld>,
Ben C <spamspam (AT) spam (DOT) eggs> wrote:

Quote:
On 2009-03-31, dorayme <doraymeRidThis (AT) optusnet (DOT) com.au> wrote:
[...]
This is in spite of 100% width for a P being default.

I know what you mean, but it's not strictly accurate. The initial value
of width is "auto", which is not the same as "100%".

Width: auto makes the P's margin box fill its container, width: 100%
makes its content box width equal to the containing width.

They result in the same "used width" as the spec calls it only if the P
has zero for all its horizontal borders, padding and margins (which it
would unless someone set them otherwise).
My bad!

To OP, forget what I said about the 1933 film 42nd Street, it does not
quite apply.

Adding width: auto, does *not* trigger P to grow height in IE, it needs
an explicit width. 100% will usually do you. But if this runs foul of
something else you are doing, given Ben's point here, you can make do
with less than 100%. For example if your borders and paddings are
causing the P to get cut off, just lower the percentage of width, and
this will usually achieve your main aim with little loss of function.

Amazingly, don't ask, instead of width, (you might prefer or need to
leave it at default auto) you can use height: 1%; Yes, I know, ... but
we are talking IE, even IE7 on this one. The height is simply ignored
but it triggers the P to grow height to cover its child float.

(But I still say the world has moved on since Wittgenstein and pre 70s
England. That is my current view at least.)

--
dorayme


Reply With Quote
  #3  
Old   
dorayme
 
Posts: n/a

Default Re: IE6 overflow problem - 04-01-2009 , 03:17 PM



In article <35273120.8554256396.39904 (AT) news (DOT) altopia.com>,
darius <noone (AT) here (DOT) invalid> wrote:

Quote:
dorayme <doraymeRidThis (AT) optusnet (DOT) com.au> wrote in
news:doraymeRidThis-77778C.09311301042009 (AT) news (DOT) albasani.net...

Adding width: auto, does *not* trigger P to grow height in IE, it
needs an explicit width. 100% will usually do you. But if this
runs
foul of something else you are doing, given Ben's point here, you
can make do with less than 100%. For example if your borders and
paddings are causing the P to get cut off, just lower the
percentage
of width, and this will usually achieve your main aim with little
loss of function.


I added a height:100% and that fixed it and did not affect other
browsers. thanks to all.
I agree that a height might be best if you are wanting to keep widths
perfectly fluid. But the usual recommendation for float bug fixes with
IE call for a minimal height. 1% is the figure suggested by the
discoverer of this (I think a bloke called Holly).

If you are doing things for IE, it is best, as a general practice, to
let only IE see the special conditions. You can use a conditional
comment to deliver a stylesheet in the head of your doc after the one
for all the other browsers, like this sort of thing:


<link rel="stylesheet" type="text/css" media="screen"
href="css/screen.css">
<!--[if IE 6]>
<link rel="stylesheet" type="text/css" media="screen"
href="css/forIE.css">
<![endif]-->

and in forIE.css, you target the element concerned with the extra of
{height: 1%;}

--
dorayme


Reply With Quote
Reply




Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

vB code is On
Smilies are On
[IMG] code is On
HTML code is Off



Powered by vBulletin Version 3.5.4
Copyright ©2000 - 2009, Jelsoft Enterprises Ltd.