Solved

float word wrap problem in internet explorer

Posted on 2004-10-17
2
1,461 Views
Last Modified: 2008-02-01
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
Comment
Question by:livegirllove
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
2 Comments
 
LVL 3

Accepted Solution

by:
Kupi earned 500 total points
ID: 12334294
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
 
LVL 1

Author Comment

by:livegirllove
ID: 12334370
Perfect!!
0

Featured Post

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
ASP.NET Content Page 3 52
How can I make a div layout like the one in the image 2 45
need help with share buttons 11 73
[Bootstrap] Navigation Bar Collapse 27 42
CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

730 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question