I am in the process of trying to finish my website, which is http://www.lucidmotives.com. As common practice, along the way I have been testing the display of the pages in FF, Safari, IE7 and IE6. Everything was surprisingly running smooth as silk in IE6 (I have an IE6 stylesheet to correct any bug issues I’ve run across) until it came time to complete my styles on my custom WP theme. And I have to say, I am completely frustrated! :evil:
Here are the issues I am having in IE6 and am hoping someone else has encountered these problems in the past and can lend a helping hand. I have spent too many days trying to find information on the internet to no avail, so you may be my last hope, Obi-Wan. ;)
1. On the following page: http://www.lucidmotives.com/blog/
I have place a .png arrow icon next to Continue. I have given the a href a class of its own to display the icon on the left of the text. In IE6, you can see the padding, but the icon appears and quickly disappears. The same is true to the icons in the post meta data <p>. And it seems to be happening with only those items. The icons that appear next to other text appear without incident. Why or why is this happening?
2. This is the bizarre one for me. I have styled by <blockquote> to have a background image that does not repeat and sits on the top. With padding, I have styled the <p> inside the blockquote so it fits nicely between the quotation marks. In IE6, the <p> in the blockquote shifts down and bleeds over the following paragraph, which is not a part of the blockquote. The same thing seems to be happening to the <p> class I have for my tags. The tags end up shifting down and covers the comments form. You can see this in action at http://www.lucidmotives.com/blog/2008/0 … ent-leads/ on IE6.
3. The sidebar <li> is creating extra undefined margins at the bottom in IE6 only. I cannot, for the life of me, understand why.
4. I created a Promote this Post section that appears below each post. Inside the <div>, there is a <ul> that contains the social bookmarking websites that I am targeting. Each of the <li> has its own class so I can include the icon for each one. In IE6, the icons are there, but the link for StumbleUpon is not. IE6, for some strange reason, decided to not display it.
Again, I know this seems like a laundry list, but I have exhausted all of my avenues. I have validated my CSS and it returns no errors. I have tried to validate the XHTML, but I keep getting errors on the social bookmarking links and am trying to figure out exactly why. If there is anybody out there that can help, I would be in your debt.
This reply has been reported for inappropriate content.
I’m pretty stumped here. It kinda seems like IE 6 is thinking the paragraph element is wider than can fit in the blockquote and pushing it down. Not sure why as neither of them have widths, but it might be that right padding on the blockquote. Maybe try forcing some widths on these (conditionally) and seeing if that’ll do it?
Wow, you really have managed to uncover some truly weird headscratches. This time I suspect IE 6 appending a line break after the list items somehow. Perhaps try changing the markup so there is no space whatsoever after the closing li tag and the next li tags. eg. …</li><li> …
This time I am suspecting the ampersand in the SU URL, although I’m not sure. Running the page through the validation really doesn’t like that area, so maybe replace that with a & and see if that’ll help?