CODEWITHSUNDEEP
htmlgoogle-chromefirefoxcsspixel
hobbywebsite
hobbywebsite

Reputation: 143

Chrome Firefox pixels are off CSS

Pixels off

So I've been using Html5 and CSS3 for the past 6 months+ but have just now started running into some pixel misses between firefox(17.0.1) and chrome(23.0.1271.101). I have a CSS reset that I tried but no change. It's weird in that in chrome (pic right side) it's 2 pixels in and in firefox (pic left side) it's 2 pixels out.

See for yourself here http://jsfiddle.net/976a3/2/

CSS:

body
      {
        margin: 0px 0px 0px 0px;
        background:rgba(75, 75, 75, 1);
        color:#c0c0c0;
      }

#container
  {
    margin:0px auto;
    padding:0px 0px 0px 0px;
    width:300px;
    height:350px;
  }

#contact_info
  {
    margin:0px 0px 0px 75px;
    padding:15px 15px 15px 15px;
    width:270px;
    height:150px;
    border:1px solid black;
    color:black;
    background:rgba(200,200,200,1);
    border-radius:20px;
    box-shadow:7px 7px 12px rgba(0,0,0,1);
  }
.title
  {
    font-size:1.3em;
    margin:-10px 0px 0px -30px;
    padding:4px 0px 0px 10px;
    width: 235px;
    height:30px;
    color:white;
    background:rgba(22,22,22,1);
    border-top-right-radius:10px;
    border-bottom-right-radius:10px;
    text-shadow:0 0 3px rgba(192, 192, 192, 1);
    box-shadow: 0 0 2px rgba(255, 255, 255, 0.1) inset,
    0 5px 10px rgba(0, 0, 0, 0.5) inset,
    0 4px 6px rgba(255, 255, 255, 0.2) inset,
    1pt 16px 0 -2px rgba(255, 255, 255, 0.2) inset,
    0pt 16px 10px rgba(0, 0, 0, 0.3) inset,
    0pt 1px 0px rgba(0, 0, 0, 0.2);
  }

.title:after
  {
    top:40px;
    left:-163px;
    position:relative;
    z-index:-2;
    content: "";
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-top: 10px solid rgba(22, 22, 22, 1);
  }

Html:

<div id="container">
    <div id="contact_info">
    <p class="title">CONTACT INFO</p>
    <br />
    </div>
</div>

Any fixes or ideas?

Thanks

Upvotes: 0

Views: 1292

Answers (1)

skyline3000
skyline3000

Reputation: 7913

Instead of giving the .title:after position:relative, you can try giving it position:absolute; and give .title position:relative;

http://jsfiddle.net/976a3/3

Upvotes: 1

Related Questions