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 PROTECTED]> 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 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-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/
