Re: [css-d] IE 6 Float Issue
Does anybody have any ideas what is happening here? This is really driving
me crazy trying to figure this out as it does not seem to fit with any of
the usual IE 'features'.
Thanks
-- Jeff
From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED]
Sent: Thursday, April 12, 2007 9:57 AM
To: [EMAIL PROTECTED]
Subject: IE 6 Float Issue
Well, IE 6 is at it again for me. I have a layout from a client that is
pixel tight and while I have it working in IE 7 and FireFox, IE 6 is causing
issues. I have broken it down to the most basic issue which is one block
being floated to the left and the main column having a left margin equal to
the floated block width plus one, which should cause there to be a 1px gap
between the two. The following code works just fine in IE 7 and FireFox,
but in IE 6, the gap is 3+ pixels wide which is causing the layout to fall
apart. Can anybody offer any suggestions here?
style type=text/css
#block1 {
float: left;
height: 175px;
width: 179px;
}
#block2 {
height: 175px;
margin-left: 180px;
}
/style
div id=block1 style=background-color: #00c;Block 1/div
div id=block2 style=background-color: #00c;Block 2/div
Thanks
-- Jeff
__
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] IE 6 Float Issue
Could be the IE double-margin bug? Try adding display:inline to the floated element... __ 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] IE 6 Float Issue
No, I tried that one earlier and did it again just to make sure. Even with the 'display: inline' added to the floated box, the margin in between the two boxes is still 4px instead of 1px. Thanks -- Jeff From: Dave Goodchild [mailto:[EMAIL PROTECTED] Sent: Friday, April 13, 2007 8:40 AM To: Jeff Chastain Cc: [EMAIL PROTECTED] Subject: Re: [css-d] IE 6 Float Issue Could be the IE double-margin bug? Try adding display:inline to the floated element... __ 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] IE 6 Float Issue
On 4/13/07, Jeff Chastain [EMAIL PROTECTED] wrote:
Does anybody have any ideas what is happening here? This is really
driving
me crazy trying to figure this out as it does not seem to fit with any of
the usual IE 'features'.
Thanks
-- Jeff
From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED]
Sent: Thursday, April 12, 2007 9:57 AM
To: [EMAIL PROTECTED]
Subject: IE 6 Float Issue
Well, IE 6 is at it again for me. I have a layout from a client that is
pixel tight and while I have it working in IE 7 and FireFox, IE 6 is
causing
issues. I have broken it down to the most basic issue which is one block
being floated to the left and the main column having a left margin equal
to
the floated block width plus one, which should cause there to be a 1px gap
between the two. The following code works just fine in IE 7 and FireFox,
but in IE 6, the gap is 3+ pixels wide which is causing the layout to fall
apart. Can anybody offer any suggestions here?
style type=text/css
#block1 {
float: left;
height: 175px;
width: 179px;
}
#block2 {
height: 175px;
margin-left: 180px;
}
/style
div id=block1 style=background-color: #00c;Block 1/div
div id=block2 style=background-color: #00c;Block 2/div
Thanks
-- Jeff
what about just floating the second block right instead of having the
margin. unless i am missing the point on this?
Jeff
__
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] IE 6 Float Issue
Well, what I have ended up doing is floating everything left. The example
here is part of the page that is just 2 columns (the header), but below that
is a three column layout. If I float everything left, giving all blocks a
defined width, everything appears to work. As this is a fixed width layout,
I can go with defining widths for each block. Not the cleanest thing in the
world, but it appears to be working.
Thanks
-- Jeff
From: jeffrey morin [mailto:[EMAIL PROTECTED]
Sent: Friday, April 13, 2007 11:08 AM
To: Jeff Chastain
Cc: [EMAIL PROTECTED]
Subject: Re: [css-d] IE 6 Float Issue
On 4/13/07, Jeff Chastain [EMAIL PROTECTED] wrote:
Does anybody have any ideas what is happening here? This is really driving
me crazy trying to figure this out as it does not seem to fit with any of
the usual IE 'features'.
Thanks
-- Jeff
From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED]
Sent: Thursday, April 12, 2007 9:57 AM
To: [EMAIL PROTECTED]
Subject: IE 6 Float Issue
Well, IE 6 is at it again for me. I have a layout from a client that is
pixel tight and while I have it working in IE 7 and FireFox, IE 6 is causing
issues. I have broken it down to the most basic issue which is one block
being floated to the left and the main column having a left margin equal to
the floated block width plus one, which should cause there to be a 1px gap
between the two. The following code works just fine in IE 7 and FireFox,
but in IE 6, the gap is 3+ pixels wide which is causing the layout to fall
apart. Can anybody offer any suggestions here?
style type=text/css
#block1 {
float: left;
height: 175px;
width: 179px;
}
#block2 {
height: 175px;
margin-left: 180px;
}
/style
div id=block1 style=background-color: #00c;Block 1/div
div id=block2 style=background-color: #00c;Block 2/div
Thanks
-- Jeff
what about just floating the second block right instead of having the
margin. unless i am missing the point on this?
Jeff
__
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] IE 6 Float Issue
Jeff Chastain wrote: No, I tried that one earlier and did it again just to make sure. Even with the 'display: inline' added to the floated box, the margin in between the two boxes is still 4px instead of 1px. Sounds like you have moved the '3px jog bug'[1] onto a non-floated container, in which case you'll have to subtract 3px from a side-margin - in IE6 (and below) only. regards Georg [1]http://www.positioniseverything.net/explorer/threepxtest.html -- 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] IE 6 Float Issue
Jeff Chastain wrote: Well, what I have ended up doing is floating everything left. The example here is part of the page that is just 2 columns (the header), but below that is a three column layout. If I float everything left, giving all blocks a defined width, everything appears to work. As this is a fixed width layout, I can go with defining widths for each block. Not the cleanest thing in the world, but it appears to be working. Why do you think isn't this clean? Floating all blocks is a perfectly acceptable way of making columnar layouts, and no more messy than floating one block and assigning another one a side margin. As you've found, floating all blocks is usually the most reliable way, not just because you avoid the 3-Pixel Bug and other bugs, but also because you set up new block formatting contexts for each column, which is usually what is desired. If this works for your layout, great -- use it. 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/
[css-d] IE 6 Float Issue
Well, IE 6 is at it again for me. I have a layout from a client that is pixel
tight and while I have it working in IE 7 and FireFox, IE 6 is causing issues.
I have broken it down to the most basic issue which is one block being floated
to the left and the main column having a left margin equal to the floated block
width plus one, which should cause there to be a 1px gap between the two. The
following code works just fine in IE 7 and FireFox, but in IE 6, the gap is 3+
pixels wide which is causing the layout to fall apart. Can anybody offer any
suggestions here?
style type=text/css
#block1 {
float: left;
height: 175px;
width: 179px;
}
#block2 {
height: 175px;
margin-left: 180px;
}
/style
div id=block1 style=background-color: #00c;Block 1/div
div id=block2 style=background-color: #00c;Block 2/div
Thanks
-- Jeff
__
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/
