开发者

horizontally (sideways) expanding menus using html and css in IE6

开发者 https://www.devze.com 2023-03-13 20:18 出处:网络
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.

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

0

精彩评论

暂无评论...
验证码 换一张
取 消