ie7 problems

HTML & CSS
1

Hello
At the link:
http://www.articlecon.com/demo/joey40/yoga_ie_test/ie7_test.html

I can see it fine in ie8 and all the latest other browsers. But I don’t know how to fix the few problems it is showing in ie7. the round corner divs are not appearing. some icons at the top right of the page do not align properly etc etc.

Can anyone help please?

Thanks

2

Hi
Sure. Here is the code for the header of the page.

<div id="header" class="width_main last clear">
	      <img src="../images/logo.png" border="0" class="logo" usemap="#Map"  />
<map name="Map" id="Map">
<area shape="poly" coords=   "204,3,210,22,216,42,217,66,218,94,215,116,207,143,198,162,188,180,168,204,147,222,121,239,96,249,71,255,51,258,32,257,14,255,5,252,6,3" href="http://yogabrisbaneclasses.net.au" />
</map>

         
		 <div class="menu_box">
		    <div class="border_top"><span></span></div>  
		      <ul class="main_menu">
			  <li><a href="../index.html">Home</a><b></b></li>
			  <li><a href="../aboutyoga.html">About Yoga</a><b></b></li>
			  <li><a href="../class.html">Classes</a><b></b></li>
			  <li><a href="../location.html">Location</a><b></b></li>
			  <li><a href="../price.html">Pricing</a><b></b></li>
			  </ul>
			<div class="border_bottom"><span></span></div>  
         </div>  

		  <div class="short_menu last">
		       <ul>
			   <li><a class="home_icon" href="../index.html"></a></li>
			   <li><a class="time_icon" href="../timetable.html"></a></li>
			   <li><a class="mail_icon" href="../contactus.html"></a></li>
			   </ul>
		  </div>
     </div> 

#header{
background:url(../images/blue_bg.jpg) 0 0 no-repeat;
height:470px;
position:relative;
overflow:hidden;
}

.logo{
position:relative;
float:left;
z-index:99;
}


.menu_box{
position:relative;
float:left;
margin-top:15px;
margin-left:-30px;
overflow:hidden;
min-height:0;
}



.border_top, .border_bottom{
background:url(../images/menu_tl.png) 0 0 no-repeat;
height:11px;
position:relative;
margin-right:11px;
zoom:1;
min-width:9px;
}

.border_bottom{
background:url(../images/menu_bl.png);
}

.border_top span, .border_bottom span{
background:url(../images/menu_tr.png) 0 0 no-repeat;
position:absolute;
top:0;
right:-11px;
width:11px;
height:11px;
}


.border_bottom span{
background:url(../images/menu_br.png) 0 0 no-repeat;
}

.main_menu{
background:#fff;
position:relative;
padding:0 10px 0 30px;
}

.main_menu li{
list-style:none;
background:url(../images/link_bg.png) top left no-repeat;
position:relative;
margin-right:6px;
height:24px;
padding:2px 0 0 5px;
}

.main_menu li b{
position:absolute;
right:-6px;
width:6px;
height:24px;
background:url(../images/link_bg.png) 100&#37; 0;
top:0;
}

.main_menu a{
float:left;
text-decoration:none;
min-width:70px;
font-size:0.8em;
padding-top:3px;
}

.main_menu a:hover, .main_menu a:focus, .main_menu a:active{
color:#F0660B;
}



.short_menu{
background:url(../images/short_menu_bg2.png) 0 0 no-repeat;
float:right;
position:relative;
width:345px;
height:63px;
overflow:hidden;
}

.short_menu ul{
width:200px;
height:50px;
margin:0 auto;
}

.short_menu li{
list-style-type:none;
}


.home_icon, .time_icon, .mail_icon{
position:relative;
float:left;
width:24px;
height:25px;
margin-top:10px;
}


.home_icon{
background:url(../images/short_icons.png) 7% 100% no-repeat;
margin-left:33px;
}

.time_icon{
background:url(../images/short_icons.png) 28% 100% no-repeat;
margin-left:37px;
}

.mail_icon{
background:url(../images/short_icons.png) 52% 100% no-repeat;
margin-left:39px;
}
.width_main{
width:1000px;
margin:0 auto;
}
.last {
margin-right:0;
padding-right:0;
}

Hope that helps.

3

Can you show your rule for the icons and what did you use to create the rounded corners?