CSS Forum

**sudhakararaog** · 02-15-2009, 05:39 AM

i am having a serious issue with ie 7 i really need help.

i am using a center layout using 900px the center layout looks and works fine

in all browsers except for ie7 i have used a border for the wrapper tag.
what i have noticed only in the case of ie7 is the left border for the wrapper

tag starts a few pixels 2px or 3px before compared to all other browsers and

due to this in ie7 the right border ends a few pixels when compared to all

other browsers. so if i can fix the left border the right border for the

wrapper tag will adjust automatically.

i am using a valid xhtml transitional document. following is my code.

-------------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Background image</title>

<style type="text/css">

body {
text-align: center;
margin: 0;
font-family: Verdana;
font-size: 10px;
}

#wrapper {
width: 900px;
text-align: left;
margin: 0 auto;
border: 1px solid #ffff00;
}

p{
margin: 0;
padding: 0;
}

</style>

</head>

<body>

<div id="wrapper">
<p>Content </p>
</div></body></html>

-------------------------------
can someone please tell me what the issue is and what the code should be. i

would highly appreciate any help as this is an issue in ie7 and not in other

browsers.

thanks.

**Insensus** · 02-15-2009, 05:45 AM

All I can think of is:
html {
margin: 0;
}

but, seriously, what is the problem?
So what if your website shifts 2px to the left in IE.
If you already make a point about this, you'll probably kill yourself when you continue with the rest.
There's much worse differences that can exist between IE and other browsers than this.

**FabryDesign** · 02-15-2009, 10:25 AM

I've noticed this too, it can really be painful. You'll want to use conditional comments to fix it.

Code:

<!--[if IE]>
  <style>
  #wrapper
  {
    padding-left:2px;
  }
  </style>
<![endif]-->

More information here:
http://www.quirksmode.org/css/condcom.html

**rogem002** · 02-15-2009, 11:35 AM

IE tends to have problems with Margins and paddings. Just use the conditional comments (see above post) to put custom IE only css.