CODEWITHSUNDEEP
cssfirefox
user1128331
user1128331

Reputation: 727

Use :after with firefox

The result on chrome and ie10 are work, but not work on firefox.

I would like to add the shadow background at the bottom of div

please take a look on this

http://jsfiddle.net/yokosatan/mv83a/

Here is the code of HTML

<div class="box">
   <div class="logo">
    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTMLZg7HAU1G8n8ZKnOeai4EsUUtwyyWamco2hPHLjFx2Hl2X3mwQ" border="0"/>
   </div>
   <div class="name">Name</div>
</div>

And CSS code

.box
{
  text-align:center;
  width:105px;
}
.name
{
  font-size:11pt;
  margin-top:8px;
  text-transform:uppercase;
}
.logo
{
  width:105px;
  height:105px;
  background:white;
  display: table-cell;
  vertical-align: middle;
  position:relative;
}
.logo:after
{
  content:url('http://s24.postimg.org/f1dompt4x/shadow_test.png');
  position:absolute;
  bottom:-15px;
  display:block;
  height:15px;
}
.logo img
{
  margin:0 auto;
  max-width:85%;
  width:85%;
  max-height:85%;
}

Question is how to do the same result as chrome or ie that display. Additional, it could be other solution that give the same result for all web browsers.

Thank you

Update: I think the cause is that I make display

display:table-cell;

I change to be display block and it's work, but I want to make logo to be center vertically. What should I do?

Upvotes: 0

Views: 119

Answers (2)

user2404546
user2404546

Reputation:

use content as "" and add background

  .logo:after 
   {
      background:url("http://s24.postimg.org/f1dompt4x/shadow_test.png") repeat-x scroll center bottom transparent;
content:"";
position:absolute;
bottom:-15px;
display:block;
height:15px;
width:110px;
   }

Upvotes: 0

Mr. Alien
Mr. Alien

Reputation: 157334

Instead of using content: url(); use content: ' '; and use background-image and it should work for you

Demo

.logo:after {
    content:' ';
    height: 15px;
    width: 100px;
    background-image: url('http://s24.postimg.org/f1dompt4x/shadow_test.png');
    position:absolute;
    top: 110px;
    display:block;
    background-repeat: no-repeat;
}

Edit:

As you had issue using display: table-cell;, you can use display: block; instead and use position: absolute; for the img tag and use top and left with custom values to set the image vertically middle.

Demo

Upvotes: 2

Related Questions