An IE 7 issue of CSS - HELP!

[Yueee]

I came across a problem when testing the codes on IE 7 ...  the 'trash can' (please see the attachment picture) is shifted slightly to the right and the text 'remove' which is supposed be below of it is totally out of the position...But they are aligned fine on IE8, FireFox & Safari. So can anybody tell me why it ain't work on IE7? And how to solve it?

 

Here are the corresponding codes in html && CSS. I'd definitely appreciate your help!

 

	<img class="border" src="images/top-ul.jpg" alt="" />
	<ul>    
         <li id = "trash"><img src="images/ico-trash.jpg" alt="" /></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="" /></a></li>
                 ...


             

 

#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;}

 

Thanks!

 

[attachment deleted by admin]

[BillyBoB]

I don't see where the 'remove' is being placed in the html. Could you explain how it gets added? Is it an image, script, or part of the html not currently visible?

[Yueee]

Oops, sorry it's added by:

 

<li id = "trash"><img src="images/ico-trash.jpg" alt="" />
STRICT;
echo outputLanguage($xml, 'trash', true);
echo <<<STRICT
</li>

 

html translation is:

<li id = "trash"><img src="images/ico-trash.jpg" alt="" />
<span id="remove|spanish|swedish" class = "translate"> Remove </span>
</li>

 

[BillyBoB]

What does that output exactly for the trash div? Does it include any line-breaks?

[Yueee]

Oh..yeah. A line break is working. But what should I do to shift the icon back to the center?

 

Thanks, sir!

[JJ2K]

It's better to copy and paste the offending HTML from the VIEW SOURCE screen rather than directly from your code so we can see what is being sent to the browser.

 

To center inline images you should just be setting text-align:center; on it's parent.

Or if the image has a block setting and a known width then margin: 0 auto; will center it.

 

It looks as though you're overcomplicating things with the HTML and CSS, e.g you keep opening a <ul> and closing it, a UL is meant to be a LIST, not just have one item in it, for example:

 

<ul>
<li id="trash">
<img src="img.jpg" />
<span>Text</span>
</li>
<li id="another">
<img src="img2.jpg" />
<span>Text</span>
</li>
<li id="something">
<img src="img3.jpg" />
<span>Text</span>
</li>
</ul>

 

Would make more sense.

 

 

[Yueee]

Sorry I haven't been here for a long time. @ JJ2K - I hope you're still there

 

Thanks for your reply. Since "trash" is supposed to be separate so that's why I used a pair of <ul> tags for it. Another pair of <ul> tags is used to contain the rest of items as you suggested.

 

In CSS, text-align: center is placed in <ul> which is the parent of img and it isn't working. Here is a more complete version of the codes:

 

html:

   	<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>

 

CSS:

#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;}

 

Actually I just took over this project and it's the first I came across this problem so I'd definitely appreciate your help! See attachment: trash icon is still shifted slightly to the right and again this issue only applies to IE7.

 

[attachment deleted by admin]