CODEWITHSUNDEEP
htmlcssinternet-explorerinternet-explorer-8
Christina
Christina

Reputation: 125

CSS Margin Top not working properly on IE 8

I went through couple of links for this issue, but none of the fix worked for me.
I used Padding, but still getting same result.
I used position: relative, still same result and so on..

I have a CSS which looks like below:

.ItemsStyle
{
    margin-top: 5px;
    margin-bottom: 5px; 
    width: 720px;
}

and my div looks like below:

<div id="Items" class="ItemsStyle">
                            <!--Work Here... -->
</div>

and I have a textbox above this div which looks like: 

<input id="textBoxName" type="text" style="width: 415px; font-family: Verdana"/>

Now, I want 5px margin between my textbox and my div. CSS is working perfectly fine on IE 11 and the margin is just fine.
But, when I run my application on IE 8, the margin is more, something like 30px down the textbox when I need 5px.

I have tried and tested all the methods that have been suggested in other similar posts, but I am getting same result.

Upvotes: 0

Views: 801

Answers (2)

Samuel Cook
Samuel Cook

Reputation: 16828

I've tried to replicate this on a virtual machine using the following code and was unable to:

<style type="text/css">
.ItemsStyle{
    margin-top: 5px;
    margin-bottom: 5px; 
    width: 720px;
    background:#f00;
    height:200px;
}
</style>
<input id="textBoxName" type="text" style="width: 415px; font-family: Verdana"/>  
<div id="Items" class="ItemsStyle">
    <!--Work Here... -->
</div>

Nevertheless, you could just use margin-bottom on the input rather than margin-top on the div. You should get the results you're looking for:

<style type="text/css">
.ItemsStyle{
    margin-bottom: 5px; 
    width: 720px;
}
</style>
<input id="textBoxName" type="text" style="width: 415px; font-family: Verdana; margin-bottom:5px;"/>  
<div id="Items" class="ItemsStyle">
    <!--Work Here... -->
</div>

As a general "flow" to a document I try to push everything down (ie margin-bottom, padding-bottom) the page rather than up (ie margin-top, padding-top)

Upvotes: 1

Luna
Luna

Reputation: 557

Internet explorer 8 is a huge headache for any developer. Try this code:

    .ItemsStyle
{
    margin: 5px auto;
    width: 720px;
}

Upvotes: 0

Related Questions