I've created a website based on twenty twelve theme, adjusted in a child theme. The header contains a logo floated to the left with centered text. The navigation bar has rounded corners and a gradient color with white fonts. One page contains various small pictures aligned by float left and right.
Everything works great in Firefox, Safari, Chrome and IE-10. But when viewed in IE07, IE08 and IE09, various issues appear:
1. In IE07, the centered header text appears left aligned and in front of the logo. In IE08 the same, but appears behind the logo. IE09 displays OK.
2. In IE07 and IE08, the menu bar has a properly colored border, but no rounded corners and a white background instead of green gradient. At least the text of the menu items is displayed in grey, so it is readable. In IE09 however, I see border, rounded corners, a white background, but the fonts are white also. So no text is visible in de menu bar.
3. In IE08, the page with all the pictures doesn't display the pictures that are floated to the left. Pictures floated to the right are displayed normally. In IE07 and IE09, everything displays normally.
I've searched the net to find proper hacks or other clues, but I found nothing useful. I'm not too proficient on CSS to figure it out myself, so I hope anyone on the forum is able to help me out.
[note: I have another website based on twenty eleven with similar formatting and this one has no problems with prior IE versions...]
pictures page: http://wijkraaddeblaak.nl/het-bestuur