www.webdeveloper.com
Results 1 to 3 of 3

Thread: Another float bug?

  1. #1
    Join Date
    May 2004
    Posts
    31

    Another float bug?

    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;
    }

  2. #2
    Join Date
    Jul 2004
    Location
    Newcastle upon Tyne
    Posts
    116

  3. #3
    Join Date
    May 2004
    Posts
    31
    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 Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles