CODEWITHSUNDEEP
htmlcss
jaychapani
jaychapani

Reputation: 1509

CSS : Two image on one html element in IE

HTML :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
    <meta name="generator" content="HTML Tidy for Windows (vers 14 February 2006), see www.w3.org">
    <meta http-equiv="content-type" content="text/html;charset=utf-8">
    <title>
      Hello
    </title>
    <style type="text/css">

        div#myDiv {
                border: 1px solid #bed6f8; 
                background: url(images/image1.gif) no-repeat 5px bottom, #bed6f8 url(images/image2.png) repeat-x; 
                color: #000000; 
                font-weight: bold;
        }

    </style>
  </head>
  <body>
    <div id="myDiv">
      <br>
      <br>
      <br>
    </div>
  </body>
</html>

FireFox :

enter image description here

IE:

enter image description here

code related to menu

<div id="menu">
    <ul class="menu">
        <li><a class="leftCornerRound parent menuheader" id="home" href="#"><span>Item 1</span></a>
            <div>           
            <ul>                
                <li><a class="parent" href="#" id="SubItem1"><span>Sub Item 1</span></a>
                    <div><ul>
                        <li><a class="parent" href="#" id="SubItem1.1"><span>Sub Item 1.1</span></a>
                            <div><ul>
                                <li><a class="ui-widget-header" href="#"><span>Sub Item 1.1.1</span></a></li>
                                <li><a class="ui-widget-header" href="#"><span>Sub Item 1.1.2</span></a></li>
                            </ul></div>
                        </li>
.
.
.
.

css related to this:

div#menu a.parent {
    border: 1px solid #bed6f8; 
    background: url(images/submenu-pointer-bottom.gif) no-repeat 5px bottom, #bed6f8 url(css/blueSky/images/header.png) repeat-x; 
    color: #000000; 
    font-weight: bold;
}

div#menu a.parent:hover {
    border: 1px solid #bed6f8; 
    background: url(images/submenu-pointer-bottom.gif) no-repeat 5px bottom, #c6deff url(css/blueSky/images/default.png) repeat-x; 
    font-weight: bold; 
    color: #000000; 
}

Upvotes: 0

Views: 175

Answers (3)

thirtydot
thirtydot

Reputation: 228162

I recommend adding another wrapper element, and applying the second background to that.

You already have a wrapper element. You have li and a.

You should put the css/blueSky/images/default.png background on the li, and leave the images/submenu-pointer-bottom.gif background on the a.

Make sure the elements are positioned correctly: the lis will need float: left and the as will need display: block.

If you need multiple backgrounds on a single element in IE lower than v9, you could use CSS3 PIE:
http://css3pie.com/documentation/supported-css3-features/#pie-background

Upvotes: 2

Manuel
Manuel

Reputation: 10303

I think you should use 2 divs, using one to hold the first and the other to hold the second image. this way it should not be a problem in IE nor firefox.

    <div id="myDiv">
      <div id="secondDiv">
        <br />
        <br />
      </div>
    </div>

Upvotes: 2

Niklas
Niklas

Reputation: 30002

Multiple backgrounds aren't cross browser supported.

It is only available in >=IE9, for more information have a look at the compatibility table here.

Upvotes: 2

Related Questions