IE7 CSS conundrum

One of my sites has been XHTML 1.1 for quite some time. It works
perfectly in Opera (6 onwards), Firefox (1.5 onwards) and IE through
the last version 6. It is only with the recent IE7 update that somehow
the layout is broken, e.g., http://sniptools.com/musings/conan-calls-a-spade-a-spade
-- the background image has a CSS of being centered through the middle
of the , but it shows up a bit to the right on IE 7, with a
horizontal scroll bar. Funnily, the exact same CSS basically works on
the main page: http://sniptools.com/ (although that too is off the
left margin by a pixel or two). I'd appreciate any thoughts as to why
this is happening? Optimistic side of me hopes that this can be fixed
with some simple tweak that I'm overlooking because rewriting the
whole columnar design would be a huge PITA. Many thanks in advance!

Re: IE7 CSS conundrum

Shanx wrote:
> One of my sites has been XHTML 1.1 for quite some time. It works
> perfectly in Opera (6 onwards), Firefox (1.5 onwards) and IE through
> the last version 6. It is only with the recent IE7 update that somehow
> the layout is broken, e.g., http://sniptools.com/musings/conan-calls-a-spade-a-spade
> -- the background image has a CSS of being centered through the middle
> of the , but it shows up a bit to the right on IE 7, with a
> horizontal scroll bar. Funnily, the exact same CSS basically works on
> the main page: http://sniptools.com/ (although that too is off the
> left margin by a pixel or two). I'd appreciate any thoughts as to why
> this is happening? Optimistic side of me hopes that this can be fixed
> with some simple tweak that I'm overlooking because rewriting the
> whole columnar design would be a huge PITA. Many thanks in advance!

Try commenting out the #titlenav div.

Re: IE7 CSS conundrum

On May 5, 4:00 am, JWL wrote:
> Shanx wrote:
> > One of my sites has been XHTML 1.1 for quite some time. It works
> > perfectly in Opera (6 onwards), Firefox (1.5 onwards) and IE through
> > the last version 6. It is only with the recent IE7 update that somehow
> > the layout is broken, e.g.,http://sniptools.com/musings/conan-calls-a-spade-a-spad e
> > -- the background image has a CSS of being centered through the middle
> > of the , but it shows up a bit to the right on IE 7, with a
> > horizontal scroll bar. Funnily, the exact same CSS basically works on
> > the main page:http://sniptools.com/(although that too is off the
> > left margin by a pixel or two). I'd appreciate any thoughts as to why
> > this is happening? Optimistic side of me hopes that this can be fixed
> > with some simple tweak that I'm overlooking because rewriting the
> > whole columnar design would be a huge PITA. Many thanks in advance!
>
> Try commenting out the #titlenav div.

If you go to the W3C validator, you will find 9 xhtml 1.1 validation
errors. Although the code is written as xhtml 1.1, it is not served
properly, so it is just being served as text/html which is indicated
at the W3C validator using the extended interface. When served
properly as xhtml, a page can not be viewed on any IE browser
including IE7. Typically to serve as xhtml properly, on the server you
would associate a xhtml mime type such as application/xhtml+xml with
an extension such as .xhtml, since .html usually is reserved for the
mime type text/html on the server. To view on IE you must either mis-
serve the page as text/html as you have done for it or serve as html
4.01 strict. This sometimes is done with a php include in the header
exchange. As you are now mis-serving the page, using xhtml serves
absolutely no usual purpose, and you should use html 4.01 strict, or
go to the considerable trouble to serve the page correctly as
application/xhtml+xml for browsers that can handle it and as html 4.01
strict for browsers such as IE that can not.