Sent by Mark Wheeler on 29 November 2006 20:08
Hi Andy,
Ok, I'm completely lost now. I'm sorry I'm not getting this. Here is
what I have for #header_right and #header_left;
#header_left {
float: left;
background-color: green;
width: 171px;
height: 168px;
}
#header_right {
background-color: red;
/* width: 604px;*/
height: 168px;
margin-left: 171px;
margin-right: -171px;
}
That produces no change in IE, still the small gap, and FF now makes
#header_right even longer. I'm sure your right in what you are
explaining, but I'm not getting it.
Mark
-------------
On Nov 29, 2006, at 12:46 PM, Andy Pemberton wrote:
> Mark:
>
> Add a negative margin equal to the width of the element. For
> example, in your case, add margin-right:-171px to header_right.
>
> Andy
>
> On 11/29/06, Mark Wheeler [EMAIL-REMOVED]> wrote:
> Hi Andy,
>
> Thanks for the reply. I've taken away the width attribute for
> #header_right, and that brings the div back up, but now there is a
> small break between the two divs. They should be flush. Is that
> where the negative margin comes in on #header_left? I tried putting
> in a -1px and -3px margin-right on #header_left, but it didn't
> help? What am I missing here?
>
> Thanks,
>
> Mark
>
> ---------------------------
>
> On Nov 29, 2006, at 10:18 AM, Andy Pemberton wrote:
>
>> Mark:
>>
>> This is quite an interesting case. Aparrently, applying
>> "hasLayout" to the #header_right element is causing a rendering
>> bug in IE that is adding extra space between the #header_left and
>> #header_right elements. See the reference below for a description
>> of "hasLayout" and its effects in IE.
>>
>> So, to solve this issue, you have two options:
>>
>> 1. Remove the style properties that are giving the element
>> "hasLayout"
>>
>> Width and height both trigger "hasLayout" in IE and in this
>> case, width is not necessary as your DIV is a block level element
>> that will automatically fill the remaining (604) pixels. So remove
>> both to prevent this issue. If it is absolutely necessary to
>> define the height, use the 2nd solution below.
>>
>> 2. Add a negative right margin to the #header_left element
>>
>> This will cause the #header_right element to occupy the space
>> removed by the negative margin from the #header_left element.
>> However, there is a margin-left on the #header_right element which
>> will cause the right container to be displayed to the right of the
>> left container.
>>
>> So your style for the #header_right element should look like this:
>>
>> #header_right {
>> background-color: red;
>> height: 168px;
>> margin-left: 171px;
>> }
>>
>> I've tested this solution in: FF2, IE (7,6,5.5), Safari 2.0, Opera 9
>>
>> PS: This technique of using negative margins is something I've
>> used to combat the float-drop problem often encountered in IE (see
>> reference below).
>>
>> References:
>> - http://www.positioniseverything.net/explorer/expandingboxbug.html
>> - http://www.satzansatz.de/cssd/onhavinglayout.html
>>
>>
>>
>> On 11/29/06, Mark Wheeler [EMAIL-REMOVED] > wrote:
>> Hi all,
>>
>> So in my quest to use less absolute positioning (why, because I
>> wanted to try it.) I've come up against some floats not floating next
>> to each other. I've written a short test page here, and the css is in
>> page.
>>
>> http://www.tonedeafstudios.com/test/test21.html
>>
>> And here is the very short code.
>>
>> <CODE>----------------------------------------------
>>
>> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
>> "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
>> <html xmlns="http://www.w3.org/1999/xhtml">
>> <head>
>> <title>Untitled</title>
>> <style type="text/css" title="text/css">
>> /* <![CDATA[ */
>> html, body {
>> padding: 0;
>> margin: 0;
>> }
>>
>> body {
>> font-size: 12px;
>> font-family: "Trebuchet MS", "Gill Sans", Verdana, Tahoma,
>> sans-serif;
>> line-height: 150%;
>> color: #000;
>> background-color: #292b68;
>> min-width: 775px;
>> text-align: center;
>> }
>>
>> #wrapper {
>> text-align: left;
>> margin-right: auto;
>> margin-left: auto;
>> position: relative;
>> width: 775px;
>> }
>>
>> #header_left {
>> float: left;
>> background-color: green;
>> width: 171px;
>> height: 168px;
>> }
>>
>> #header_right {
>> background-color: red;
>> width: 604px;
>> height: 168px;
>> margin-left: 171px;
>> }
>> /* ]]> */
>> </style>
>> </head>
>> <body>
>>
>> <div id="wrapper">
>>
>> <div id="header_left"></div>
>> <div id="header_right"></div>
>>
>> </div>
>>
>> </body>
>> </html>
>>
>> </CODE>-----------------------------------------------------
>>
>>
>> It's one div floated left against another div, but in IE6 it floats
>> the div left, but then the adjacent div is kitty-corner to floated
>> div. I'm sure there is a bug in IE regarding this, but I've looked
>> and can't seem to find it.
>>
>> The two divs have stated heights and widths and are enclosed in a
>> wrapper to center the whole thing on the page.
>>
>> Any help would be great.
>>
>> Thanks,
>>
>> Mark
>> _____________________________________________________________________
>> _
>> css-discuss [EMAIL-REMOVED]]
>> 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-discuss [EMAIL-REMOVED]]
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/
