CODEWITHSUNDEEP
css
imakeitpretty
imakeitpretty

Reputation: 2116

CSS spacing using the :before pseudo attribute

I have an image that I'm trying to place using :before. I want the image to sit on the first letter of the line. If you look at the live site, The bird's feet should touch the letter "C". It works in the fiddle, but not on the live site. Any help?

http://imip.rvadv.com/index3.html

fiddle: http://jsfiddle.net/imakeitpretty/yV3kK/30/

Upvotes: 0

Views: 82

Answers (5)

Liggy
Liggy

Reputation: 1201

Consider adding

.st-accordion ul li > a{
   line-height:27px;
   ...
}

And updating the following:

#chirp:before {
    ...
    margin-bottom:0;
    ...
}

Upvotes: 1

Brian McAllister
Brian McAllister

Reputation: 171

Looks like a line-height issue to me. Try setting it to 36px (the same as your font size). I'm not sure why it's happening, but I suspect that the line height for text is different on your site and JSFiddle.

Upvotes: 0

gherkins
gherkins

Reputation: 14973

you can try ositioning the :before element with absolute:

http://jsfiddle.net/yV3kK/31/

#chirp:before {
    content:url(http://imip.rvadv.com/images/chirp-bird.png);
    padding:0;
    display:block;
    width: 77px;
    height: 50px;
    position: absolute;
    top: -44px; 
    left: -35px;
}

#chirp{
    position:relative;    
}

Upvotes: 0

Horen
Horen

Reputation: 11382

You are using different base css on jsfiddle and your test site.

For example, the font-family is already different so you can't really compare the two.

Anyways, setting margin-bottom to -20px in #chirp:before solves your problem.

Upvotes: 2

AdityaSaxena
AdityaSaxena

Reputation: 2157

#chirp:before{
margin-bottom:-20px;
}

Currently, the margin-bottom is set to -10px;

Hope it helps!

Upvotes: 2

Related Questions