html - horizontal height is different between Chrome and Firefox -


the page chrome , ff different, seems border in chrome inside li, height 130px, in ff, border outside, height 150px.

i have added more info code.

<div class="service_promos cf">     <ul>         <li>             <h2><a>item1</a></h2>         </li>         <li>             <h2><a>item2</a></h2>         </li>     </ul> </div> 

here css:

.service_promos {     margin-top: 0; }  .service_promos ul {     width: auto;     margin: 0;     padding: 0;     list-style: none;     list-style-image: none !important; }  .service_promos li {     background: none;     border-bottom: 10px solid #e2e1d6;     border-left: 10px solid #e2e1d6;     border-right: 10px solid #e2e1d6;     min-height: 130px;     margin-top: 0 !important;     padding-right: 1em;     list-style-type: none;     padding: 1em 2em;     display:block; }  .service_promos h2 {     float: left;     margin-left: 5%;     margin-top: 0;     width: 70%;     color: #ff6526;        font-size: 2.5em;     font-style: normal;     font-weight: 700;     line-height: 1em }  .service_promos h2 {     color: #ff6526;     text-decoration: none; } 

the items provided appear fine.

if still aren't satisfied appearance, may want consider using either normalize.css or reset.css reference within project / page.

the purpose of these style-sheets "normalize" of elements commonly used appear across different browsers , environments.

(i recommend checking if have other add-ins or extensions possibly interfering appearance of of elements)


Comments

Popular posts from this blog

c++ - Creating new partition disk winapi -

Android Prevent Bluetooth Pairing Dialog -

php - joomla get content in onBeforeCompileHead function -