SitePoint Sponsor

User Tag List

Results 1 to 24 of 24
  1. #1
    SitePoint Addict
    Join Date
    Sep 2008
    Location
    Rudgwick, UK
    Posts
    377
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Weird IE issue with "blockquote"

    Hi,

    I've got a weird issue in IE with these pages :

    http://www.webdesignerwall.com/demo/...ublequote.html (where I got the CSS from)

    ...and here is the page its being used on:

    http://www.cancunandrivieramaya.com/testimonials.html

    The problem seems to be that the last "end quote" doesn't show.

    Is this an easy fix? If so, I can't work it out :/

    TIA!

    Andy

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,294
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    It's a bug with the first-letter pseudo class and you need a space before the bracket.

    Code:
    blockquote:first-letter {
    Sitepoint reference:
    In Internet Explorer 6, this pseudo-element fails if it’s not immediately followed by whitespace. This means that whitespace must appear between the pseudo-element and the declaration block, as well as between the pseudo-element and the comma, if the pseudo-element isn’t the last selector in a group of selectors.

  3. #3
    SitePoint Wizard bronze trophy Black Max's Avatar
    Join Date
    Apr 2007
    Posts
    4,029
    Mentioned
    12 Post(s)
    Tagged
    0 Thread(s)
    I did not know this, Paul. I generally put the whitespace between the last letter of the CSS element and the bracket anyway, just to be OCD about it all but I didn't know I could trigger one of IE6's plethora of bugs by not doing so. Yay for being obsessive!

  4. #4
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Black Max View Post
    I did not know this, Paul. I generally put the whitespace between the last letter of the CSS element and the bracket anyway, just to be OCD about it all but I didn't know I could trigger one of IE6's plethora of bugs by not doing so. Yay for being obsessive!
    It's not a well known bug and if I remember, this is the only bug where space between the bracket and the property/pseduo calss actually matter.

    I could be wrong though, I tried going over everything in my head lol.

    I too put a space just because it will avoid this (not that I use first-letter a lot
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  5. #5
    SitePoint Wizard bronze trophy Black Max's Avatar
    Join Date
    Apr 2007
    Posts
    4,029
    Mentioned
    12 Post(s)
    Tagged
    0 Thread(s)
    Man, IE6 could screw up a wet dr, uh, birthday party....

  6. #6
    SitePoint Addict
    Join Date
    Sep 2008
    Location
    Rudgwick, UK
    Posts
    377
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    It's a bug with the first-letter pseudo class and you need a space before the bracket.

    Code:
    blockquote:first-letter {
    Sitepoint reference:
    Hi,

    Thanks for the reply - however, it still doesn't seem to work for me

    Code:
    blockquote { font:12px Georgia,"Times New Roman", Times, serif;width:600px;background:url(http://carmstatic.com/images/close-quote.gif) no-repeat right bottom;padding-left:18px;text-indent:-18px;padding-bottom:10px; }
    blockquote:first-letter { background:url(http://carmstatic.com/images/open-quote.gif) no-repeat left top;padding-left:18px;font:italic 1.4em Georgia,"Times New Roman", Times, serif; }
    I'm afraid its "minified" to try and comply with the new "YSlow" and "Google Speed Checker" add-ons for FF - to try and get as high-a-ranking as possible =))

    I did a Ctrl F5 to make sure its using this CSS file, and it is - but still in IE its not working right :/)

    http://www.cancunandrivieramaya.com/testimonials.html

    TIA!

    Andy

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,294
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    It's working fine in my IE6 now. You must still have it stuck in cache. Delete your temporary Internet files in IE etc and try again


    Here is a browsercam screenshot showing the quotes in place.

  8. #8
    SitePoint Addict
    Join Date
    Sep 2008
    Location
    Rudgwick, UK
    Posts
    377
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    It's working fine in my IE6 now. You must still have it stuck in cache. Delete your temporary Internet files in IE etc and try again


    Here is a browsercam screenshot showing the quotes in place.
    Thanks for the reply. Just did that, and it starts working (2 of the 3 quotes show the " bit at the closing section) ... but after a few seconds they just dissapear (leaving only the opening ones :/)

    Any ideas?

    TIA!

    Andy

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,294
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    What version of IE are you referring to as IE6 seems fine for me now and looks fine on browsercam?

    If it's IE6 then are you using a stand-alone or the real thing?

    Is there anything special you have to do to make the quotes disappear?

    Quite often "haslayout" issue will make images disappear like that but usually they are 100% reproducible and I'm not seeing this my end. Unless I can reproduce the bug here it's a bit like working in the dark.

  10. #10
    SitePoint Addict
    Join Date
    Sep 2008
    Location
    Rudgwick, UK
    Posts
    377
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Hi,

    What version of IE are you referring to as IE6 seems fine for me now and looks fine on browsercam?

    If it's IE6 then are you using a stand-alone or the real thing?

    Is there anything special you have to do to make the quotes disappear?

    Quite often "haslayout" issue will make images disappear like that but usually they are 100% reproducible and I'm not seeing this my end. Unless I can reproduce the bug here it's a bit like working in the dark.

    Hi,

    Sorry - I'm using IE 8 =) JUst doing a test on browsershots.org, to see how it looks on their IE8 version. Will post a link to the image once its done

    Cheers

    Andy

  11. #11
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,294
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    OK - I'll fire my ie8 up and have a look

  12. #12
    SitePoint Addict
    Join Date
    Sep 2008
    Location
    Rudgwick, UK
    Posts
    377
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    OK - I'll fire my ie8 up and have a look
    I didn't realise you could have different versions of IE working on a single PC? I use a program call IETester, but ideally would be better to have stand-alone versions to test with =)

    Cheers

    Andy

  13. #13
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,272
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    Yes, I would agree it's ideal to have stand-alone natives if you can.

    I use Virtual Box to have 2 separate copies of Windows XP on my Linux machine. One has a native IE6 (which I've noticed does sometimes behave differently than Tredosoft's Multiple IEs) and the other has IE7 with Tredosoft IE's for 5.5 and 6.

    Your computer needs to be able to handle another OS on it, so it's not for the light machine.

    I've heard the idea of having IE8 and using IE8's compatability mode to "see" IE7.. however I don't know, does that really re-introduce Haslayout and all that?? Seems like that would make IE8 bigger than necessary?

    Also dunno if Compatibility Mode also affect the JS engine used (wasn't IE7's different from IE8's?).
    If all of the above is true and compat mode really does everything native IE7 does then I'd totally consider downloading IE8 for VB2 and switching to compat mode to check IE7. Right now IE8 is on a whole other machine, here at work.

  14. #14
    SitePoint Addict
    Join Date
    Sep 2008
    Location
    Rudgwick, UK
    Posts
    377
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Stomme poes View Post
    Yes, I would agree it's ideal to have stand-alone natives if you can.

    I use Virtual Box to have 2 separate copies of Windows XP on my Linux machine. One has a native IE6 (which I've noticed does sometimes behave differently than Tredosoft's Multiple IEs) and the other has IE7 with Tredosoft IE's for 5.5 and 6.

    Your computer needs to be able to handle another OS on it, so it's not for the light machine.

    I've heard the idea of having IE8 and using IE8's compatability mode to "see" IE7.. however I don't know, does that really re-introduce Haslayout and all that?? Seems like that would make IE8 bigger than necessary?

    Also dunno if Compatibility Mode also affect the JS engine used (wasn't IE7's different from IE8's?).
    If all of the above is true and compat mode really does everything native IE7 does then I'd totally consider downloading IE8 for VB2 and switching to compat mode to check IE7. Right now IE8 is on a whole other machine, here at work.
    Yeah - would be so much better if M$ listened to developers, and designed a copy which would be setup to emulate any version of IE you wanted :P

    Cheers

    Andy

  15. #15
    SitePoint Addict
    Join Date
    Sep 2008
    Location
    Rudgwick, UK
    Posts
    377
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    OK - I'll fire my ie8 up and have a look
    Ok, definatly seems to be a general IE8 bug, and not just on my PC. Please see the image generated from an IE8 test on browsershots.org:

    http://carmstatic.com/test_ie8.png

    TIA

    Andy

  16. #16
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,294
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Yes I can see it now I was testing on ie6 and ie7 Ie6 was showing the bug I mentioned which is what I thought you were talking about.

    The IE8 bug is interesting and even on your first link the final quote is missing in IE8.

    I've done some testing and nothing seems to fix it although I have worked out what's happening.

    It seems that IE will only allow one image on that element and if you specify an image for the first-letter and an image for the element itself then the first-letter image is only displayed.

    Strangely enough if you use the same image for both the first-letter and the element itself then the same image displays twice!

    So a partial fix for IE8 would be to use a straight quote gif (e.g ") that you can use at the start and at the end using the same image. You could do that via conditional comments to let others have the better image.

    Or the other alternative is to add an inner element so that you can hang one image on instead.

    Interesting and nasty bug

  17. #17
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,272
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    Should this be sent to James Hopkins?

  18. #18
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,294
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Just sent it to him (and added a note to the Sitepoint reference of course)

  19. #19
    SitePoint Addict
    Join Date
    Sep 2008
    Location
    Rudgwick, UK
    Posts
    377
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Hi,

    Yes I can see it now I was testing on ie6 and ie7 Ie6 was showing the bug I mentioned which is what I thought you were talking about.

    The IE8 bug is interesting and even on your first link the final quote is missing in IE8.

    I've done some testing and nothing seems to fix it although I have worked out what's happening.

    It seems that IE will only allow one image on that element and if you specify an image for the first-letter and an image for the element itself then the first-letter image is only displayed.

    Strangely enough if you use the same image for both the first-letter and the element itself then the same image displays twice!

    So a partial fix for IE8 would be to use a straight quote gif (e.g ") that you can use at the start and at the end using the same image. You could do that via conditional comments to let others have the better image.

    Or the other alternative is to add an inner element so that you can hang one image on instead.

    Interesting and nasty bug
    Hi,

    Thanks for looking into this for me - nice to know it wasn't just mne being silly

    I guess I'll have to look at using just a single quote image - and see if I can get that working.

    Thanks again!

    Andy

  20. #20
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,294
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by ultranerds View Post
    Hi,

    I guess I'll have to look at using just a single quote image - and see if I can get that working.
    Andy
    Or Just add an inner element and apply one image to that.

    Code:
    <blockquote><p>test</p></blockquote>

    In strict doctypes the blockquote has to have a block level child first anyway.

  21. #21
    SitePoint Zealot
    Join Date
    Mar 2008
    Posts
    190
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Paul for getting in contact with me.

    I've just looked at the issue you describe and can confirm this is an undocumented bug in IE8. For this reason, I've documented it and created a reduced test case.

    Unfortunately, I'm unable to create a bug ticket at Connect since Microsoft has decided to recently close ticket submissions until they have transferred all open tickets to the new platform for IE9. I will, however, remember to create a ticket when they've done this

  22. #22
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,294
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Thanks James

  23. #23
    SitePoint Addict
    Join Date
    Sep 2008
    Location
    Rudgwick, UK
    Posts
    377
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Thanks James
    haha wow - so I actually found a bug (not that I knew how to fix it though LOL)

  24. #24
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,294
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by ultranerds View Post
    haha wow - so I actually found a bug (not that I knew how to fix it though LOL)
    Yes, it's from exercises like these that we find out the real bugs


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •