CODEWITHSUNDEEP
cssxhtmlcompatibility
Evilalan
Evilalan

Reputation: 127

Odd margin on my divs, How do I solve this?

Here is the code i'm working on it's not a page it's a treasure hunt for what might be re-used in a page, I ran into this problem last week or so and I'm asking myself what the heck is this margin for a while here

Let's picture that I can't use the float:left; tag for a reason, when I use display:inline-block; a weird margin apears on the elements (say divs) how do I fix it?

Problem is on FF3, and IE8 never tested in other browsers but if it dos not work on these what will it work on?

Original Code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Why does that happen</title>
<style type="text/css">

* {padding:0px; margin:0 auto;
vertical-class:baseline;
text-class:left;}

body {padding:0px; margin:0 auto;}

div{margin: 0 auto;}

div div{margin: 0;}

.body {background:#CCC; width:900px; }

.red {background:#F00;
height:300px; width:300px;
display:inline-block;
margin-left:0px;}

.blue {background:#03F;
height:300px; width:300px;
display:inline-block;
margin-left:0px;}

.green {background:#090;
height:300px; width:300px;
display:inline-block;
margin-left:0px;}

.light-blue {background:#39F;
height:300px; width:300px;
display:inline-block;
margin-left:0px;}

.light-green {background:#9FC;
height:300px; width:300px;
display:inline-block;
margin-left:0px;}

.heavy-red {background:#C00;
height:300px; width:300px;
display:inline-block;
margin-left:0px;}

</style>
</head>
<body>

<div class="body">


    <div class="red"></div>
    <div class="blue"></div>
    <div class="green"></div>
    <div class="light-blue"></div>
    <div class="light-green"></div>
    <div class="heavy-red"></div>





</div>


</body>
</html>

Solved: solution is eliminate the spacing in the markup:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Why does that happen</title>
<style type="text/css">

* {padding:0px; margin:0 auto;
vertical-class:baseline;
text-class:left;}

body {padding:0px; margin:0 auto;}

div{margin: 0 auto;}

div div{margin: 0;}

.body {background:#CCC; width:900px; }

.red {background:#F00;
height:300px; width:300px;
display:inline-block;
margin-left:0px;}

.blue {background:#03F;
height:300px; width:300px;
display:inline-block;
margin-left:0px;}

.green {background:#090;
height:300px; width:300px;
display:inline-block;
margin-left:0px;}

.light-blue {background:#39F;
height:300px; width:300px;
display:inline-block;
margin-left:0px;}

.light-green {background:#9FC;
height:300px; width:300px;
display:inline-block;
margin-left:0px;}

.heavy-red {background:#C00;
height:300px; width:300px;
display:inline-block;
margin-left:0px;}

</style>
</head>
<body>

<div class="body">


    <div class="red"></div><div class="blue"></div><div class="green"></div><div class="light-blue"></div><div class="light-green"></div><div class="heavy-red"></div>

</div>


</body>
</html>

Upvotes: 0

Views: 444

Answers (4)

BudgieInWA
BudgieInWA

Reputation: 2255

This is causing a margin on the left and right of every element (that is not display:inline): 

* { margin:0 auto; }

You probably want this as your "reset" rule.

* { margin:0; }

You can then apply margin:0 auto to things that you want centered.

Upvotes: 0

Mark Chorley
Mark Chorley

Reputation: 2107

The problem is caused by spaces in the markup between the divs. If you don't want to float them (why not I wonder), you have a couple of options.

  1. Remove the spaces so that the markup is all on the same line.

  2. If you don't ever want any text to appear in these divs then you can do this

    div{font-size:0;}

Upvotes: 2

Gaurav Saxena
Gaurav Saxena

Reputation: 4297

in all your inner div classes use margin-left: 0px

.red {background:#F00;
height:300px; width:300px; margin-left: 0px; display: inline-block;
}

.blue {background:#03F;
height:300px; width:300px;margin-left: 0px; display: inline-block;
}

.green {background:#090;
height:300px; width:300px;margin-left: 0px; display: inline-block;
}

.light-blue {background:#39F;
height:300px; width:300px;margin-left: 0px; display: inline-block;
}

.light-green {background:#9FC;
height:300px; width:300px;margin-left: 0px; display: inline-block;
}

.heavy-red {background:#C00;
height:300px; width:300px;margin-left: 0px; display: inline-block;
}

I have posted the final html at http://jsbin.com/uwavi3

I had to remove display: inline-block to get it to work on jsbin while on running it locally from a file I didn't have to. I think jsbin uses some sort of reset css.

Edit2 for float: left kinda layout

Sorry for misunderstanding the question. Increasing the width of the parent div and using spans instead of div(for colored blocks like red, blue etc.) Works for IE8 and FF3.6. Check here http://jsbin.com/uwavi3/3

Upvotes: 0

chchrist
chchrist

Reputation: 19812

I common practice in order your sites to be more cross browser compatible is to use a css reset file. Check this question https://stackoverflow.com/questions/116754/best-css-reset

Upvotes: 0

Related Questions