Grow your CSS skills. Land your dream job.

IE6 rears its ugly head again

  • # August 31, 2008 at 8:02 pm

    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.

    # September 3, 2008 at 8:11 pm

    1. I suspect this one is having to do with the pngfix javascript. No idea why, but it seems like since they do show up, and in the right place and everything, that it may be the javascript running and doing something weird. Perhaps a GIF could work instead?

    2. 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?

    3. 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> …

    4. 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 &amp; and see if that’ll help?

    # September 4, 2008 at 7:54 pm

    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%;}

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".