float word wrap problem in internet explorer

http://www.soloenterprises.org/testcss.php
http://www.soloenterprises.org/solostyle1.css

My borders break in IE when using a nested float to word wrap images.  I would like to know if there is a workaround for this as it displays perfectly in FF et all.  I would rather not import different style sheets by browsers.

Some good links on this problem would be great.  

thanks

LVL 1
livegirlloveAsked:
Who is Participating?

[Webinar] Streamline your web hosting managementRegister Today

x
 
KupiConnect With a Mentor Commented:
Hi livegirllove,
when you use floating divs you have to add a clearing element to prevent visualization errors, for detailed info please see:
http://www.positioniseverything.net/easyclearing.html

To fix the problem, replace your code with the following:

<div class="content">
  <div style="float: left; margin: 0px 10px 0px 0px; width: 60px;"><img src="images/serviceimage.gif" alt="Orange County Computer Service" width="58" height="66" style="display: block;"></div>
  <h2>Orange County Computer Service</h2>
  microsoft certified<br>
  14 years exp.<br>
  guaranteed work
</div>
<div class="content">
  <div style="float: left; margin: 0px 10px 0px 0px; width: 60px;"><img src="images/webdesignimage.gif" width="62" height="65" alt="Orange County Web Design" style="dispaly: block;"></div>
  <h2>Orange County Web Design</h2>
  high quality<br>
  ease of use<br>
  lowest prices
</div>
<div class="content">
  <div style="float: left; margin: 0px 10px 0px 0px; width: 60px;"><img src="images/hostingimage.gif" width="34" height="83" alt="Orange County Web Site Hosting" style="display: block;"></div>
  <h2>Orange County Web Site Hosting</h2>
  99.999% uptime<br>
  linux/redhat<br>
  daily backups
</div>

And in the CSS:

.content {
  clear: both;
  position:relative; /* Position is declared "relative" to gain control of stacking order (z-index). */
  width:auto;
  min-width:120px;
  margin:0px 210px 20px 170px;
  border:1px solid black;
  background-color:white;
  padding:10px;
  z-index:3; /* This allows the content to overlap the right menu in narrow windows in good browsers. */
  height: 1%;
}

.content:after {
  display: block;
  visibility: hidden;
  clear: both;
  content: ".";
  height: 0px;
}

Kupi
0
 
livegirlloveAuthor Commented:
Perfect!!
0
All Courses

From novice to tech pro — start learning today.