Click here to Skip to main content
15,885,366 members
Please Sign up or sign in to vote.
4.00/5 (1 vote)
See more:
Hi guys... I have this website African TV and im doing its css but the problem is with IE... im using absolute position to position my banner on top of my screen... its working fine in other browser but when it comes to IE it does not display the div tagss... here is my css code

CSS
#center_container{
    border: 1px solid transparent;
    margin-left: auto;
    margin-right: auto;
    min-height: 200px;
    position: relative;
    width: 1013px;
}

#banner_image{
    float: left;
    height: 153px;
    left: 12px;
    position: absolute;
    top: 35px;
    width: 309px;
    display: block;
    border: 1px solid;
}
#search{
    border: 0 solid transparent;
    display: block;
    height: 29px;
    width: 400px;
    left: 380px;
    position: absolute;
    top: 170px;
}
#note{
    color: #FFFFFF;
    display: block;
    left: 380px;
    position: absolute;
    text-align: left;
    top: 56px;
    width: 400px;
}


and heres my HTML file
<div id="center_container">
<div id="header">

<div id="globe">
						
  <img src="images/international.png" id="banner_image" />
  <div id="note">High Definition live streaming videos, live to you 24/7. Subribe now..</div>
  <div id="search">
        <form method="POST" action="">
	<input type= "text" id="search_text" name="search"/>
	<input type= "submit" value="Search" id="search_button" name="search_button" />
	</form>
  </div>
  <div id="icons">
	<ul>
 	<li><a href= "" /><img src = "images/facebook.png" /></a></li>
	<li><a href= "" /><img src = "images/digg.png" /></a></li>
	<li><a href= "" /><img src = "images/rss.png" /></a></li>
        <li><a href= "" /><img src = "images/search.png" /></a></li>
	<li><a href= "" /><img src = "images/window_gray.png" /></a></li>
	<li><a href= "" /><img src = "images/meet.png" /></a></li>
	</ul>
 </div>

</div>
</div>
</div>



the div tag with an id "globe" and its position absolute is working fine and displaying the div tag... but inside the globe which is the other div tag such as search, note... this tag have an attribute of position: absolute as well but the problem is its not appearing on the site... how do i solve this please help... as much as possible i want to use absolute as positioning
Posted

Add z-index:0 [0 or any positive number] to your styles.
 
Share this answer
 
Comments
Madzmar25 6-Dec-11 22:59pm    
I tried adding z-index: 9999 but it didnt work... anymore suggestion please?...
try this css instead of yours
CSS
#center_container{
    border: 1px solid transparent;
    margin-left: auto;
    margin-right: auto;
    min-height: 200px;
    position: relative;
    width: 1013px;
}
 
#banner_image{
    float: left;
    height: 153px;
    left: 12px;
    position: absolute;
    top: 35px;
    width: 309px;
    display: block;
    border: 1px solid;
}
#search{
    border: 0 solid transparent;
    display: block;
    height: 29px;
    width: 400px;
    left: 380px;
    position: absolute;
    top: 170px;
    z-index:1000:
}
#note{
    color: #FFFFFF;
    display: block;
    left: 380px;
    position: absolute;
    text-align: left;
    top: 56px;
    width: 400px;
    z-index:1000:
}
 
Share this answer
 

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

  Print Answers RSS
Top Experts
Last 24hrsThis month


CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900