Leosquarez - Website Design and Development » Crossing browser

How to Fix IE7 z-index Problem

leosquarez — Tue, 25 Jan 2011 07:19:29 +0000

If you have a dropdown menu that works fine in all the browser a part from IE 7 and you have a problem like this one:

Z-index work in Internet Explorer 7 (and lower )a different way:

“In Internet Explorer positioned elements generate a new stacking context, starting with a z-index value of 0. Therefore z-index doesn’t work correctly”

To fix z-index issue in ie give to the parent element a higher z-index actual fixes the bug!!!

WRONG:

….

….

………..

FIXED

….

….

………..

Try and let me know..

IE7 not displaying background in sprite button

leosquarez — Tue, 08 Jun 2010 06:15:09 +0000

Today while I was creating a new button with the sprite technique I discovered that what it was working in all the browsers (the decent one: Firefox, Safari, Crome and IE8) it wasn’t working in IE7 and the CSS was not applied.

Pretty much while all the browsers were displaying the button as an image, IE7 and IE6 were displaying a resized default button (very ugly!!!)

My initial code was something like that:

#button_id{
width:439px;
height:53px;
border: none;
clear:both;
background-image:url(../images/btn-confirm.png);
background-repeat:no-repeat;
background-position:0 0;
}

I could not understand why just IE7 (and IE6 of course) were having this issues..

In the end I find the solution:
To display a background in a button in IE7 and IE6 you have to set the CSS style background-color

#order_button{
width:439px;
height:53px;
border: none;
clear:both;
background-image:url(../images/btn-confirm.png);
background-repeat:no-repeat;
background-position:0 0;
background-color:#f1f1f1; /* OF COURSE USE YOUR COLOR!! */
}

Browser CSS Condition IF IE

leosquarez — Mon, 02 Nov 2009 07:06:44 +0000

All the web developer will agree with me saying that Internet Explorer is always the difficult browser from all the designer with.

A good web designer should test anything before resided on web with all the most recent browser (firefox safari crome opera… ect..)
and of course he should check in Internet Explorer in all the version.

While the modern (and much better) browser like firefox, crome, safari try to let you install all the times the new version, and with new version means a version that improve but still respect the HTML and CSS reading.
IE is popular for complete different view of the page for a different version of the Browser

IE in the last few years release different version of the browser, most popular IE6, IE7 and IE8, but the are complete different each other in displaying a page.

The biggest different in the different version are stuff like:

margin and padding (especially in list like UL, OL and DL)
Alignment
Position
Float

So is a good trick to create a separate CSS for IE6 and most of the times for IE7 as well

to do that you just create a now css file and in the tag specify a condition:

According to the conditional comment this is Internet Explorer

According to the conditional comment this is Internet Explorer 6

According to the conditional comment this is Internet Explorer 6

According to the conditional comment this is Internet Explorer 7

According to the conditional comment this is Internet Explorer 5 and up

According to the conditional comment this is Internet Explorer lower than 8

According to the conditional comment this is Internet Explorer lower or equal to 5.5

According to the conditional comment this is Internet Explorer greater than 6

Some designer check for IE5, but i believe is to small the percent how still does have this browser.
But how think IE 6 is not so common any more just check these data:

http://www.w3schools.com/browsers/browsers_stats.asp