Image display issue in IE

I am just starting this design (customized WP template):

http://chasegarrett.com/

Everything looks fine in Firefox. The social icons to the right of the navbar don’t show up in IE7, nor does the image at the top of the sidebar. I know there are some issues with PNGs in IE 7 and below, but don’t have nuanced understanding of it. I changed one of the icons to a GIF, but still not working. Then I looked in IE8, too, and not working there, either. So I have a feeling I am missing something very obvious. Anyone have a suggestion?

Well, I just did it: removed the div, changed them all to individual li (they are floated right, so don’t hide behind the nav menu), and changed the inline-block to simply block, and all is good with the icons (I think). You had identified exactly the two things I needed to fix it. Big thank-you!

I still need to figure out why the image isn’t showing…working on that now.

well, you could, but then they’d be directly behind the others and not on the other side. No, what I think you need is to place the div after the list and float it to the right, you could even turn the div into a list itself and float the list elements, then you wouldn’t have that inline-block issue with IE7 - but lets see what the CSS gurus think.

Oops, just checked the CSS and it validates, so I’m confused.

It’s the XHTML that does not…presumable something in the WordPress code??

Thanks, I don’t think that’s it, because I tend to work in RGB only, and embed sRGB icc profiles.

Thanks for taking the time. I’ve requested the thread be moved.

I guess you can probably tell I am new at this.:blush:

I was just going by the green checkmarks in my web developer toolbar, which said it validated. But I guess that’s inaccurate, because when I actually plug the link into the validator, I have some errors (still trying to identify them). I’ll keep working on this. :slight_smile:

That is some sweet piano playing.

Thanks again. I did finally spot what you were referring to. It’s some code I copied and pasted for the social icons. Hopefully the CSS forum will chime in, but maybe I could simply remove the div and turn each of the buttons into its own li.

Those green checks don’t refer to html errors - you should get the HTML Validator addon, and it’s the html that has that one error that I was referring to, i.e. the div of those images placed within the navigation list.

Mind you, it may also be what the other guy said - hadn’t thought of that when I saw those three issues I saw, so you have some cleaning up to do with regards to your html/css and the guys over at the CSS forum can help you better with that.

The first very obvious thing is that a div cannot be a direct child of ul - a quick validation should’ve told you that.

The second one is that a link shouldn’t be just empty, i.e. no text. This is more of an accessibility point though.

The third one would be that IE has problems with display:inline-block.

I don’t know enough about CSS to help you out here - I guess it is a CSS issue. So, you’d better off asking a mod to move this to the CSS forum (follow the little orange flag on the left and report this thread).

Im in a rush so I dont have time to check but have you saved the images in CMYK as opposed to RGB? that could very well be the cause.

Ant