margin-left和width属性在mozilla firefox中不起作用

Question

I am facing some css problem with mozilla firefox, the css I have written is working fine in chrome. the following is the reference link:

http://www.mse-scottsdale.org/events

I have tried with display: -moz-box; still it is not fine in mozilla, I dnt know how to write specific css for mozilla firefox. can any one help me?

the code is for the events page is as follows:

 $(document).ready(function(){ $(".plus").click(function(){ //to get the current element id //alert($(this).attr('id')); $('#a'+$(this).attr('id')).slideToggle(); }); }); 

 <style> .event_profit{ background: #ecece9; width: 100%; float: left; border-bottom: 2px solid #fff; /*height:180px;*/ } .extarContent{ background: #ecece9; width: 100%; border-bottom: 2px solid #fff; height:auto; margin-left:2px; } .extarContent p{ margin-left:19%; margin-right: 10%; text-align: justify; padding-bottom:10px; } .plus{ width:5%; margin-top: 5%; margin-left: 5%; } .event_content p{ margin: 10px 0; } .maincontainer{ width:100%; display: -webkit-inline-box; } .event_image{ width: 15%; margin-left: 2%; margin-top:1%; } .event_content{ width: 70%; margin-top: 2%; margin-left: 2%; text-align: justify; } </style> 

 <div class="event_profit"> <div class="maincontainer"> <div class="event_image"> <img alt="Upload a image for event" src="$cur_event_image.getData()" class="img-circle" style="height:150px;width:150px"> </div> <div class="event_content" > <h3>Kickoff Event!</h3> <p> </p> <p>Thursday, April 9, 2015, 4:00-7:00PM 8102 East Jackrabbit Road, Scottsdale, AZ Click here for a printable flyer. Join us for an Open House to unveil Scottsdale Adapted Recreation's brand new Multi-Sensory Environment! Let your senses guide your journey through the four zones of this unique space!</p> </div> <div class="plus" id="$a"> <img src="/documents/149710/0/plus2.png/4498199f-61a1-45cc-850c-4884e12b7193?t=1428069502306" style="width:33px;height:33px;"/> </div> </div> <div class="extarContent" id="a$a" style="display:none"> <p> </p> <p>Ribbon Cutting ceremony with Mayor Jim Lane! (6:30) Prizes raffled every half hour! Healthy snacks! Leave your mark on the room with a handcrafted addition!</p> </div> </div> 

Answer 1

There are display:inline-box; not supported in Mozilla.

So, you can done this type of code:

.maincontainer{
    display:inline-block;
}
.event_image{
    display:inline-block;
    vertical-align: top;
}
.event_content{
    display:inline-block;
    vertical-align: top;
}
.plus{
    display:inline-block;
    vertical-align: top;
}

Answer 2

do the following

1.remove display:inline-box; in .maincontainer class
2.add float: left; in ".event_image" , ".event_content" and ".plus" classes