I came across a problem when testing codes on IE 7 ... the first image and last image are shifted to the right while others in between are centered fine...But it isn't an issue in IE8, FireFox & Safari. Can anybody tell me why it ain't work on IE7? And how to resolve it?
Here is some codes in HTML and CSS
CSS:Code:<div id="Cbox"> <img class="border" src="images/top-ul.jpg" alt="" /> <ul> <li id = "trash"> <img src="images/ico-trash.jpg" alt="" /><br /> <span>Remove</span></li> </ul> <img class="border" src="images/bottom-ul.jpg" alt="" /> <img class="border" src="images/top-ul.jpg" alt="" /> <ul> <li id="saveSearch"> <a href="javascript:void(0);"><br /> <img src="images/ico-save.jpg" alt="" /> <span>Save search</span></a></li> <li id="viewSearch"> ... </li> .... </ul> <img class="border" src="images/bottom-ul.jpg" alt="" /> </div>
If you guys have IE7, here is the problem of what I am talking about:http://www.boolify.org/test/ ( pls pay attention to the right side tools)Code:#main #box #Cbox {float:left; width:110px; margin:-5px 0 0 0; } #main #box #Cbox a#trash {display:block; margin:0 5px 0 0;padding:0 2px;text-align:right;} #main #box #Cbox img {border:none;} #main #box #Cbox img.border {float:right; display:inline; margin:0 5px 0 0;} #main #box #Cbox ul {list-style:none; width:75px; text-align:center; float:right; padding:0 2px; border:#858485 2px solid; border-width:0 2px; display:inline; margin:0 5px 0 0;} #main #box #Cbox ul li#trash{border-bottom:none; padding:0 1px; margin:0 0 2px 0;} #main #box #Cbox ul li {border-bottom:#858485 2px solid; padding:0 1px; margin:0 0 5px 0;} #main #box #Cbox ul li a {text-decoration:none; font-size:12px; color:#000; font-weight:bold;} #main #box #Cbox ul li a:hover {color:#e00000;} #main #box #Cbox ul li a span {display:block;}
I'd DEFINITELY appreciate your help!!!



Reply With Quote
Bookmarks