Re: [css-d] negative margined sidebar moving when window narrowed in IE

[Zoe M. Gillenwater]

~davidLaakso wrote:
> Zoe M. Gillenwater wrote:
>> Gunlaug Sørtun wrote:
>>  
>>> I have moved leftcolumn into the bottom of contentwrapper, but the
>>> source-order is otherwise the same and nothing is added or 
>>> subtracted...
>>> 
>>> ...so, maybe it'll do.
>>>
>>> It is possible to turn this into a robust 3 column with the addition of
>>> one more wrapper. 
>>
>> Do you really need another wrapper though? Here's the same layout 
>> with only a single div for a right third column added:
>> http://www.pixelsurge.com/experiment/negative_margins_4.html
>>
>> Seems to work fine in FF 2, IE 7, IE 6, and Opera 9. Am I missing 
>> something?
>>
>> Zoe
>>
>>   
> I do not think you are missing something. But I sometimes think I 
> suffer from OCD (obsessive-compulsive disorder) :-) .
> Please see: 

But that's not a problem -- the third column overlaps in all browsers. 
That's what it's supposed to do. It's just that in IE6, the middle 
column expands to hold the picture, so the overlap occurs not just on 
the overflowing pic but the entire column. In a real layout, I'd have a 
min-width to prevent these things, but want to make sure that even if 
someone puts content that is too big even for the min-width, the columns 
won't drop. That's all I really care about -- no columns dropping.

Georg, where would I add the extra wrapper you refer to? And would this 
prevent the overlap in all browsers?

Zoe

-- 
Zoe M. Gillenwater
Design Services Manager
UNC Highway Safety Research Center
http://www.hsrc.unc.edu


__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- 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] negative margined sidebar moving when window narrowed in IE

[Zoe M. Gillenwater]

Richard Grevers wrote:
> 
> Am I missing something here? Many posters to this list (and I'm not
> implying that Zoe is one of them) seem to get rather upset when floats
> drop in narrow windows, and I simply don't get that. The fact that
> floats can drop when there's not enough room to do justice to several
> columns is a primary reason to use floats - its why they are better
> than tables.
> The key, of course is to make the correct column drop, which I would
> say should be "any column but the primary content, with main
> navigation having second priority for not dropping.
>   

I completely agree with everything you've just said. The problem is that 
I've never been able to get a client to agree to it. They can't handle 
the idea of a column dropping and would much rather foist a horizontal 
scrollbar on their visitors. I do all the client education I can muster, 
managing to get them to agree to a liquid layout, real text for 
navigation buttons, etc, but the column dropping is beyond my powers of 
persuasion. :-)

> My only wish is for some property that would make the remaining floats
> expand into the space left by the dropped float.
>   

I think there are such things that depend on JavaScript. It might be 
possible to get a layout like this from pure CSS using table display 
properties, but I've never tried.

Zoe

-- 
Zoe M. Gillenwater
Design Services Manager
UNC Highway Safety Research Center
http://www.hsrc.unc.edu


__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- 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] negative margined sidebar moving when window narrowed in IE

[Gunlaug Sørtun]

Richard Grevers wrote:
> 
[...]
> The fact that floats can drop when there's not enough room to do 
> justice to several columns is a primary reason to use floats - its 
> why they are better than tables.
[...]
> 

I agree (strangely enough :-) ).
The problem is that there's no uniformity across browser-land. Old IE6
has its 'auto-expansion' bug that give us float-drops under certain
conditions, while other browsers - including IE7 - tend to give us the
much uglier overlapping.

Trying to style our layouts for similar behavior across browser-land has
a number of weaknesses, in that 'CSS table' which will cause
'auto-expansion' is treated erroneous in some browsers, and IE7 doesn't
understand 'CSS table' at all.

Using 'fixed-width' floats will work, but doesn't suit all
layouts/design, and even 'min-width' doesn't work well in all cases.

Making the dropped floats line up well below each others can be solved
by floating them all in one direction, but that's also limiting our
design-options.

The rest is "memories" from old "table-based designs", where nothing
drops and no overlapping occurs. The freedom won by using an "all CSS"
solution is somewhat lost if we have to tie our layouts/designs up in a
table-like organization, but many of us still want the advantages of
tables without having to deal with the disadvantages.

regards
Georg
-- 
http://www.gunlaug.no
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- 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] negative margined sidebar moving when window narrowed in IE

[Richard Grevers]

Am I missing something here? Many posters to this list (and I'm not
implying that Zoe is one of them) seem to get rather upset when floats
drop in narrow windows, and I simply don't get that. The fact that
floats can drop when there's not enough room to do justice to several
columns is a primary reason to use floats - its why they are better
than tables.
The key, of course is to make the correct column drop, which I would
say should be "any column but the primary content, with main
navigation having second priority for not dropping.

My only wish is for some property that would make the remaining floats
expand into the space left by the dropped float.


-- 
Richard Grevers, New Plymouth, New Zealand
Hat 1: Development Engineer, Webfarm Ltd.
Hat 2: Dramatic Design www.dramatic.co.nz
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- 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] negative margined sidebar moving when window narrowed in IE

[Gunlaug Sørtun]

Zoe M. Gillenwater wrote:
> http://www.pixelsurge.com/experiment/negative_margins_4.html
> 
> Seems to work fine in FF 2, IE 7, IE 6, and Opera 9. Am I missing 
> something?

Not really, apart from my wish for _some_ "table-like" robustness. David
pointed out one weakness (in his usual disorderly manner :-) ).

I usually overstress any layout-solution into the absurd myself - and
like them to hold up reasonably well before I put them to serious use.
Improved CSS support across browser-land makes life easier for us OCD
sufferers as the years go by, but we'll probably keep on looking for
weak spots until we're no longer around ;-)

regards
Georg
-- 
http://www.gunlaug.no
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- 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] negative margined sidebar moving when window narrowed in IE

[~davidLaakso]

Zoe M. Gillenwater wrote:
> Gunlaug Sørtun wrote:
>   
>> I have moved leftcolumn into the bottom of contentwrapper, but the
>> source-order is otherwise the same and nothing is added or subtracted...
>> 
>> ...so, maybe it'll do.
>>
>> It is possible to turn this into a robust 3 column with the addition of
>> one more wrapper. 
>> 
>
> Do you really need another wrapper though? Here's the same layout with 
> only a single div for a right third column added:
> http://www.pixelsurge.com/experiment/negative_margins_4.html
>
> Seems to work fine in FF 2, IE 7, IE 6, and Opera 9. Am I missing something?
>
> Zoe
>
>   
I do not think you are missing something. But I sometimes think I suffer 
from OCD (obsessive-compulsive disorder) :-) .
Please see: 
Best,
~dL

-- 
http://chelseacreekstudio.com/

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- 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] negative margined sidebar moving when window narrowed in IE

[Zoe M. Gillenwater]

Gunlaug Sørtun wrote:
> I have moved leftcolumn into the bottom of contentwrapper, but the
> source-order is otherwise the same and nothing is added or subtracted...
> 
> ...so, maybe it'll do.
>
> It is possible to turn this into a robust 3 column with the addition of
> one more wrapper. 

Do you really need another wrapper though? Here's the same layout with 
only a single div for a right third column added:
http://www.pixelsurge.com/experiment/negative_margins_4.html

Seems to work fine in FF 2, IE 7, IE 6, and Opera 9. Am I missing something?

Zoe

-- 
Zoe M. Gillenwater
Design Services Manager
UNC Highway Safety Research Center
http://www.hsrc.unc.edu

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- 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] negative margined sidebar moving when window narrowed in IE

[Zoe M. Gillenwater]

Zoe M. Gillenwater wrote:
> Philippe Wittenbergh wrote:
>   
>> On Feb 15, 2007, at 12:39 PM, Gunlaug Sørtun wrote:
>>   
>> 
>>> I have moved leftcolumn into the bottom of contentwrapper, but the
>>> source-order is otherwise the same and nothing is added or  
>>> subtracted...
>>> 
>>> ...so, maybe it'll do.
>>>   
>   
>> For the large image (applies to IE6 on narrow windows) I wrap the  
>> image in a box:
>> .img {margin:0 -200px 0 0; position:relative; height:0;}
>> /* right margin equivalent to size of sidebar */
>>   
>> 
>
> I'm not seeing the need for this -- the layout holds together fine in 
> narrow windows for me. What is this supposed to do?
>   

Ok, so it's supposed to stop IE6 from expanding the div to hold the 
photo, right? But I actually like this sometimes, and wish I could use 
display: table-cell on the div for other browsers to get them to do the 
same thing.

> By the way, do any of you think we're ready to start using display: 
> table layouts, and just feed IE the alternate CSS for these negative 
> margin layouts? I've written article about it, but I haven't ever used 
> it for a real site. I'm getting ready to complete rebuild two big sites 
> that will probably not get rebuilt for several years after this, so I 
> want to choose my layout method wisely.
>   

Hmm, I guess it wouldn't work for a page with a left sidebar, unless I 
change the source order so that the left column comes first in the 
source, which I don't want. I guess it's a good reminder why table 
layouts stunk: no control over source order, just cell after rigid cell. :-)

Zoe

-- 
Zoe M. Gillenwater
Design Services Manager
UNC Highway Safety Research Center
http://www.hsrc.unc.edu

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- 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] negative margined sidebar moving when window narrowed in IE

[Zoe M. Gillenwater]

Philippe Wittenbergh wrote:
> On Feb 15, 2007, at 12:39 PM, Gunlaug Sørtun wrote:
>   
>> I have moved leftcolumn into the bottom of contentwrapper, but the
>> source-order is otherwise the same and nothing is added or  
>> subtracted...
>> 
>> ...so, maybe it'll do.
>>
>> How is IE7 doing, btw? (I really dislike "blind hacking".)
>> 
>
> I use basically the same technique on a couple of sites. Holds well  
> in iExploder 7.
>   

The technique I use is exactly the same, except I use a margin on the 
container div instead of padding. Padding is better because that way you 
don't need to add yet another container div if you want a background 
(especially faux column one) behind the columns. This holds up well in 
IE7 and IE6 with no problems that I've seen. I think I shall switch to 
it. Thanks!

> One note though; the wrapper should have position relative as well.  
> I've seen the sidebar jumping to the centre in IE when resizing.
>   

I'm not seeing it on Georg's demo page, but I have seen such a thing on 
more complex pages I've made with my similar method. So yes, it's 
probably safest to include it.

> For the large image (applies to IE6 on narrow windows) I wrap the  
> image in a box:
> .img {margin:0 -200px 0 0; position:relative; height:0;}
> /* right margin equivalent to size of sidebar */
>   

I'm not seeing the need for this -- the layout holds together fine in 
narrow windows for me. What is this supposed to do?

By the way, do any of you think we're ready to start using display: 
table layouts, and just feed IE the alternate CSS for these negative 
margin layouts? I've written article about it, but I haven't ever used 
it for a real site. I'm getting ready to complete rebuild two big sites 
that will probably not get rebuilt for several years after this, so I 
want to choose my layout method wisely.

Thanks,
Zoe

-- 
Zoe M. Gillenwater
Design Services Manager
UNC Highway Safety Research Center
http://www.hsrc.unc.edu


__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- 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] negative margined sidebar moving when window narrowed in IE

[Zoe M. Gillenwater]

Gunlaug Sørtun wrote:
> Zoe M. Gillenwater wrote:
>
>   
>> Speaking of being proven wrong ;-), Georg, do you have an index on 
>> your site indicating what each of your layout pages is demonstrating?
>> 
>
> Have I done something wrong..? :-)
>   

No, you're just much, much smarter in CSS than I am, so you often prove 
me wrong -- which I like. :-)

> No, I have no index for those demo/test pages. That's my public
> playground and I thought each page was self-descriptive enough.
>   

The pages themselves are, but I have to click through to every single 
one to see what it is and compare them with each other, instead of 
having an index that lists "two column fixed header" etc. If you don't 
have an index, no worries of course, just checking.

> Haven't studied in depth, but I think an article in the last ALA is
> somewhat close to what I'm doing...
> 
>   

This is basically the same sort of thing which I've been using for 
awhile. But I too haven't studied it in depth.

> Now I'll have a look at your latest...
> 
> ...and who knows what may come out of _that_ ;-)
>   

That is *not* mine. Like I said, it's just the exact same thing as the 
one I found on Dynamic Drive. I just put it on my server so I could test 
it with a big image inside. Don't want to take credit where it isn't 
due. :-)

Zoe

--
Zoe M. Gillenwater
Design Services Manager
UNC Highway Safety Research Center
http://www.hsrc.unc.edu


__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- 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] negative margined sidebar moving when window narrowed in IE

[Ingo Chao]

Philippe Wittenbergh wrote:
> ...
> For the large image (applies to IE6 on narrow windows) I wrap the  
> image in a box:
> .img {margin:0 -200px 0 0; position:relative; height:0;}
> /* right margin equivalent to size of sidebar */

Very nice and handy. A wrapper that prevents the column wrapper from 
being expanded.

:)

Ingo


-- 
http://www.satzansatz.de/css.html
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- 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] negative margined sidebar moving when window narrowed in IE

[Philippe Wittenbergh]

On Feb 15, 2007, at 12:39 PM, Gunlaug Sørtun wrote:

> I have moved leftcolumn into the bottom of contentwrapper, but the
> source-order is otherwise the same and nothing is added or  
> subtracted...
> 
> ...so, maybe it'll do.
>
> How is IE7 doing, btw? (I really dislike "blind hacking".)

I use basically the same technique on a couple of sites. Holds well  
in iExploder 7.

One note though; the wrapper should have position relative as well.  
I've seen the sidebar jumping to the centre in IE when resizing.

For the large image (applies to IE6 on narrow windows) I wrap the  
image in a box:
.img {margin:0 -200px 0 0; position:relative; height:0;}
/* right margin equivalent to size of sidebar */

Philippe
---
Philippe Wittenbergh





__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- 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] negative margined sidebar moving when window narrowed in IE

[Gunlaug Sørtun]

Zoe M. Gillenwater wrote:

>> http://www.pixelsurge.com/experiment/negative_margins_3-dd.html

>> What I'm interested in, then, is not why it happens but if there is
>>  any way to stop it (short of using overflow: hidden, which 
>> obviously works but kills the needed scrollbars).

One more, with scrollbars intact and no extra wrappers.

I have moved leftcolumn into the bottom of contentwrapper, but the
source-order is otherwise the same and nothing is added or subtracted...

...so, maybe it'll do.

How is IE7 doing, btw? (I really dislike "blind hacking".)

It is possible to turn this into a robust 3 column with the addition of
one more wrapper. That would be more in line with what I'm doing here...

...but I'm using side-borders as basic column-backgrounds, and a lot of
extra wrappers for decoration. Pure overload.
(Got to add Firefox 2.0.0.1 into that Gecko-list :-) )

regards
Georg
-- 
http://www.gunlaug.no
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- 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] negative margined sidebar moving when window narrowed in IE

[Gunlaug Sørtun]

Zoe M. Gillenwater wrote:
> http://www.pixelsurge.com/experiment/negative_margins_3-dd.html

> What I'm interested in, then, is not why it happens but if there is
> any way to stop it (short of using overflow: hidden, which obviously
> works but kills the needed scrollbars).

Ok. Scrollbars intact, and at least IE6 is playing ball...

...but you know ... those superfluous wrappers :-)

I still can't test in IE7 directly, so I just added what I thought it
needed. The others are doing alright, I think.

regards
Georg
-- 
http://www.gunlaug.no
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- 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] negative margined sidebar moving when window narrowed in IE

[Gunlaug Sørtun]

Zoe M. Gillenwater wrote:

> Speaking of being proven wrong ;-), Georg, do you have an index on 
> your site indicating what each of your layout pages is demonstrating?

Have I done something wrong..? :-)

No, I have no index for those demo/test pages. That's my public
playground and I thought each page was self-descriptive enough.

These three...



...present variations on the basics.
Haven't updated them since 2004 though - see dates, so there's now a
weak spot (missing clear) in Opera 9 and a small glitch in the old
IE-expression. Maybe time for an update.

> I'd love to take a closer look at your preferred negative margin 
> layout technique.

Haven't studied in depth, but I think an article in the last ALA is
somewhat close to what I'm doing...

Not close enough for IE6 on narrow windows though, which is why I use
more wrappers :-)

If there's any need for a somewhat robust 2/3 column layout, then I
might write something more complete about mine if/when I can find the
time. For now I have left bits and pieces around in my web design section...


-

Now I'll have a look at your latest...

...and who knows what may come out of _that_ ;-)

regards
Georg
-- 
http://www.gunlaug.no
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- 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/