Home/ Questions/Q 8465369
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-10T15:01:26+00:00

I am having problem with margin-top in ie7 if i use position fixed in

  • 0

I am having problem with margin-top in ie7 if i use position fixed in css.

I searched in web for a solution and tried many but nothing worked.

margin-top for the test div is not working.

Any help would be appreciated.

Here is my html

<!DOCTYPE html>
<html lang="en">
<head>
<title> test </title>
<link rel="stylesheet" href="test.css">

<!--[if IE 7]><link rel="stylesheet" href="ie7.css" type="text/css" media="screen"/><![endif]-->



</head>

<body>
<div id="fixed1">
<div id="fixed"></div>
</div>


<div id="test">
ayhd iaudiuawdyiaudyw
</div>
<div class="clear">
</div>

</body>
</html>

Here is my css

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote,
pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, 
q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, 
form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
margin : 0;
padding : 0;
border : 0;
outline : 0;
font-weight : inherit;
font-style : inherit;
font-size : 100%;
font-family : inherit;
vertical-align : baseline;}
:focus {
outline : 0;
}
body {
line-height : 1;
color : black;
background : white;
}
ol, ul {
list-style : none;
}
table {
border-collapse : separate;
border-spacing : 0;
}
caption, th, td {
text-align : left;
font-weight : normal;
}


#fixed1 {
position : fixed;
width : 100%;
top : 0;
background-color : red;
}
#fixed {
margin : 0 auto;
height : 20px;
background-color : blue;
width : 980px;
}
#test {
margin : 0 auto;
margin-top : 20px;
margin-bottom : 20px;
height : 2000px;
width : 980px;
background-color : red;
}

Here is ie7.css

#fixed1{
left:0px;
}

#test{
margin-top:30px;
background-color:grey;
}

Thank U,
Kishore.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Check this fiddle. I have added your code in fiddle. It works for ie 7 also http://jsfiddle.net/S9AVa/1/

    Problem was because of margin specified in 2 ways, margin : 0 auto; and again margin-top and margin-bottom. IE considers the first call.

    It should be like 

    #test {
margin : 20px auto 20px auto;
float:left;
 height : 2000px;
width : 1040px;
background-color : red;
}

    and I have added left:0; to fixed1 class.

    Updated demo http://jsfiddle.net/S9AVa/2/

    • 0