Fix for bullet alignment in IE9
AnonymousDecember 7, 2011 at 2:10 pm #2552
I’m sure you’ve resolved it but I can’t find the thread in here. Unordered list in my posts look fine in IE8 but the bullets are over pictures when the picture is set to the left of the ul. I’ve read that it is an IE9 issue but can’t determine if a “float” in the css might fix it. I appreciate your help. Sample page would would be http://crldev.com/?page_id=21 (last two pictures in post.) Thanks.
Hmmm, first time I’ve seen this. But if you look in the HTML editor at those images, you will see this code for the first one of the two:
<img height="199" width="300" alt="Cable Research Lab Silver Series Speaker cables" src="http://crldev.com/wp-content/uploads/2011/11/S5-300x199.jpg" title="Cable Research Lab Silver Series Speaker cables" class="alignleft size-medium wp-image-263">
Change it to this:
<img style="padding-right:30px;" height="199" width="300" alt="Cable Research Lab Silver Series Speaker cables" src="http://crldev.com/wp-content/uploads/2011/11/S5-300x199.jpg" title="Cable Research Lab Silver Series Speaker cables" class="alignleft size-medium wp-image-263">
NOTE the added
Now, do this for your second image as well.
Probably not the best fix, but it will work until something better comes along.
I tried that before by adding some padding through the properties/advanced edit of the image. I put the code you suggested into the html editor but interestingly it moves the text away from the image but the bullets stay put. I didn’t know if I should add something to the .entry-content ul li css. Started down that path when I found this http://stackoverflow.com/questions/5359302/ie-9-css-float-problem
To see what is happening now you can look at same URL. I added padding to next to last picture but not to the last one.
As I say, I don’t use it either but according to some stats I’ve seen it already has 10% of the browser market share and (more importantly for me) my clients are using it. I’m not sure what the relevance of the Windows 7 comment is.
If you look at my post before the browser discussion I had googled some IE9 display issues and found the referenced link describing exactly what was happening in my case. I am just looking for a fix within WordPress and Graphene short of not using unordered lists.
As for the comment that it looks perfect…you may have missed it ’cause the text is lining up nicely with the bullets in other browsers but the blue bullets are on top of the picture in IE9. Here is the link again (see last two pictures in post) http://crldev.com/?page_id=21 Thanks
I’m not sure what the relevance of the Windows 7 comment is.
IE9 is only available for Windows 7 on the pc platform. I was simply stating I don’t use either, so I’m not familiar with IE9.
I agree, unfortunately, there are still plenty of people out there using IE. I tried convincing the world to do away with it… but I was unsuccessful 🙁
Regarding the bullet spacing. Here is what I see:
Now the Windows 7 makes sense. LOL
Yeah, that’s what I see too. Can you get my client to switch browsers?
Well it looks like the problem was with my first assumption, “I’m sure you’ve fixed this before.” Looks like I’ve found something new so I’ll have to break open the css files. I’ll investigate further (with a laptop beside me running IE9) and see if I can come up with a fix. Thanks for your time. I’ll post whatever solution I come up with here. Keep up the great work (with the theme and supporting it).
You must be logged in to reply to this topic.