Weird IE issue with "blockquote"

HTML & CSS
1

Hi,

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

http://www.webdesignerwall.com/demo/doublequote/doublequote.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 :confused:

TIA!

Andy

2

It’s a bug with the first-letter pseudo class and you need a space before the bracket.


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

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 :slight_smile: but I didn’t know I could trigger one of IE6’s plethora of bugs by not doing so. Yay for being obsessive!

4

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

5

Man, IE6 could screw up a wet dr, uh, birthday party… :x

6

Hi,

Thanks for the reply - however, it still doesn’t seem to work for me :frowning:

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

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 :slight_smile:

Here is a browsercam screenshot showing the quotes in place.

8

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

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.:slight_smile:

10

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 :slight_smile:

Cheers

Andy

11

OK - I’ll fire my ie8 up and have a look :slight_smile:

12

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

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 [url=http://tredosoft.com/Multiple_IE]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

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 :stuck_out_tongue:

Cheers

Andy

15

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

Hi,

Yes I can see it now I was testing on ie6 and ie7 :slight_smile: 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 :slight_smile:

17

Should this be sent to James Hopkins?

18

Just sent it to him (and added a note to the Sitepoint reference of course) :slight_smile:

19

Hi,

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

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

Or Just add an inner element and apply one image to that.


<blockquote><p>test</p></blockquote>

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