IE6 rears its ugly head again

[lucidmotives]

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.

Many thanks.

[monaye]

For now I can think of is for No.1 only. for No.1 I think you need to specify height on it?
Can you try and let me how it goes.

Just for the information, For No.4 StumbleUpon links is right side, out of the page.
Maybe it’s something to do with "IE Escaping bug" try give div#promote {height: 1%;}

[Author]

Posts