IE7 issues with header

HTML & CSS
1

Hi,

I seem to having IE7 issues displaying the following page: http://174.132.115.189/~petsetcv/ . The header at the top with the links to Products Grooming and Training should line up across the top with the link and black italic wording one on top of the other and the picture next to each link/wording combination. Hard to explain but it looks correct in Chrome and Firefox so you can check it there. I would appreciate a point in the right direction regarding a fix for this.

All the best,

Luciano

2

Just had a second thought. Is there a conditional statement I can make for IE7?

Thanks,

luciano

3

Thanks much. I’ll see if that alternative works well.

All the best,

Mark

4

You have a style selector

#header UL LI which has display: table-cell.

IE7 does not recognise this. You could do float: left; insead.

5

If you’d like to put the IE6 and 7 styles in your CSS sheet (if you don’t already have IE stylesheets that is), you can also (right under where you have the display: table stuff for Modern Browsers) do

  • html #theelement {alt styles;} /ie6/
    and
    *+html #theelement {alt styles;} /ie7/

If it’s just a few times, it’s ok, but if there’s lot of display: table and stuff going on, it can start getting fugly real quick. So it’s a design choice. I like using these over CC’s because I like all my styles in one place on one sheet where I can always find them with /search or crtl-f or whatever.

One option though if you do have a lot of the display: tables (and display: inline-blocks too) and don’t want to use Conditional Comments in your HTML is to assign a class to all those who need the other styles… then just once you can state the new styles using the code above and the class.

6

Yep



<!-- Style for IE 7 -->
<!--[if IE 7]>
<style type="text/css">

</style>
<![endif]-->