CSS Display Bugs in IE - Revision history

LeonTorres: /* Float Drop Bug */

2008-01-05T01:22:05Z

‎Float Drop Bug

2008-01-05T01:21:06Z

‎Float Drop Bug

2008-01-05T01:20:31Z

‎Float Drop Bug

2008-01-05T01:19:47Z

‎Header Background Color Vanishes

2008-01-05T01:18:41Z

2008-01-05T01:07:50Z

‎Float Drop Bug

2008-01-05T01:07:05Z

‎Float Drop Bug

2008-01-04T19:42:52Z

‎Float Drop Bug

2008-01-04T19:41:20Z

‎Float Drop Bug

2008-01-04T19:38:21Z

Protected "CSS Display Bugs in IE": Sysop page [edit=sysop:move=sysop]

@@ Line 6: / Line 6: @@
 <pre>
-   <div class="main-content-area">
+   <div style="width: 800px;">
-     <div style="float: left;">
+     <div style="float: left; width: 200px;">
         Sidebar content goes here.
      </div>
@@ Line 21: / Line 21: @@
 .body {
    display: inline;
+}
 </pre>

@@ Line 1: / Line 1: @@
 ==Float Drop Bug==
-This bug occurs when you have a floating box and the content that should be next to it is pushed underneath.  It is a well known bug and has many solutions.  The best solution is to avoid using CSS and use tables for this kind of layout.  Sometimes this is not possible, thus the fix must be accomplished by hacking at the CSS until it does what you need.
+This bug occurs when you have a floating box and the content that should be next to it is pushed underneath.  It is a well known bug and has many solutions.  The best solution is to avoid using CSS and use tables for this kind of layout.  Sometimes this is not possible, so we must hack the CSS until it does what we want.
 As an example, suppose you have a fixed width main content area, say 800 pixels wide.  On the left is a floating sidebar that has float: left and is 200 pixels wide.  We want the main body of content to fill the rest of the space.

@@ Line 1: / Line 1: @@
 ==Float Drop Bug==
-This bug occurs when you have a floating box and the content that should be next to it is pushed underneath.  It is a well known bug and has many solutions.  The best solution is to avoid using CSS and use tables for this kind of layout if you must target IE 6.  Sometimes this is not possible, thus the fix must be accomplished by hacking at the CSS until it does what you need.
+This bug occurs when you have a floating box and the content that should be next to it is pushed underneath.  It is a well known bug and has many solutions.  The best solution is to avoid using CSS and use tables for this kind of layout.  Sometimes this is not possible, thus the fix must be accomplished by hacking at the CSS until it does what you need.
 As an example, suppose you have a fixed width main content area, say 800 pixels wide.  On the left is a floating sidebar that has float: left and is 200 pixels wide.  We want the main body of content to fill the rest of the space.

@@ Line 26: / Line 26: @@
 ==Header Background Color Vanishes==
-Problem:  A colored header, such as the blue <tt>screenlet-header</bb> style, loses its background color if it touches the top of the screen.  This generally occurs when there is a floating element next to the header.
+Problem:  A colored header, such as the blue <tt>screenlet-header</tt> style, loses its background color if it touches the top of the screen.  This generally occurs when there is a floating element next to the header.
 This problem is most noticable when creating orders in the OFBiz ordermgr.  Some of the headers have yellow links in them, and when the blue background does not show up, it looks really ugly.

← Older revision		Revision as of 01:18, 5 January 2008
Line 23:		Line 23:
	}		}
	</pre>		</pre>
		+
		+	==Header Background Color Vanishes==
		+
		+	Problem: A colored header, such as the blue <tt>screenlet-header</bb> style, loses its background color if it touches the top of the screen. This generally occurs when there is a floating element next to the header.
		+
		+	This problem is most noticable when creating orders in the OFBiz ordermgr. Some of the headers have yellow links in them, and when the blue background does not show up, it looks really ugly.
		+
		+	We fixed the problem with the CSS tag <tt>.subSectionHeader</tt> in <tt>opentaps.css</tt>, which is why we prefer to use that over <tt>screenlet-header</tt>. To fix it for <tt>screenlet-header</tt> or other styles that might have a problem,
		+
		+	<pre>
		+	.screenlet-header {
		+	_height: 1em;
		+	}
		+	</pre>
		+
		+	The height is interpreted by IE as the minimum height that the div should span, forcing it to color at least that much. IE is the only browser that understands the underscore, so this is a safe hack.

← Older revision		Revision as of 01:07, 5 January 2008
Line 16:		Line 16:
	</pre>		</pre>

−	In IE, the contents in the "body~~" might~~ end up below the sidebar rather than to the right of it. To fix this, make sure ~~the~~ content is less than the width of the body area, which is 800 - 200 = 600 pixels wide. Then, ~~add~~ <tt>display: inline;</~~tt> to the CSS <tt>.body</tt~~> ~~definition.~~	+	In IE, the contents in the '''body''' can end up below the sidebar rather than to the right of it. To fix this, make sure all content in '''body''' is less than the width of the body area, which is 800 - 200 = 600 pixels wide. Then modify the '''body''' CSS definition,
		+
		+	<pre>
		+	.body {
		+	display: inline;
		+	}
		+	</pre>

← Older revision		Revision as of 19:42, 4 January 2008
Line 16:		Line 16:
	</pre>		</pre>

−	In IE, the contents in the "body" might end up below the sidebar rather than to the right of it. To fix this, make sure the content is less than the width of the body area, which is 800 - 200 = 600 pixels wide.	+	In IE, the contents in the "body" might end up below the sidebar rather than to the right of it. To fix this, make sure the content is less than the width of the body area, which is 800 - 200 = 600 pixels wide. Then, add <tt>display: inline;</tt> to the CSS <tt>.body</tt> definition.

← Older revision	Revision as of 19:38, 4 January 2008
(No difference)