CODEWITHSUNDEEP
css
Jason
Jason

Reputation: 1817

CSS formatting Chrome vs. Safari

I have a strange formatting issue that maybe someone can help me with. Pull this up in Chrome and Safari (I'm on Mac)

http://plnkr.co/edit/nzTsbKjAgmLo7cJOwzEu?p=preview

Chrome looks fine: enter image description here

Safari looks strange (the caret is at the top): enter image description here

Safari seems to be the odd one out. Firefox and IE looks like Chrome.

Code is relatively straight forward (I thought)

HTML:

<html>
  <head>
    <link data-require="bootstrap-css@*" data-semver="3.2.0" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
    <link rel="stylesheet" href="style.css" />
  </head>

  <body>
     <div class=" btn-primary">
        <span class="title">
            test
        </span>
        <span class="caret"></span>
    </div>
  </body>
</html>

CSS:

div.btn-primary {
    height: 40px ;
    padding: 0px ;
    line-height: 40px ;
}
span.title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
}
span.caret {
    height: 100%;
}

Upvotes: 0

Views: 1753

Answers (2)

Sarju
Sarju

Reputation: 183

I think the simple solution is add width:100% and display:table in div.btn-primary , remove display: inline-block; from span.title and update height: 0px; in span.caret.

div.btn-primary {
height: 40px ;
padding: 0px ;
line-height: 40px ;
display:table;
width:100%;
}
span.title {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
  /* display: inline-block;*/
}
span.caret {
   height: 0px;
}

Demo

Upvotes: 1

dashtinejad
dashtinejad

Reputation: 6253

1) You missed the btn class:

<div class="btn btn-primary">

2) You are using bootstrap framework, don't overwrite the main rules, try to remove your CSS file.

Demo.

Upvotes: 0

Related Questions