i had been trying to get horizontally expanding menu's coding to work.. the menu has an image background and it should expand sideways as the content increases.
in code, i use background-position:left
for one div and ba开发者_开发百科ckground-position:right
for the next inner div.
it works fine in all the browsers except IE6... as IE6 doesnt support background-position:left
i need the same to work in IE6 as well.. for instance the top menu here.
do i need to code differently??
This might be overdoing it... but according to netrenderer it works till ie 5.5
http://photoshopmesta.net/1/test.html
CSS:
.left {
width: 25px;
height: 46px;
background-image: url(http://scentjunkies.com/wp-content/themes/Scent%20Junkies/images/menur_hover_left.png);
background-position: top left;
background-repeat: no-repeat;
float: left;
}
.middle {
height: 46px;
background-image: url(http://scentjunkies.com/wp-content/themes/Scent%20Junkies/images/menur_hover_right.png);
background-position: top left;
background-repeat: repeat-x;
float: left;
}
.middle span {
font-family: Arial;
font-size: 12px;
color: #ffffff;
padding: 19px 20px 10px 20px;
float: left;
}
.right {
width: 40px;
height: 46px;
background-image: url(http://scentjunkies.com/wp-content/themes/Scent%20Junkies/images/menur_hover_right.png);
background-position: top right;
background-repeat: no-repeat;
float: left;
}
HTML:
<span class="left"></span>
<span class="middle">
<span>Lorem ipsum</span>
</span>
<span class="right"></span>
Try using the extended form:
#something{
background-position: left center;
}
Ad@m
Many people have issues trying to get code to work correctly in IE6. If you don't really need it I would recommend not trying as it is very difficult.
If you are going to go ahead with it I recommend creating a different version of the website that is compatible with IE6, using a different css file for IE6 only. See the link below.
http://www.quirksmode.org/css/condcom.html
Also this is very handy for dealing with IE6 quirks
http://www.virtuosimedia.com/dev/css/ultimate-ie6-cheatsheet-how-to-fix-25-internet-explorer-6-bugs
精彩评论