The weirdest thing you could ever see in joomla (and which I havnt seen somewhere else yet)

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

Transparent PNG on Internet explorer can be a bit painful but here is a code that can somehow solve the problem on IE6 and earlier (didn’t try it on a version earlier than IE6 honestly)

<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>

kinda tricky question but lets say
we had a code like

<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;
}

Yes, a nice and clean code

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

The problem is that when I have two a hrefs next to each other the padding is screwed in joomla. anyways here is what I did

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