I cannot figure out why IE is not showing the 100% width I have set for the #stripes div and the #footer div. On my computer, I see the very top border and the footer stopping on the right way before the edge of the screen.
I am aware of the other issues in IE (navigation mainly), but I wanted to get this figured out first.
Thanks for any help. 
I don’t quite follow you. I’ve tested your page in IE6,7 and 8 and both stripes and footer have 100% width.
No, I see the problem.
That absolutely-positioned stripes div is screwing with things, I think.
IE is indeed making the footer and top border 100% width… of the body. The body is not as wide as the stripes div.
You can test by temporarily removing the min-width or the width: 100% on that… the scrollbar on IE should go away (if it doesn’t then “stripes” isn’t the one causing it… but I didn’t see any other likely candidates).
Really, I see it as a kind of unsteady kludge to use a div like that (I’ve seen it used fine, but its kludgy-ness was ok because they were dealing with CSS Opacity which does have special requirements)… instead, use that #wrap element you’ve got which is currently doing nothing. It’s containing everyone else, so its background image will naturally be behind everything else… it can have the min-width: 1037 or whatever, and you won’t need to also state a width: 100% with it because it’ll be a regular block in the flow (so it’ll grow without any help by default). An abso-po’d element does need that explicit “width: 100%;” so this solution may fix your problem.
I notice the menu’s css is repeated several times. I approve of the mention of :focus with the :hover in the last section, but it’s missing from the other versions. Near the beginning, all focussed anchors have the useful “outline” removed, yet there is no separate :focus style anywhere… instead, I suggest you remove the outline only from the menu (where you have explicit focus styles to do the job for you) and leave them everywhere else. Esp tabbing through the facebook/twitter/feed buttons, I must rely on my browser showing the url at the bottom to know where I am… no no no. Give me outline, or give me some other style to tell me where I’ve tabbed to.
I’m not a fan of the negative text-indent, and you already have the separate classes on each link anyway, so I’d go ahead and use Gilder-Levin so that your images just cover up text (which also gets styles for colour etc)… this prevents users with CSS on but no images (either yours don’t load or they’ve turned them off for better surfing on slow connections or whatever) from getting a mystery-meat-menu.
So anyway I think removing the stripes div entirely and making #wrap do the equivalent job will make IE happier.
HI,
You haven’t set the left position of #stripes therefore IE is placing it 100% from where it thinks it is which is somewhere in the middle hence the horizontal scrollbar and mis-position.
Just set left:0.
#stripes {
position: absolute;
width: 100%;
min-width: 1037px;
height: 430px;
background: url(images/stripes-bg.jpg) top right no-repeat;
[B] left:0;[/B]
}
Auto position of absolute elements in IE is affected by text-alignment so you need to set co-ordinates to make sure you know where the element is going to be placed.
Thanks for the help! Paul, you were correct and setting the left to 0 solved the problem.
For the stripes, I was trying to use the technique explained here.
This is a custom child theme for the Genesis Framework by StudioPress, so a lot of the code is just from that. The first portion of menu CSS is the default Genesis code. I have it commented out since I’m not using the WordPress menu. Instead, I have a sprite menu and that’s what the 2nd menu CSS is for. I will probably delete the first (default Genesis) when all is said and done.
I agree about the negative text indent, but it’s another feature of Genesis. I haven’t looked into changing that yet.
Thanks again, guys.