Leosquarez – Website Design and Development

Website Design and Development

How to Fix IE7 z-index Problem

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:

<ul>
<li>
<ul class=”DROPDOWN”>
<li> …. </li>
<li> …. </li>
</ul>
</li>
</ul>

<div class=”SLIDER-JQUERY”>
………..
</div>

FIXED

<ul>
<li style=”z-index:999999″>
<ul class=”DROPDOWN”>
<li> …. </li>
<li> …. </li>
</ul>
</li>
</ul>

<div class=”SLIDER-JQUERY”>
………..
</div>

Try and let me know..

Popularity: 3% [?]

Posted by leosquarez On January - 25 - 2011 Condition EI6 Interesting from the web Web Development

How target CSS for IE6 IE7 and IE8

To target in a css style just Internet Explorer 6 or 7 or 8 there are a few methods that you can use:

body {
color: red; /* all browsers, of course */
color : green\9; /* IE8 and below */
*color : yellow; /* IE7 and below */
_color : orange; /* IE6 */
}

Or simply if you need to target a specific style with out creating a new css file:

For IE7: *+html CSSproperty

For IE6: * html CSSproperty

internet exploer

Some good link:

  • Get you OS and Browser and apply a different style
    http://rafael.adm.br/css_browser_selector/
  • How to Target IE6, IE7, and IE8 Uniquely with 4 Characters
    http://net.tutsplus.com/tutorials/html-css-techniques/quick-tip-how-to-target-ie6-ie7-and-ie8-uniquely-with-4-characters/comment-page-1/#comments

Popularity: 1% [?]

Posted by leosquarez On August - 12 - 2010 Condition EI6 Web Development

IE7 not displaying background in sprite button

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!! */
}

ie6

Popularity: 2% [?]

Posted by leosquarez On June - 8 - 2010 Condition EI6 Web Development

Browser CSS Condition IF IE

ie6All 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 <head> tag specify a condition:
<!–[if IE]>
According to the conditional comment this is Internet Explorer
<![endif]–>
<!–[if IE 6]>
According to the conditional comment this is Internet Explorer 6
<![endif]–>
<!–[if IE 6]>
According to the conditional comment this is Internet Explorer 6
<![endif]–>
<!–[if IE 7]>
According to the conditional comment this is Internet Explorer 7
<![endif]–>
<!–[if gte IE 5]>
According to the conditional comment this is Internet Explorer 5 and up
<![endif]–>
<!–[if lt IE 8]>
According to the conditional comment this is Internet Explorer lower than 8
<![endif]–>
<!–[if lte IE 5.5]>
According to the conditional comment this is Internet Explorer lower or equal to 5.5
<![endif]–>
<!–[if gt IE 6]>
According to the conditional comment this is Internet Explorer greater than 6
<![endif]–>

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

www.w3schools.com-screen-capture-2009-11-2-18-4-8

www.w3schools.com-screen-capture-2009-11-2-18-4-8

Popularity: 2% [?]

Posted by leosquarez On November - 2 - 2009 Condition EI6

Subscribe here

VIDEO

TAG CLOUD

POPULAR