Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1469
  • Last Modified:

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

0
livegirllove
Asked:
livegirllove
1 Solution
 
KupiCommented:
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

Featured Post

Hire Technology Freelancers with Gigs

Work with freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely, and get projects done right.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now