Another float bug?

**nick1** · 01-08-2007 07:46 PM

Greetings,

Using the code below, I am experiencing a bug similar in nature to the IE Doubled Float-Margin Bug explained at:

http://www.positioniseverything.net/...ed-margin.html

The difference is that a space (maybe 3px in width) is being placed to the right of the floated div. Using the workaround described in the link above (display:inline) does not resolve this problem.

I will stop explaining and encourage you to please view my code in both Firefox and IE. All feedback is appreciated, especially explanations and solutions =)

Thank you for your time,

Nick

XHTML code:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>TEST TEST TEST</title>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="description" content="TEST TEST TEST." />

<link rel="stylesheet" type="text/css" media="screen, projection" href="css.css" />

</head>

<body>

<div id="container">

         <div id="body">

                 <div id="content">

                         This is where the content will exist.This is where the content will exist.
                         This is where the content will exist.This is where the content will exist.
                         This is where the content will exist.This is where the content will exist.
                         This is where the content will exist.This is where the content will exist.

                 </div>

                 <div id="sidemenu">

                         This is the sidemenu.<br />
                         This site is valid <a href="http://validator.w3.org/check/referer" title="Validate this document">XHTML 1.0 Strict</a>, <a href="http://jigsaw.w3.org/css-validator/check/referer" title="Validate this CSS">CSS</a>

                 </div>

         </div>

</div>

</body>
</html>

CSS code:

Code:

body {
  margin: 25px 0 0 0;
  padding: 0;
  font-family: times, serif;
  text-align: left;
  color: #000000;
}

#container {
  margin: 0 auto;
  width: 750px;
}

#body { /*not to be confused with <body>*/
  padding: 8px 8px;
  background-color: orange;
}

#content {
  width: 500px;
  font-size: 1em;
  float: left;
  background-color: #00ff00;
}

#sidemenu {
  width: 200px;
  font-size: 1em;
  background-color: #ffff00;
}

**ToonMariner** · 01-09-2007 07:16 AM

3px gap

**nick1** · 01-09-2007 05:43 PM

Greetings,

I am attempting to implement this workaround however I am experiencing difficulties somewhere in my code. It seems that IE6 is not detecting the workaround. Please see my code below.

XHTML code:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>Limeblue</title>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="description" content="Welcome to Limeblue." />

<!--[if IE]>
<link href="ie.css" rel="stylesheet" type="text/css" />
<![endif]-->

</head>

<body>

<div id="container">

         <div id="body">

                 <div id="content">

                         This is where the content will exist.This is where the content will exist.
                         This is where the content will exist.This is where the content will exist.
                         This is where the content will exist.This is where the content will exist.
                         This is where the content will exist.This is where the content willexist.

                 </div>

                 <div id="sidemenu">

			<p id="sidemenup">

                         This is the sidemenu.<br />
                         This site is valid <a href="http://validator.w3.org/check/referer" title="Validate this document">XHTML 1.0 Strict</a>, <a href="http://jigsaw.w3.org/css-validator/check/referer" title="Validate this CSS">CSS</a>

			</p>

                 </div>

         </div>

</div>


</body>
</html>

CSS code:

Code:

body {
  margin: 25px 0 0 0;
  border: 0px solid #ffffff;
  padding: 0;
  font-family: times, serif;
  text-align: left;
  color: #000000;
  background: transparent url(../pics/bg_grey.gif) 

repeat;
}

#container {
  margin: 0 auto;
  width: 750px;
}

#body { /*not to be confused with <body>*/
  padding: 8px 8px;
  background-color: orange;
}

#content {
  width: 500px;
  font-size: 1em;
  float: left;
  background-color: #00ff00;
}

#sidemenu {
  width: 200px;
  font-size: 1em;
  background-color: #ffff00;
}

#sidemenup {
  height: 1%;
}

Thread: Another float bug?

Thread Tools

Display

Another float bug?

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions