CODEWITHSUNDEEP
cssinternet-explorermargin
Alegro
Alegro

Reputation: 7956

Top margin doesn't work in IE 8

<div class="btns" id="btnHome">HOME</div>
<div class="btns" id="btnCon">CONTACT</div>
<div style="clear:both;"></div>
<div id="gall"></div>

CSS 

.btns{
    float:left;
    padding: 2px 10px 2px 10px;
}
#gall{
    margin:25px 0 15px;  // this top margin doesn't work in IE8
    height:70px;
    border:thin solid red;
}

here is jsFiddle

Upvotes: 0

Views: 7782

Answers (5)

Tomer
Tomer

Reputation: 17930

try this:

<div id="wrapper">
  <div class="btns" id="btnHome">HOME</div>
  <div class="btns" id="btnCon">CONTACT</div>
</div>


<div id="gall"></div>
​

#wrapper{
  overflow:hidden;
}
.btns{
    float:left;
    padding:2px 10px 2px 10px;
}

#gall{
    margin:25px 0 15px !important;
    height:70px;
    width:100%;
    display:block; /* can revert inline block when long list for IE8*/
    border:thin solid red;
}

see fiddle: http://jsfiddle.net/68myJ/17/

Upvotes: 1

Ahmad Alfy
Ahmad Alfy

Reputation: 13371

It's a known bug in IE8. There are several ways to fix it.

You can try to add overflow:auto to the clearing <div>

Check this fiddle

Upvotes: 2

TheBlackBenzKid
TheBlackBenzKid

Reputation: 27087

Works for me.

http://jsfiddle.net/68myJ/13/

<div class="btns" id="btnHome">HOME</div>
<div class="btns" id="btnCon">CONTACT</div>
<div style="clear:both;"></div>
<div id="gall"></div>

.btns{
    float:left;
    padding:2px 10px 2px 10px;
}

#gall{
    margin:25px 0 15px !important;
    height:70px;
    width:100%;
    display:block; /* can revert inline block when long list for IE8*/
    border:thin solid red;
}

Upvotes: 1

midstack
midstack

Reputation: 2123

<div class="btns" id="btnHome">HOME</div>
<div class="btns" id="btnCon">CONTACT</div>
<div style="clear:both;"></div>
&nbsp; <!-- Adding &nbsp; will solve problem -->
<div id="gall"></div>

Upvotes: 1

Gopikrishna
Gopikrishna

Reputation: 857

Try to add display:inline-block; and width how much you want hope it will solve your problem.

Upvotes: 1

Related Questions