2 replies [Last post]
TimH
Offline
newbie
Last seen: 17 years 21 weeks ago
Joined: 2005-02-11
Posts: 1
Points: 0

http://www.co2.me.uk/tech/2

Have tried everything i know to get rid of it. What can i do.. Shock

Helen
Offline
Enthusiast
NYC
Last seen: 17 years 24 weeks ago
NYC
Timezone: GMT-6
Joined: 2005-01-16
Posts: 135
Points: 0

2px IE indent

I'm not on Windows or IE, so can't see any problem, but could this perhaps be the infamous 3-pixel jog? Check the workaround here:

http://positioniseverything.net/explorer/threepxtest.html

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 18 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

2px IE indent

Hi Tim,

Welcome to the forum.

I was flummoxed by the shift in IE. It should have been simple to fix. The only excuse I can find is that it's someone else's code. So what I ended up doing is refactoring from scratch. My code isn't that much different, but it does cure the shift.

There's one thing I did that IE can't handle and another that is css3 and proprietary Moz. Neither have any significanse and are easily worked around for cross-browser compatability.

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
 
<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" lang="en"> 
<head> 
  <meta name="generator" content=" 
  HTML Tidy for Linux/x86 (vers 1st August 2004), see www.w3.org" /> 
  <meta name="editor" content="Emacs 21" /> 
  <meta name="redactor" content="Gary Turner" /> 
  <meta http-equiv="content-type" content=" 
  text/html; charset=us-ascii" /> 
 
  <title>timh-co2-local</title> 
<style type="text/css"> 
/*<![CDATA[*/ 
 
html, body { 
    margin: 0; 
    padding: 0; 
    } 
 
body { 
    font: 80% sans-serif; 
    color: black; 
    background-color: white; 
    } 
 
p { 
    font-size: 1em; 
    } 
 
h2, h3 { 
    margin-top: 0; 
    } 
 
h1 { 
    margin: 0; 
    visibility: hidden; 
    } 
 
#wrapper { 
    position: relative; 
    width: 898px; 
    padding: 1px; 
    margin: 10px auto; 
    background: #86becd url(bg.jpg) top right no-repeat; 
    } 
 
#banner { 
    height: 120px; 
    } 
 
#sidebar { 
    position: relative; 
    width: 165px; 
    padding: 0 5px; 
    float: left; 
    } 
 
#container { 
    margin-left: 174px; 
    } 
 
#navbar { 
    height: 32px; 
    line-height: 32px; 
    border-left: 2px solid white; 
    } 
 
#navbar ul { 
    margin: 0; 
    margin-left: 10px; 
    padding: 0; 
    list-style: none; 
    } 
 
#navbar li { 
    display: inline; 
    } 
 
#navbar a { 
    color: black; 
    background-color: transparent; 
    text-decoration: none; 
    } 
 
#navbar a:after { 
    content: "\20\20""-""\20\20"; 
    } 
 
#navbar a.last:after { 
    content: ""; 
    } 
 
#content { 
    position: relative; 
    padding: 5px; 
    margin: -1px; 
    border-top: 10px solid white; 
    border-left: 10px solid white; 
    border-right: 20px solid white; 
    height: 380px; 
    overflow: auto; 
    background-color: #bdd1d8; 
    } 
 
#footer { 
    width: 898px; 
    margin: 2px auto; 
    height: 38px; 
    background-color: #86becd; 
    color: black; 
    line-height: 38px; 
    text-align: center; 
    border: 1px solid #86becd; 
    -moz-border-radius: 20px; 
    -moz-border-radius-topleft: 0; 
    } 
 
#footer p { 
    margin: 0; 
    } 
 
/*** see http://www.positioniseverything.net/easyclearing.html 
   for explanation of Tony Aslett's elegant hack ***/ 
 
.clearing:after { 
    content: ".";  
    display: block;  
    height: 0;  
    clear: both;  
    visibility: hidden; 
    } 
 
.clearing { 
    display: inline-block; 
    } 
 
/* Hides from IE-mac \*/ 
* html .clearing { 
    height: 1%; 
    } 
.clearing { 
    display: block; 
    } 
/* End hide from IE-mac */ 
/*** end clearing hack ***/ 
 
/*]]>*/ 
</style> 
 
</head> 
 
<body> 
  <div id="wrapper" class="clearing"> 
    <div id="banner"> 
      <h1>FreeTechSupport.org</h1> 
    </div><!-- end banner --> 
 
    <div id="sidebar"> 
      <h2>sidebar</h2>To chat with one of our support volunteers right 
      now, click on the image below. Any information provided is for 
      educational purposes only, and that we cannot be held responsible 
      for any mishaps that may occur as a result. Following the given 
      advice is done so at your own risk. 
    </div><!-- end sidebar --> 
 
    <div id="container"> 
      <div id="navbar"> 
        <ul> 
          <li><a href="#">Home</a></li> 
 
          <li><a href="#">Get Support</a></li> 
 
          <li><a href="#">FAQ</a></li> 
 
          <li><a href="#">Help Us</a></li> 
 
          <li><a href="#">Contact Us</a></li> 
 
          <li><a href="#">Forum</a></li> 
 
          <li><a class="last" href="#">The Team</a></li> 
        </ul> 
 
      </div><!-- end navbar --> 
 
      <div id="content"> 
        <p>Welcome to Free Tech Support</p> 
 
        <p>Welcome to Free Tech Support</p> 
 
        <p>Welcome to Free Tech Support</p> 
 
        <p>Welcome to Free Tech Support</p> 
 
        <p>Welcome to Free Tech Support</p> 
 
        <p>Welcome to Free Tech Support</p> 
 
        <p>Welcome to Free Tech Support</p> 
 
        <p>Welcome to Free Tech Support</p> 
 
        <p>Welcome to Free Tech Support</p> 
 
        <p>Welcome to Free Tech Support</p> 
 
        <p>Welcome to Free Tech Support</p> 
 
        <p>Welcome to Free Tech Support</p> 
 
        <p>Welcome to Free Tech Support</p> 
 
        <p>Welcome to Free Tech Support</p> 
 
        <p>Welcome to Free Tech Support</p> 
      </div><!-- end content --> 
    </div><!-- end container --> 
  </div><!-- end wrapper --> 
 
  <div id="footer"> 
    <p>Professional advice from computer enthusiasts worldwide.</p> 
  </div><!-- end footer --> 
</body> 
</html>

Sounds like an interesting project. Let us know how it works out.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.