header & footer out 1px on XP+IE6

liunx

Guest
hi guys,

i am back at tech to finish a paper and i logged on the internet and checked my web page.

ahhhh the header and footer and out to the left 1px!

this is the same for me at home and i thought it was bad cashing or something so i forgot about it.

at home i have xp and IE v6.0 and is 1px out. FF works fine.

at work i have win2000 and IE v6.0 is it ok.

can someone please take a look at this for me if you have xp and IE v6.
and see if it is happening on there computer too?

i have attached a pic.

if anyone wants to see the CSS it is here (<!-- m --><a class="postlink" href="http://www.deskjetmodels.co.nz/css/model.css">http://www.deskjetmodels.co.nz/css/model.css</a><!-- m -->)

thanx guysyeah i noticed that too... so if you ever wanted to do a faux column and header that blend make the background in a container div, and then make your header replace your <h1>... that way everything will be lined up... and same goes for your footer...hey thanx for your help JDM71488,

im not sure if i understand you correctly (my fault) can you explain a little more?

when i get home from work i will try and do some playing around with what you said.

Cheersi would love to.... :) as best as i can...

a faux column is a vertically repeated image that makes your page appear to be split into columns... just google faux columns for more help...

let's take this html code:
<body>
<div id="container">
<p>whatever...</p>
</div>
</body>
lets say i had this css:
body {
background: url("bg.jpg") repeat-y center;
}
div#container {
margin: 0 auto;
width: 500px;
}
h1 {
background: url("logo.jpg") no-repeat center;
height: 100px;
text-indent: -5003px;
margin: 0 0 10px 0;
padding: 0;
width: 500px;
}
firefox will place your div where it is supposed to be so any blending with the header and footer into the faux column background on your body is fine because div#container is directly in the center.

ie/win i found will be 1 or 2 px off to the left or right, i can't remember... so this tells me that if i want to have a header blended in with my columns, i will have to make then positioned the same horizontally...

and to that i know that everthing in div#container will be lined up right... so you make the faux column on the div#container and then blend your header and footer images via css methods...

css fix:
body {
margin: 0;
padding: 0;
}
div#container {
background: url("bg.jpg") repeat-y center;
margin: 0 auto;
width: 500px;
}
h1 {
background: url("logo.jpg") no-repeat center;
height: 100px;
text-indent: -5003px;
margin: 0 0 10px 0;
padding: 0;
width: 500px;
}Thanks man,

yeah i googled faux columns and knew what they were. im not using any becuase of my background image.

i will try out what you said tonight and get back to you if i have any more porblems.

Cheers!hey JDM71488,

i have finally gotten around to fixing that problem, been very busy at work. AND i cant really test if it works as my computer at home displays it correctly!

now i looked at my code and i have this.

html

<div id="container">
<h1>Models</h1>


and css

#container {
margin: 0px auto;
text-align: left;
width: 699px;
min-height:100%;
padding-left: 1px;
}

h1 {
width: 699px;
height: 133px;
text-indent: -9999px;
background: url("http://www.deskjetmodels.co.nz/images/header.jpg");
margin: 0;
padding: 0;
border: 1px;
border-color: Black;
border-bottom: 1px;
}



by the looks of it i have my header code within the container code. isnt this what you suggested?

please correct me if i am wrong! (which i proberly am)

thanxyou are correct... it looks fine with to in FF, but IE is off just a bit, 1 maybe 2px...

since you have a set width, and padding to make 700 for your container, i would add a hack to compensate for different browsers...

good work.
 
Back
Top