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
Post a Comment