CODEWITHSUNDEEP
htmlcsscss-float
Arun
Arun

Reputation: 3680

CSS not getting applied properly in chrome browser

I have below lines in my JSPX

<div class="page_nav">
   <a id="saveButton" class="button"><span>${save}</span></a>           
   <a id="cancelButton" class="button"><span>${cancel}</span></a>
</div>

for loading "save" and "cancel" button. When I load the page, the order of the buttons is not ordered, only in chrome. Please refer screen shot for reference

BUTTON NOT DISPLAYED ORDERLY

Below are the copy-pastes from css

a.button {
    background: transparent
        url('../../images/admin/bg_button_span.png') repeat
        scroll top right;
    color: #fff;
    display: block;
    float: left;
    font: normal 1.1em Tahoma, Arial;
    height: 24px;
    margin-right: 6px;
    padding-right: 10px;
    padding-left: 10px;
    text-decoration: none;
    cursor: pointer;
}

.page_nav {
   float: left;
   margin: 1em 0;
   width: 100%;
   clear: both;
}

This happens only in chrome

I use the same div in another page (same classnames too)., it works there perfectly. Not sure what am missing here

Please help me on this

Upvotes: 0

Views: 350

Answers (1)

Lowkase
Lowkase

Reputation: 5699

Try to set overflow:hidden for .page_nav:

.page_nav {
   float: left;
   display:block;
   margin: 1em 0;
   width: 100%;
   overflow: hidden;
}

Upvotes: 3

Related Questions