is the DIV jumping and it caused me to change the whole theme. then I realized after few work that the problem presisted again.

I tried to google and I read smething like if the Div jumps (when you open internet explorer and waiting for one second) it means something is tight and isnt fitting well.

Well I didn’t want to believe at first but then I tried to make the container div wider and voala! it worked.

Hope this will work for you too.

CSS can be a pain or a real pain espiceally for those who use IE

<SPAN
style=”DISPLAY: inline-block; FILTER: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’images/my-image.png’); WIDTH: 120px; HEIGHT: 74px”><IMG
style=”FILTER: progid:DXImageTransform.Microsoft.Alpha(opacity=0)” height=74
src=”images/my-image.png” width=120></SPAN>

<style>
div#container
{
background-color:#FF0000;
}
div#someContent
{
float:left;

}
</style>
<div id="container">
<div id="someContent">My Name =D</div>
</div>

In the case above we dont know how long our text will be so adding a fixed height to the "container" div is a real problem, also not adding a height at all is even worst .

Why? Because simply not adding a height to the "container" div means it wont take the size of the floated divs inside, and so the red background wont show.

One intresting solve to this problem is using overflow:hidden on the container div.

actually there is three cases to this

Container div that has flexible height (auto height)

div#container
{
background-color:#FF0000;
overflow:hidden;
}

Container div which has fixed height and hide anything over its height

div#container
{
background-color:#FF0000;
overflow:hidden;
height:100px;
}

Finally Container div which has fixed height however divs inside can go over it

div#container
{
background-color:#FF0000;
overflow:visible;
height:100px;
}

min-height:222px;
height:auto !important;
height:222px;

just since !important is there it will help to make it recognized for firefox but not IE6 and so the min hight will work

Yes fixed padding on both IE and FireFox, here is the CSS Code

a.mainlevel:link, a.mainlevel:visited {

display:-moz-inline-box;
display:inline-block;
padding:10px;
}

the html code

<a class=”mainlevel” href=”link1.html”>Link1</a>

<a class=”mainlevel” href=”link2.html”>link2</a>

a good thing to know is that inline-block can have height and width =D