CODEWITHSUNDEEP
cssinternet-explorerfirefoxgoogle-chromemargin
Piyush-Ask Any Difference
Piyush-Ask Any Difference

Reputation: 4286

Margin value for Firefox and Chrome

I have the following page

http://www.javaexperience.com/java-externalizable-vs-serializable-interfaces/

The extreme right hand tips section is coming fine in Firefox but is going outside the viewable area in Chrome and IE. Currently the left margin value is set to 1290px. If I change it to 1150px then it gets fixed in Chrome and IE but causes issue with Firefox rendering.

Is there any fix available for this.

Upvotes: 0

Views: 876

Answers (2)

Dinesh Vaitage
Dinesh Vaitage

Reputation: 3193

Margin css Hack for Firefox

It will work for Chrome and all other

 .inbox_notify span {
    background: #f30 none repeat scroll 0 0;
    border-radius: 50%;
    color: #fff;
    font-size: 10px;
    line-height: 14px;
    margin: -33px 0px 0px 32px;
    padding: 2px;
    position: absolute;
    text-align: center;
    min-width: 17px
}

For FireFox

@-moz-document url-prefix() {
    .inbox_notify span {
        margin: -6px 0px 0px 0px;
    }
}

Upvotes: 0

Pranav 웃
Pranav 웃

Reputation: 8477

Instead of providing a large margin on <div id="tips">, append the <div id="tips"> to the parent container, that is <div id="contents-b"> and adjust the widths of the siblings accordingly.

So,

<div id="contents-b">
    <div id="content-b">
        <!-- CONTENT -->
    </div>
    <div id="sidebar">
        <!-- sidebar CONTENT -->
    </div>
    <div id="tips">
        <!-- TIPS CONTENT -->
    </div>
</div>

and the css like 

#contents-b {
    width:100%;
}

#content-b {
    display: inline-block;
    width:50%;
}
#sidebar {
    display: inline-block;
    width:30%;
}
#tips {
    display: inline-block;
    width:20%;
}

Upvotes: 1

Related Questions