HTML Forum

**nick1** · 01-08-2007, 08:50 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;
}

**LadynRed** · 08:53 PM

It's the dreaded 3px text jog bug.
http://www.positioniseverything.net/...reepxtest.html

Add height: 1% on the <p> inside the NON-floated container and it will stop doing that. Or.. move your non-floated container over by 4 px.

**nick1** · 01-08-2007, 09:57 PM

Thank you for your speedy reply and for pointing me to the somewhat maddening explanation behind this bug. I'm still trying to comprehend it.

Thanks again,

Nick

**nick1** · 01-09-2007, 06:41 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%;
}

**LadynRed** · 01-09-2007, 10:15 PM

You need to modify your conditional comment to target IE 6 and below.

And, your css is wrong for the <p>

Quote:

#sidemenup {
height: 1%;
}

Needs to be #sidemenu p

HTML Forum

Find a Professional HTML Freelancer!

FREE Outsourcing eBook!