Hi there, would you know why/if IE6 and 7 has any problems with the background-position declaration?
-
EternalNRG Nov. 8, 2011, 10:48 a.m.
-
IE 6 is not supported any longer by many web desginers so my suggestion is for you to do the same. IE7 should have no problem with the background-position property per CSS 2.1 specs.
Use the shorthand:
background: <color_name> <url(directory_name/file_name)> <x-axis position> <y-axis position> <repeat-position>
-
I fully agree IE6 should be "buried".
http://www.ie6countdown.com/
However sometimes clients do want IE6 and even IE7, who's market share is also low.
Background-position is listed as CSS 1 ?
There is alot of code here, but maybe you could advise me if this is a.) good coding practice and b.) what I could do to make this workable in IE6/7.
/* Custom Menu Begins */
ul#nav {
float:left;
width: 800px;
height: 35px;
list-style: none;
display:inline;
}
ul#nav li a {
float:left;
height: 35px;
background: url(../imgs/menu.png);
list-style: none;
display: inline;
text-ident: -9999;
}
/* Static */
ul#nav li a.tab1 {
width: 81px;
background-position: 0 0;
}
ul#nav li a.tab2 {
width: 114px;
background-position: -81px 0;
}
ul#nav li a.tab3 {
width: 94px;
background-position: -195px 0;
}
ul#nav li a.tab4 {
width: 133px;
background-position: -289px 0;
}
ul#nav li a.tab5 {
width: 75px;
background-position: -422px 0;
}
ul#nav li a.tab6 {
width: 98px;
background-position: -497px 0;
}
ul#nav li a.tab7 {
width: 75px;
background-position: -595px 0;
}
ul#nav li a.tab8 {
width: 130px;
background-position: -670px 0;
}
/* Hover */
ul#nav li a.tab1:hover {
background-position: 0 -35px;
}
ul#nav li a.tab2:hover {
background-position: -81px -35px;
}
ul#nav li a.tab3:hover {
background-position: -195px -35px;
}
ul#nav li a.tab4:hover {
background-position: -289px -35px;
}
ul#nav li a.tab5:hover {
background-position: -422px -35px;
}
ul#nav li a.tab6:hover {
background-position: -497px -35px;
}
ul#nav li a.tab7:hover {
background-position: -595px -35px;
}
ul#nav li a.tab8:hover {
background-position: -670px -35px;
}
/* Selected */
ul#nav li a.tab1#selected {
background-position: 0px -70px;
}
ul#nav li a.tab2#selected {
background-position: -81px -70px;
}
ul#nav li a.tab3#selected {
background-position: -195px -70px;
}
ul#nav li a.tab4#selected {
background-position: -289px -70px;
}
ul#nav li a.tab5#selected {
background-position: -422px -70px;
}
ul#nav li a.tab6#selected {
background-position: -497px -70px;
}
ul#nav li a.tab7#selected {
background-position: -595px -70px;
}
ul#nav li a.tab8#selected {
background-position: -670px -70px;
}Should I present conditional comments ? Make a IE6/7 only menu ?
How does one convey to a client with a global product, that wants to "net" as many clients as possible ? I mean major sites are giving up support for IE6, but IE7 still lingers.
Is it good practice to use top, center, bottom, too clean up code ?
Any further advice or insight would be greatly appreciated.
-
please post this in the discussion board for participants along with your imagery used.