'k,

#header{
height: 120px;
width: 700px;
background-image: url(../i/lgo.jpg);
background-repeat: no-repeat;
background-position: left top;
background-color: #4B82CD;
margin: 0 0 0 1; /*ERROR*/
clear: both;
}

Noice "error" on the second bottom line for margin. Currently using this line, I have a holder gif (see zeldmans site for example) and a centered 700px area. The header sits quite happily in the center, and the gif lines forms the borders. The code above will not validate as I need a measurement after the 1 in #header.

Now, when I fix this by putting a "px" after, it'll validate. It'll also break the layout in firefox (ie fine) by moving the header 1pix to the right. Its a small thing, but it's driving me mental. Anyone any clues?

invalid.
holder -
header image *
border | (from gif image)

--------|*******************|------------

valid css. (1px to right -> )

--------| *******************------------

#header{
height: 120px;
width: 700px;
background: #4B82CD url(../i/lgo.jpg) no-repeat 0% 0%;
clear: both;
/* Ie, avant margin /*
margin: 0 0 0 1px;
}
html>body #header{
/* ff, Netscape, opera margin /*
margin: auto;
}

Works perfectly now in ie, opera, ff, netscape and avant. Class. Cheers Tyla.

Tyla wrote:
> try setting it to AUTO as the alignment is actual position is defined
> by the parent "wrapper". Without actually taking a full
> copy of the CSS and HTML, I'm making a bit of a guess here.

I'll give it a try. I'm a bit wary about posting my entire CSS as it's on compant time, and I'm sure they would be unhappy. Thanks for the info again.

> Where dot he GIF borders come in? And why can't you use CSS to define
> borders?

Look at zeldmans site. It's that gradiant bar that looks as it the centered content is slightly raised off the page. I figure if it's good enough for him, I can use the technique. :)

try setting it to AUTO as the alignment is actual position is defined by the parent "wrapper". Without actually taking a full copy of the CSS and HTML, I'm making a bit of a guess here.

Where dot he GIF borders come in? And why can't you use CSS to define borders?

Tyla wrote:
> GIve us the source HTML for the element.

GIve us the source HTML for the element.

Tyla wrote:
> Do you have a URL?
>
> It will be FF redering it correctly, not IE, so the problem lies in
> the CSS not the browser.
>
> FWIW, Optimised it a little too:
>
> #header{
> width: 700px;
> margin: 0 0 0 1;
> clear: both;
> background: #4B82CD url(../i/lgo.jpg) no-repeat 0% 0%;
> height: 120px;
> }

Not at the moment as we need php / mysql support on the account.
Done a fix as mentioned above, and as to the optimisation, I always play to the "get the damn thing working first" rule, but thanks for the info. :) :) :)

Fixed.

#header{
height: 120px;
width: 700px;
background-image: url(../i/lgo.jpg);
background-repeat: no-repeat;
background-position: left top;
background-color: #4B82CD;
clear: both;
margin: 0 0 0 1px;
/* Ie, avant margin /*
}
html>body #header{
/* ff, Netscape, opera margin /*
margin: 0 1px 0 -0.5px;
}

It looks ugly, but it fixs the four areas that were affected. I'll be avoiding pixel precision in future.

Do you have a URL?

It will be FF redering it correctly, not IE, so the problem lies in the CSS not the browser.

FWIW, Optimised it a little too:

#header{
width: 700px;
margin: 0 0 0 1;
clear: both;
background: #4B82CD url(../i/lgo.jpg) no-repeat 0% 0%;
height: 120px;
}

Forgive me for not being much help and probably stating the obvious, but surely Firefox is parsing your CSS correctly and IE isn't.

Anyway, Tyla might know something about this, there's usually loads of annoying hacks you can use so that your site works in both browsers all right.

Edit: Or I could be completely wrong and missing the point of what you want. I don't know.

'k,

#header{
height: 120px;
width: 700px;
background-image: url(../i/lgo.jpg);
background-repeat: no-repeat;
background-position: left top;
background-color: #4B82CD;
margin: 0 0 0 1; /*ERROR*/
clear: both;
}

Noice "error" on the second bottom line for margin. Currently using this line, I have a holder gif (see zeldmans site for example) and a centered 700px area. The header sits quite happily in the center, and the gif lines forms the borders. The code above will not validate as I need a measurement after the 1 in #header.

Now, when I fix this by putting a "px" after, it'll validate. It'll also break the layout in firefox (ie fine) by moving the header 1pix to the right. Its a small thing, but it's driving me mental. Anyone any clues?

invalid.
holder -
header image *
border | (from gif image)

--------|*******************|------------

valid css. (1px to right -> )

--------| *******************------------