CODEWITHSUNDEEP
htmlcssinternet-explorermozilla
Ajinkya
Ajinkya

Reputation: 22730

Margin displayed differently in IE and Mozilla

Is margin treated differently in IE and Mozilla ? Because when I tried Mozilla 3.6 displaying margin correctly but IE 8 stretching it too far.
Here is my code 

<div id="searchCriteria">  
<table width="100%" border="1"  bordercolor="#64A4F5">       
</table>
</div>  
<div id="searchResult">
</div>

Here is my css 

#searchCriteria{  
        height:24%;  
        width:100%;  
        float: right;  
        display: block;  
        font-family:  
        verdana,arial;  
        font-size: 12px;
}

#searchResult{  
        height:70%;  
        width:100%;  
        float:right;  
        display:block;  
        margin-top:15px;  
        margin-bottom:5px; 
}

Margin between searchCriteria and searchResult div is getting stretched in IE but working fine in Mozilla.
(It looks like in IE some space is coming between table element and searchCriteria div)

Upvotes: 0

Views: 4983

Answers (5)

Ajinkya
Ajinkya

Reputation: 22730

Added height=100% to <table> and it works. Thank you all for your suggestions :)

Upvotes: 0

Krimo
Krimo

Reputation: 954

Add a second margin-top declaration to your searchResult div like so :

margin-top:10px\9;

This will target only IE8 and below. Change the amount of pixel until it looks good to you.

Upvotes: 0

melhosseiny
melhosseiny

Reputation: 10154

I tested your code In FF 3.6.13, IE7-8. I observed the issue only in quirks mode in IE, which probably means that you're either not using a Doctype declration or using IE in quirks mode. If you're using XHTML use:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <title>An XHTML 1.0 Strict standard template</title>
    <meta http-equiv="content-type" 
        content="text/html;charset=utf-8" />
</head>

<body>

     <p>… Your HTML content here …</p>

</body>
</html>

If you're using HTML5 use:

<!DOCTYPE html>

See this for a list of other Doctype declarations to use.

Upvotes: 2

null
null

Reputation: 11889

height:24%;

Any certain reason to use percent values?

Anyway, I think it's probably Quirks Mode. Try adding <!DOCTYPE html> at beginning of document to see if it'll help.

Upvotes: 1

jlmakes
jlmakes

Reputation: 2965

Are you using a stylesheet reset? It's possible browser-inherited margins are conflicting with your design.

Eg.

div, table, td, th, tr, {
   margin : 0;
   padding : 0;
   border : 0;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

Here's a link to a more extensive CSS reset

It also may be helpful to use the developer tools (F12 in IE, and the Firebug extension in Firefox) to troubleshoot the discrepancy in your design--if you gather specific information (eg. there's 4px unaccounted for,) you will have a better change at spotting the problem.

P.S. Be extra careful when working with percentages--something like padding will compound the percentage values, resulting in overages. I'm actually not sure if your border : 1 compounds with 100% (resulting in 100% + 1px,) but just a helpful reminder.

Upvotes: 0

Related Questions