Issue with div positioning over background image in IE

Forum Moderators: not2easy

Message Too Old, No Replies

Issue with div positioning over background image in IE

jakkwylde

2:42 am on Nov 1, 2005 (gmt 0)

Please reference the layout issue on the following page:

In Firefox, the section with the text "HEADER" is positioned correctly. In Internet Explorer, everything seems to be shifted to the left by one or two pixels. The following are my current CSS classes:

body {
color: #777;
background: #EAEAEA url('/v2/images/design/background.png') repeat-y center top;
margin: 0px;
padding: 0px;
border: 0px;
text-align: center;
font-family: verdana;
}

#wrapper {
margin: 0px auto;
padding: 0px;
border: 0px;
width: 620px;
text-align: left;
}

#header {
width: 620px;
height: 65px;
padding: 0px;
border: 0px;
margin: 0px;
background: #c0c0c0;
border-bottom: 1px solid #000;
}

Any advice or suggestions would be greatly appreciated on how I can correct this.

[edited by: Woz at 2:52 am (utc) on Nov. 1, 2005]
[edit reason] No URLs please, see TOS#13 [/edit]

tedster

8:38 am on Nov 1, 2005 (gmt 0)

A little bit more information will help here.

1. What DTD are you using?
2. When you say "everything" seems shifted -- what is everything? text, images, a form, embedded objects?

If you can post a snippet of your html that could help, too. Just reduce the mark-up to the minimum needed to reproduce the effect without including any site specifics.

jakkwylde

12:44 pm on Nov 1, 2005 (gmt 0)

The issue that I'm having is the wrapper div that goes over the background image isn't lining up correctly on the left side in IE (it overlaps a part of the bg that it shouldn't).

Below is the current source with inline styles specified:

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

<head>
<meta http-equiv="Content-Language" content="en-us">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">

<title>Test Layout</title>
<style>
html {
overflow: -moz-scrollbars-vertical;
}

body {
color: #777;
background: #EAEAEA url('/v2/images/design/background.png') repeat-y center top;
margin: 0px;
padding: 0px;
border: 0px;
text-align: center;
font-family: verdana;
}

#wrapper{
margin: 0px auto;
padding: 0px;
border: 0px;
width: 620px;
text-align: left;
}

#header{
width: 620px;
height: 65px;
padding: 0px;
border: 0px;
margin: 0px;
background: #c0c0c0;
border-bottom: 1px solid #000;
}
</style>
</head>

<body>
<div id="wrapper">
<div id="header">HEADER</div>
</div>
</body>

</html>