Проблема плавающего CSS в IE7

У меня проблема со страницей. Он использует плавающие элементы CSS. Все выглядит нормально в IE8 и 6, а также в Firefox, Chrome и т. д., но в IE7 нижние 3 блока «плавают» над некоторыми блоками основного содержимого. Я не могу в жизни понять, как это остановить. Я попробовал несколько вещей, таких как добавление clear:both; ниже основного содержимого div, а также различные команды overflow:, чтобы увидеть, работает ли это, но это бесполезно.

Ссылка: http://www.clickaccident.co.uk/accidentsv2/about.html

HTML-код:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Click Accidents</title>
<link rel="stylesheet" href="css/stylesheet.css" type="text/css" />
</head>
<body>
<!-- Wrapper Start -->
<div id="pagewrapper">
      <!-- Header Start -->
      <div id="header">
            <div class="header_r">Call to speak to one of our advisors now: 0800 <br />
              <br />
              Text Click to 83336 for a call back.
<br />
                  <span></span> </div>

            <div class="logo"><img src="images/logo.png" width="209" height="70" alt="Click Accidents Logo" /></div>
      </div>
      <!-- Header End -->
      <div class="clear" />
</div>
<!-- Navigation Start -->
<div id="menu">
      <ul class="navigation">
            <li class="current"><a href="index.html">Home</a></li>
            <li><a href="#">Whats it Worth?</a></li>
            <li><a href="#">10 Easy Steps</a></li>
            <li><a href="#">FAQ</a></li>
            <li><a href="#">Contact</a></li>
            <li><a href="#">About</a></li>
      </ul>

<div id="top-title">
<h3>Specialist Accident Compensation Solicitors.</h3>
</div>
</div>
<!-- Navigation End -->

<div class="clear"></div>
<div class="homebox2">
    <div class="homebox-left4">
        <h1><span>&nbsp;About Us</span></h1>
        <p>Click accidents is the specialist online accident and injury claim service brought to you by Barnetts Solicitors.</p>
        <p>With over 20 years specialist accident and compensation experience, Barnetts is a firm you can trust.</p>
        <p>Barnetts Solicitors was established in 1980, and has grown to be one of the top accident compensation firms in the UK, prividing professional specialist accident claim and legal services to clients throughout the UK and abroad </p>
        <p>Unlike online "claims management companies", we are solicitors regulated by the Solicitors Regulation Authority (Registration Number 67445) and have no "middle men" or high pressure sales people. We pride ourselves on a reliable, friendly and professional service.</p>
</div>
<div class="homebox-right">
    <div class="quoteboxtop" style="height: 8px"></div>
          <div id="traffic"><a href="road-traffic.html">Road Traffic Accidents</a></div>
          <div id="slipstrips"><a href="slips-trips.html">Slips, Trips &amp; Falls</a></div>
          <div id="work"><a href="work-related.html">Work Related Illness &amp; Injuries</a></div>
      <div id="medical"><a href="medical-dental.html">Medical/Dental Mistakes</a></div>
          <div id="accidentsabroad"><a href="accidents-abroad.html">Accidents Abroad</a></div>
          <div id="faultyequipment"><a href="defective-product.html">Faulty Equipment</a></div>
          <div id="solsmistakes"><a href="solicitor-mistakes.html">Other Solicitors Mistakes</a></div>
  </div>
</div>
<div class="clear"></div>
<div class="clear"></div>
<div style="clear:both;"></div>
<!-- Content Start -->
<div id="content">
<div class="onlinequote" style="height: 144px"><br />
<br />
    <div class="boxtext2">
        <strong>Compensation</strong><br />
  <a href="whats-it-worth.html">What are my Injuries worth?</a></div>
</div>
<div class="testimonials" style="height: 133px">
<div class="boxtext3">
  <h2><br />
    <br />
  </h2></div>
<div style="text-align:center; color:#fff">
  <strong>Mr A Ahmed</strong>
  Click Accidents Injury people were so professional. The service was efficient and very friendly.
</div>
</div>
<div class="phoneadvisor" style="height: 144px"><br />
<br />
<div class="boxtext"><strong>0800 066 5021</strong>
    <br />
    Contact us for a free no obligation discussion.<br />
</div>

</div>
<div class="liveadvisor" style="height: 144px"><br />
<br />
<div class="boxtext"><strong>Live Support</strong><br />
  Speak to someone online now.
  <br />
</div>

</div>
<div class="clear"></div>
<div class="bottombar" style="height: 153px"></div>
</div>
  <!-- Right Content End -->

  <div class="clear"></div>

<!-- Content End -->
<div class="clear"></div>
<!-- Bottom Bar Content Start -->
<!-- Footer Start -->
<div id="footerbg">
      <div id="footer">
            <ul class="navigation c5">
            <li><a href="index.html">Home</a></li>
            <li><a href="#">Whats it Worth?</a></li>
            <li><a href="#">10 Easy Steps</a></li>
            <li><a href="#">FAQ</a></li>
            <li><a href="#">Contact</a></li>
            <li><a href="#">About</a></li>
            </ul>
            <br />
            <br />
            <div id="copyrights" class="leftalign">
            ClickAccidents.co.uk is a trading name of Barnetts Solicitors (vat no. 325 0540 94)
            <br/>
            Regulated by the Solicitors Regulation Authority (SRA Number 67445).
            <br/>
            &copy; Barnetts Solicitors 2009 | All rights reserved 
            </div>
      </div>
      <!-- Footer End -->
</div>
<!-- Wrapper End -->
</body>
</html>

Любая помощь приветствуется :)


person Wayners247    schedule 29.12.2009    source источник


Ответы (2)


Почему бы вам не попробовать установить ширину #menu css, поскольку ширина может определяться размером внутреннего содержимого.

(or)

сделайте одно: сначала поместите #top-title слева, затем поместите .navigation вправо. дайте мне знать, если это решит вашу проблему

person Pokuri    schedule 29.12.2009
comment
Я пробовал это, но безрезультатно. Хотя это была хорошая идея. Я только что удалил фиксированную высоту для всех основных контейнеров ‹div›(s), и теперь он отлично работает. - person Wayners247; 29.12.2009
comment
Я только что удалил фиксированную высоту для всех основных контейнеров ‹div›(s), и теперь он отлично работает. Для тех, кто в будущем, попробуйте удалить всю фиксированную высоту из ваших div и позволить контенту создать ее. - person Wayners247; 29.12.2009

Я только что удалил фиксированную высоту для всех основных контейнеров, и теперь он отлично работает. Для тех, кто в будущем, попробуйте удалить всю фиксированную высоту из ваших div и позволить содержимому создавать это

person Wayners247    schedule 29.12.2009