I suspect it's because IE is adjusting the width based on viewport size
and because the #content div has a fixed width that's larger, it's
padding for viewport margin). Or maybe you already knew that..... ;-)
Can you use a resizable #content div? Some stuff here might help:
http://glish.com/css/
A search for "div viewport" might get you somewhere, too. If margins
don't matter for the layout, you could also do some box model neutralizing:
/* Neutralize styling:
Elements we want to clean out entirely: */
html, body, form, fieldset {
margin: 0;
padding: 0;
}
/* Neutralize styling:
Elements with a vertical margin: */
h1, h2, h3, h4, h5, h6, p, pre,
blockquote, ul, ol, dl, address {
margin: 1em 0;
padding: 0;
}
/* Apply left margin:
Only to the few elements that need it: */
li, dd, blockquote {
margin-left: 1em;
}
I dropped that into a copy of your HTML and I think your problem went
away (if I understand it correctly). The header always spanned the page
(viewport) width.
- Jack
[EMAIL PROTECTED] wrote:
I'm experiencing a weird IE display issue that isn't really JavaScript
or JQuery related (but I've tried JS to fix it, though it never
worked). Its hard to explain, so I made a video of it, and the link to
the page is below...
http://brianlitzinger.com/dropbox/IEsucks2.mov
http://brianlitzinger.com/dropbox/iesucks.html
I've tried EVERYTHING I can think of. I also can't remember ever
running into this problem before, so I'm stumped. Basically the header
div _should_ expand the width of the wrapper div at all times, but in
IE6 when you scale the window down below the width of the wrapper, the
scroll to the right, the header div is clipped. If anyone can offer
insight into what is going on I'd appreciate it. I'm about to jump
out the window...
Thanks
