Several IE CSS issues

Question

Ok I admit I always see people griping about IE (Internet Explorer xx) and I never really complain about it but I realize I may be wrong. I am a hardcore Chrome user, occasionally I'll open up Firefox for something or to test a view but never IE until the other day. I opened up IE 8 on a site I am working on and was shocked, There was so much wrong and I am not blaming IE, I am just getting into doing proper CSS and design, I am more of a backend coder. So most likely I am just not using proper CSS

So below is an image from IE8 of my project, I have labeled each section that has a problem.

1) This background should expand the width of the page and it does in Firefox and Chrome.

Here is some CSS for this area

#header-wrap {
   width: 100%;
   position: relative;
   margin: 0 auto;
   height: 95px;
   background: #F3F3F3 url(../images/layout/blue-spike.gif) repeat-x;
   border-bottom: 1px solid #DEDEDE;
}

---

2) This is a navigation unordered list, it should show all the list items in a row, left to right and when it gets to wide it starts a new row of items left to right, it does that in Firefox and Chrome

#tag-list li a {
   color: white;
   text-transform: uppercase !important;
   background: #585858;
   padding: 4px 6px 4px 6px!important;
   -moz-border-radius: 3px;
   border-radius: 3px;
   font: .8em Helvetica,Arial,sans-serif;
   margin: 1px 0px 3px 3px;
   display: block;
   float: left;
}

---

3) Same code from number 2 but instead of square corners, each link should have round corners, it works that way with Firefox and chrome with the border radius

---

4 Same as the header section, it should expand the full width of the page but it does not

#footer {
  clear: both;
  background: #444 url(../images/noise-gray.png) center;
  color: #666;
  font-size: 1.1em;
  with: 100%;
  padding-bottom: 15px;
}

This is another background image for the fotter that is a zigzag at the top of footer, it does not even show up in IE with this code below

#footer-zig-zag {
  background: url(../images/shake-up.png) top repeat-x;
}

---

I realize this is a vague question and I do not expect someone to recode the site, hint why I havent added all the HTML.

I am just asking if from the above CSS if anything stands out as being incorrect for it to work with IE.

I was never aware of how bad or different IE is from Chrome and Firefox and I would like to not keep making the same mistakes, I do not care to support IE 100% but I think I can do a little better then my current.

Thank you for any help

Answer 1

without seeing it entirely, you're right, it's kinda vague, but off hand,

2) looks like the li are in block display....set them to float:left; display:inline;

3) border-radius isn't supported in ie8. for ie9 you need to add -ms-border-radius; you can find js fixes for < ie9 border-radius support

1) and 4a) again, hard to tell, but with width:100% and them not covering it, i'm going to assume the ie is reading the parent width as something in correctly. set the parent element to width:100% as well.

you can target ie with conditional comments so you don't mess with your real styles like this:

<!--[if IE]> <style> div.parentelement{width:100%} </style> <![endif]-->