~ overflow ~

Problem:

IE, in all it’s versions, ignores the z-index from non child elements, meaning that if you have a div inside another with z-index it’s fine, however, if there’s an external div (99%) of the cases, it will simply ignore the z-index.

Solution:

There’s no solution for this, but you can do a workaround. Even with IE ignoring the z-indexes it does has an order of placing elements in front of the others which is the order you have them on html, so if you have a header menu that should appear in the top of everything, you can place the html in the footer of the page, with position absolute, to the header position. This might not work for all cases, but helped mine. since the div in question was hidden and would appear when a element at header was clicked.

Problem:

It’s like a industry standard now having everthing tableless, although i still thinking that EVERYTHING is too much, this been like the motto of many programmers around. But let’s skip the blablaing about this and go straight to the point:

You have 2 fixed width div/li `rows` on a site, they are nested and inside the content, due the complex nature of the layout, there’s some other complications. All of sudden the client decides that he wants to ruin your layout adding a long, waaaaaaaaay long, horizontal listing, which not also overlapps the width of your left column but mostly like will make user’s screen to horizontally scroll.

Solution:

As much i like to discuss with client, it’s useless and i will be just wasting my time. This is also a tricky thing to fix since the column sizes are fixed, i would need to make the whole content column bigger, ruining the rest of the top elements. Let’s take a look on the example:

<div style=”width:600px”>

content div header code here

<div style=”width:2000px”>

way long client designed div to ruin layouts

</div>

</div>

(styles are just to simplifly)

so the solution (1) would be something like this:

<div style=”width:600px”>

content div header code here

<div style=”width:2000px;position:absolute;“>

way long client designed div to ruin layouts

</div>

<img src=”blank_image.gif” width=1 height=same height as the long width div>

</div>

solution (2), if your abomination div is also height dynamic:

<div style=”width:600px” id=”container”>

content div header code here

<div style=”width:2000px;position:absolute;” id=”abomination”>

way long client designed div to ruin layouts

</div>

</div>

<script type=”text/javascript”>

// after loading all the content of the abomination div, also assuming that you’re using jquery

$(“#container”).height(parseFloat($(“#abomination”).height()+50)+”px”);

</script>

We all know ie sucks a lot, but when it comes to transparent png it’s another level of suckness.

I’m designing a site with those little shadow borders, like 4px in height, the usual ie6< fix:

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='image.png', sizingMethod='scale');

apparently work, but if you look closely, for small height divs it don’t work right.

it assumes that the minimum height is the same height of the font on that div, so how stupid is this?

a work around would be:

.your_happy_class { font-size:1px; }

an interesting fact is that IE don’t support the line-height feature right, so if you were thinking in use this, you thought wrong! hahahah