views:

372

answers:

2

Can checkout the problem here

DIV#target is not as wide as parent div in IE6,and only in IE6.

And you can modify it on the fly by clicking the EDIT on topright.

For those who can't see the content,here is the html part:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;

<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

<head>
    <meta name="verify-v1" content="IWNE8753ok3185rownXmHDc6EZFBP/eMDlHCHUQPaEk=" />
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <meta http-equiv="Content-Language" content="en-us" />


    <title>51Hired</title>
    <link rel="shortcut icon" href="static/favicon.ico" />
    <link href="style/layout.css" rel="stylesheet" type="text/css" />
    <link href="style/index.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="menus">
    <a href="/index.html?edit">EDTI</a>&nbsp;&nbsp;
</div>
<div class="clear"></div>
<div id="body" style="width:850px;border:1px solid blue;">
    <div id="target" style="border:1px solid red;width:100%;margin:0;">
    something
    </div>


    <div class="biankuang mag_t">
      <div class="sub_i_title">
      <a href="/jobs.php" style="float:right;color:#D64F00;margin-right:10px;">More&raquo;&raquo;</a>
      <h2>Hostest jobs</h2>                                                             
      </div>
      <div class="sub_i_b clear">

       <ul class="info">
       <li><span>2009-10-05</span><a class="job-hyperlink" title="\u670d\u88c5\u8bbe\u8ba1\u5e08" href="/jobs/1172/Designer" target="_blank">Designer</a></li><li><span>2009-09-21</span><a class="job-hyperlink" title="\u9500\u552e\u7ecf\u7406" href="/jobs/158/Manager" target="_blank">Manager</a></li><li><span>2009-09-20</span><a class="job-hyperlink" title="\u517c\u804c\u4e1a\u52a1\u7ecf\u7406" href="/jobs/580/Manager" target="_blank">Manager</a></li><li><span>2009-09-21</span><a class="job-hyperlink" title="\u9500\u552e\u4ee3\u8868" href="/jobs/159/SaleRepresentative" target="_blank">Sale Representative</a></li><li><span>2009-10-01</span><a class="job-hyperlink" title="\u4ea7\u54c1\u7814\u53d1\u5de5\u7a0b\u5e08" href="/jobs/744/Engineer" target="_blank">Engineer</a></li><li><span>2009-10-05</span><a class="job-hyperlink" title="\u4e1a\u52a1\u4e3b\u7ba1" href="/jobs/309/Manager" target="_blank">Manager</a></li><li><span>2009-10-05</span><a class="job-hyperlink" title="\u4e1a\u52a1\u7ecf\u7406" href="/jobs/61/Manager" target="_blank">Manager</a></li><li><span>2009-10-05</span><a class="job-hyperlink" title="\u5ba2\u6237\u7ecf\u7406" href="/jobs/228/Customer Manager" target="_blank">Customer Manager</a></li><li><span>2009-10-05</span><a class="job-hyperlink" title="\u9500\u552e\u4ee3\u8868" href="/jobs/242/Sale Representative" target="_blank">Sale Representative</a></li><li><span>2009-10-04</span><a class="job-hyperlink" title="QA\u7ba1\u7406" href="/jobs/288/QA Management" target="_blank">QA Management</a></li>               
       </ul>

      </div>
    </div>


</div>

</body>
</html>
A: 

I saw the page, but now it's empty. Are people editing it and deleting the content?

Anyway, I would be mindful that IE counts borders differently, and that could change the exact width. Does this answer your question?

Matrym
I deleted the empty pages,and it should be OK for everyone now.Don't submit empty page again...
Mask
+1  A: 

This line in the linked CSS (style/index.css):

 .sub_i_b ul li{float:left; margin-right:45px; width:350px;}

Should be changed to:

 .sub_i_b ul li{float:left; padding-right:45px; width:350px;}

The margin is throwing things out in IE6 because it's being applied to outside the width of the area specified and pushing the entire section outward where the above width style on div#target is unable to account for.

Padding works just the same in this instance and keeps your widths working.

random
Oh it works but I still don't know what you mean by "it's applied to the outside of the area",can you explain it ?
Mask
@eof,can you clarify it by a short example?
Mask