CODEWITHSUNDEEP
csscss-selectorsattrpseudo-elementpseudo-class
vitaly87
vitaly87

Reputation: 306

How to get CSS pseudo-elements to look the same cross browser?

Here is a very basic demo of what I'm trying to accomplish.

Open in Google Chrome: http://jsfiddle.net/8EbxG/4/

It should look like there's nothing there, except for a grey rectangle.

Now, open in IE9, or Firefox.

You will see an empty white rectangle contained within the larger grey one.

What do I need to do to get this looking like it does in chrome Chrome cross browser (I haven't even tested older IE, or Opera, or Safari)?

Upvotes: 0

Views: 700

Answers (5)

vitaly87
vitaly87

Reputation: 306

I did some more reading about pseudo-elements and pseudo-classes.
I found that you can also replace (method 1):

.sb-caption:empty{display:none;}
.sb-caption:before{content:"";padding-left:50px;}
.sb-caption:after{content:"";padding-right:20px;}​

with (method 2):

.caption:empty{display:none;}
div[class="caption"]{padding-left:50px;padding-right:20px;}

This, second, method is apparently accepted by older versions of IE, but with some undesirable results anyway.

In both cases, the HTML stays the same:

<div>
<div class="sb-wrapper">
<div class="sb-caption">TEST</div>
</div>​

If you remove the words 'TEST', the #sbcaption div will disappear in both cases.
Tested in the latest versions of Chrome, Firefox, IE, and Safari.

If anyone else has another hack, or other way of achieving the same effect (but being even more cross browser friendly ... IE7) please share!

You can see both effects on this test page: http://djpolbeeta.com/test-index.html
(temporary link)

Open in any browser. The darker rectangle is CSS method 1, the lighter rectange is CSS method 2.

Upvotes: 0

vitaly87
vitaly87

Reputation: 306

I recently remembered that IE requires a DOCTYPE to be specified for pseudo-elements to work.

So, when a DOCTYPE is enetered, the box disappears (in IE9, at least).

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

And, thanks to manishie for suggesting to use:

#sb-caption:empty {display:none;}

I'm pretty sure, that it's what was needed to for Firefox to work.

Note: I'm using this method to create a caption <div> in shadowbox.js.
Text is fed into <div id="#sb-caption"></div> via JavaScript, using <a rev=""></a>

EXAMPLE: <a href="LINK" rev="YOUR CAPTION">

rev="" is where your caption text would go. Which would then go into the <div>

This is a small part of a convoluted work-around/hack for shadowbox.

Here is the FINAL VERSION:

For Chrome and Firefox see it here: http://jsfiddle.net/FBwQd/
(it wont work in IE because JS-fiddle doesn't recognize DOCTYPE)

For IE (and/or Chrome) you can see it here: http://cssdesk.com/Mrwh8

You can remove the words 'TEST' to see the Box Disappear completely!

Upvotes: 0

Abdul Malik
Abdul Malik

Reputation: 2642

use Hex color code instead of rgba code 

 #sb-caption{height:auto; font:12px/36px Arial, Helvetica, sans-serif; position:absolute; right:10px; bottom:10px; background:#ccc}

and use space " " or some text in html

<div id="sb-wrapper">
  <div id="sb-caption">&nbsp;</div>
</div>​

:D

Upvotes: 0

manishie
manishie

Reputation: 5322

add this css:

#sb-caption:empty {display:none;}

Upvotes: 1

premik91
premik91

Reputation: 89

Delete content:""; and it will work on all browsers

Upvotes: 0

Related Questions