Re: [css-d] Two / Three columns float clearing in IE in 3col layout
Holly Bergevin wrote: > From: David Pratt <[EMAIL PROTECTED]> > >>Hi. Just a note to say I have reposted the updated the page at: >> >>http://ce12566576.17.psi.zettai.net/test.html >> >>with the changes you have suggested. I have validated it for xhtml in >>the meantime. There are still a couple of quirks in IE. I have not got >>the top right to stop separating once the horizontal scrollbar appears. >>The three columns also appear a bit more left than centered in the main >>column so thinking there needs to be a couple of changes in the numbers >>to get this to work out a bit better. > > > The problem with the separating is because of the padding you have used (in > two places) on .inner . Since it is em-based, it increases in size when the > test-size gets larger. IE expands the container so that its children stay > inside, so the separation happens. Remove the padding from inner and use > margins on all the elements inside, paragraphs and headings and such, to get > the desired separation of content in the columns. > > Even though this may "lick" the IE problem, you might want to check out what > happens to your center column in Firefox when the text-size is increased in > that browser. The result is again because of the em-based sizing on the side > columns with the center column taking up the rest of the available space. > Though you have used a min-width on #pageWrapper, you might want to > reconsider those three mini-colums in the center one, or set a larger > min-width. > > Hope that helps, > > ~holly Hi Holly. This is some very good advice and I appreciate your taking the time to suggest these changes. More than that, your explanation is making this excellent and has made this problem much clearer to me. I continue with what you suggest and post the result when I have got this worked out. Many thanks. Regards, David __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Two / Three columns float clearing in IE in 3col layout
From: David Pratt <[EMAIL PROTECTED]> >Hi. Just a note to say I have reposted the updated the page at: > >http://ce12566576.17.psi.zettai.net/test.html > >with the changes you have suggested. I have validated it for xhtml in >the meantime. There are still a couple of quirks in IE. I have not got >the top right to stop separating once the horizontal scrollbar appears. >The three columns also appear a bit more left than centered in the main >column so thinking there needs to be a couple of changes in the numbers >to get this to work out a bit better. The problem with the separating is because of the padding you have used (in two places) on .inner . Since it is em-based, it increases in size when the test-size gets larger. IE expands the container so that its children stay inside, so the separation happens. Remove the padding from inner and use margins on all the elements inside, paragraphs and headings and such, to get the desired separation of content in the columns. Even though this may "lick" the IE problem, you might want to check out what happens to your center column in Firefox when the text-size is increased in that browser. The result is again because of the em-based sizing on the side columns with the center column taking up the rest of the available space. Though you have used a min-width on #pageWrapper, you might want to reconsider those three mini-colums in the center one, or set a larger min-width. Hope that helps, ~holly __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Two / Three columns float clearing in IE in 3col layout
David Pratt wrote:
> Holly Bergevin wrote:
>
>>From: David Pratt <[EMAIL PROTECTED]>
>>
>>>http://ce12566576.17.psi.zettai.net/test.html
>>>
>>>included a three column text block. This layout only fails under IE
>>>Windows. I am hoping this float issue is something that won't be too
>>>difficult to resolve. I have tried the things I know to clear the left
>>>float with no luck.
>>
>>
>>I'm not sure I'd call this a float issue, though I suppose it looks lke it.
>>Really the problem is that things are too wide for IE. Try the following
>>changes (declarations are incomplete, only changed properties are indicated)
>>
>>#middleColumn {margin: 0 0 0 -2px;}
>>#leftColumn {margin: 0 0 0 -14em;}
>>#rightColumn {margin: 0 -14em 0 0;}
>>.threeColContainer .threeColOne,
>>.threeColContainer .threeColTwo {/*padding-right: 2%;*/ /* remove this */}
>>
>>add the following selector and declaration -
>>
>>.threeColContainer p {margin-right: 2%;}
>>
>>I hope that helps,
>>
>>~holly
>
>
> Hi Holly. This is really great! It is hard to see the forrest from the
> trees at times. I guess I was too focused on believing it was a float
> issue. This help is much appreciated. One side effect from these
> changes, however is that the header area seems to separate on the right
> as the screen is minimized. I am playing around a bit more to see if I
> can eliminate this. Many thanks.
>
> Regards,
> David
Hi. Just a note to say I have reposted the updated the page at:
http://ce12566576.17.psi.zettai.net/test.html
with the changes you have suggested. I have validated it for xhtml in
the meantime. There are still a couple of quirks in IE. I have not got
the top right to stop separating once the horizontal scrollbar appears.
The three columns also appear a bit more left than centered in the main
column so thinking there needs to be a couple of changes in the numbers
to get this to work out a bit better. It is almost there and it is
already so much better that it was before! Many thanks.
Regards,
David
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Two / Three columns float clearing in IE in 3col layout
~davidLaakso wrote: > David Pratt wrote: > >>Hi Els. I put the file up at: >> >>http://ce12566576.17.psi.zettai.net/test.html >> >>I included the css in the html file to keep things as simple as possible >>and included a three column text block. This layout only fails under IE >>Windows. I am hoping this float issue is something that won't be too >>difficult to resolve. I have tried the things I know to clear the left >>float with no luck. Many thanks. >> >>Regards, >>David >> >> > > I do not have ie right now so can't look. But the file /looks/ cleared > properly. Put an xml declaration > *above* the doctype. That will put ie in quirksmode. It may snap in > place in ie. It may be a width problem, or something like that. I'm not > good at math. > Trivia: It's a good idea to validate your markup and css before writing > the list. And everyone will appreciate it if you do not top post. Write > below, not above, those that you reply to. > Good luck. > Regards, > ~davidLaakso Hi David. Thank you for these hints. Regards, David __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Two / Three columns float clearing in IE in 3col layout
David Pratt wrote:
> Holly Bergevin wrote:
>
>> From: David Pratt <[EMAIL PROTECTED]>
>>> http://ce12566576.17.psi.zettai.net/test.html
>>>
>>>
> Hi Holly. This is really great! It is hard to see the forrest from the
> trees at times. I guess I was too focused on believing it was a float
> issue. This help is much appreciated. One side effect from these
> changes, however is that the header area seems to separate on the right
> as the screen is minimized. I am playing around a bit more to see if I
> can eliminate this. Many thanks.
>
> Regards,
> David
>
David, once you guys get your math straightened out, please consider
children of all ages may want to read that stuff. This will sort of do
the trick:
/*#pageWrapper {font-size: 80%; }*/
Sincerely yours,
Leonardo Fibonacci
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Two / Three columns float clearing in IE in 3col layout
Holly Bergevin wrote:
> From: David Pratt <[EMAIL PROTECTED]>
>
>>http://ce12566576.17.psi.zettai.net/test.html
>>
>>included a three column text block. This layout only fails under IE
>>Windows. I am hoping this float issue is something that won't be too
>>difficult to resolve. I have tried the things I know to clear the left
>>float with no luck.
>
>
> I'm not sure I'd call this a float issue, though I suppose it looks lke it.
> Really the problem is that things are too wide for IE. Try the following
> changes (declarations are incomplete, only changed properties are indicated)
>
> #middleColumn {margin: 0 0 0 -2px;}
> #leftColumn {margin: 0 0 0 -14em;}
> #rightColumn {margin: 0 -14em 0 0;}
> .threeColContainer .threeColOne,
> .threeColContainer .threeColTwo {/*padding-right: 2%;*/ /* remove this */}
>
> add the following selector and declaration -
>
> .threeColContainer p {margin-right: 2%;}
>
> I hope that helps,
>
> ~holly
Hi Holly. This is really great! It is hard to see the forrest from the
trees at times. I guess I was too focused on believing it was a float
issue. This help is much appreciated. One side effect from these
changes, however is that the header area seems to separate on the right
as the screen is minimized. I am playing around a bit more to see if I
can eliminate this. Many thanks.
Regards,
David
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Two / Three columns float clearing in IE in 3col layout
David Pratt wrote: > Hi Els. I put the file up at: > > http://ce12566576.17.psi.zettai.net/test.html > > I included the css in the html file to keep things as simple as possible > and included a three column text block. This layout only fails under IE > Windows. I am hoping this float issue is something that won't be too > difficult to resolve. I have tried the things I know to clear the left > float with no luck. Many thanks. > > Regards, > David > > I do not have ie right now so can't look. But the file /looks/ cleared properly. Put an xml declaration *above* the doctype. That will put ie in quirksmode. It may snap in place in ie. It may be a width problem, or something like that. I'm not good at math. Trivia: It's a good idea to validate your markup and css before writing the list. And everyone will appreciate it if you do not top post. Write below, not above, those that you reply to. Good luck. Regards, ~davidLaakso __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Two / Three columns float clearing in IE in 3col layout
From: David Pratt <[EMAIL PROTECTED]>
>http://ce12566576.17.psi.zettai.net/test.html
>
> included a three column text block. This layout only fails under IE
>Windows. I am hoping this float issue is something that won't be too
>difficult to resolve. I have tried the things I know to clear the left
>float with no luck.
I'm not sure I'd call this a float issue, though I suppose it looks lke it.
Really the problem is that things are too wide for IE. Try the following
changes (declarations are incomplete, only changed properties are indicated)
#middleColumn {margin: 0 0 0 -2px;}
#leftColumn {margin: 0 0 0 -14em;}
#rightColumn {margin: 0 -14em 0 0;}
.threeColContainer .threeColOne,
.threeColContainer .threeColTwo {/*padding-right: 2%;*/ /* remove this */}
add the following selector and declaration -
.threeColContainer p {margin-right: 2%;}
I hope that helps,
~holly
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Two / Three columns float clearing in IE in 3col layout
Hi Els. I put the file up at: http://ce12566576.17.psi.zettai.net/test.html I included the css in the html file to keep things as simple as possible and included a three column text block. This layout only fails under IE Windows. I am hoping this float issue is something that won't be too difficult to resolve. I have tried the things I know to clear the left float with no luck. Many thanks. Regards, David David Pratt wrote: > Hi Els. I have tried both clear:left and clear:both. I will put > something up on a server shortly so you can see this. It is strictly an > IE Windows problem. The layout works properly on Safari, Netscape Win, > Firefox Win, Firefox Mac, Opera Win and Mac, and IE Mac. It works fine > on Windows except when I use floated multiple columns in my main > (center) column of the layout. > > Regards, > David > > > Els wrote: > >>David Pratt wrote: >> >> >>>Hi I have a three column layout where I am placing two or >>>three column text in the main (center) column. These text >>>areas floated left. It works fine on all browsers except IE. I >>>am trying to clear the float with >>> >>> >>> >>>following each two or three column text area but it does not >>>clear and the content in my right and left columns of the main >>>layout is getting pushed down. >>> >>>Just a note that without the two or three column text in the >>>center column (just regular text), my three column layout is >>>just fine and does the right thing. >>> >>>Anyone have advice on how to solve this. >> >> >> >>How about showing us the patient? ;-) >>Wild guess though: what happens if you leave a space inside that >>clearing div and/or use clear:both instead of clear:left? >> > > __ > css-discuss [EMAIL PROTECTED] > http://www.css-discuss.org/mailman/listinfo/css-d > IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 > List wiki/FAQ -- http://css-discuss.incutio.com/ > Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ > __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Two / Three columns float clearing in IE in 3col layout
Hi Els. I have tried both clear:left and clear:both. I will put something up on a server shortly so you can see this. It is strictly an IE Windows problem. The layout works properly on Safari, Netscape Win, Firefox Win, Firefox Mac, Opera Win and Mac, and IE Mac. It works fine on Windows except when I use floated multiple columns in my main (center) column of the layout. Regards, David Els wrote: > David Pratt wrote: > >>Hi I have a three column layout where I am placing two or >>three column text in the main (center) column. These text >>areas floated left. It works fine on all browsers except IE. I >>am trying to clear the float with >> >> >> >>following each two or three column text area but it does not >>clear and the content in my right and left columns of the main >>layout is getting pushed down. >> >>Just a note that without the two or three column text in the >>center column (just regular text), my three column layout is >>just fine and does the right thing. >> >>Anyone have advice on how to solve this. > > > > How about showing us the patient? ;-) > Wild guess though: what happens if you leave a space inside that > clearing div and/or use clear:both instead of clear:left? > __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Two / Three columns float clearing in IE in 3col layout
David Pratt wrote: > Hi I have a three column layout where I am placing two or > three column text in the main (center) column. These text > areas floated left. It works fine on all browsers except IE. I > am trying to clear the float with > > > > following each two or three column text area but it does not > clear and the content in my right and left columns of the main > layout is getting pushed down. > > Just a note that without the two or three column text in the > center column (just regular text), my three column layout is > just fine and does the right thing. > > Anyone have advice on how to solve this. How about showing us the patient? ;-) Wild guess though: what happens if you leave a space inside that clearing div and/or use clear:both instead of clear:left? -- Els http://locusmeus.com/ http://locusoptimus.com/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
