text wrap & float not working in ie?

Forum Moderators: not2easy

Message Too Old, No Replies

text wrap & float not working in ie?

CodilX

1:09 pm on Oct 15, 2007 (gmt 0)

Hi there,

I have a really frustrating problem.

I have an image, and I want text to wrap around it. Everything works fin in Firefox.. but ie ..

Here's how the code looks:

HTML:<div id="picture"> 
<img src="images/floatme.jpg" class="pic" /> 
</div>
Lorem ipsum

CSS:#picture
{
 width: 101px;
 height: 92px;
 background: url('images/pic_bg.jpg'); 
 float: left;
 margin-right:5px; 
 margin-bottom:5px; 
}img.pic
{
 left: 8px;
 top: 8px;
 position: relative;
 
}

the picture div is a shadow, and the img.pic property centers my image inside the shadow container.

The problem is, that in IE the image and the shadow div don't even show up, I just get text without an image.

Everything works fine in Firefox, the image shows up, the text wraps perfectly, but this issue with IE is killing me :/

Does anyone know a solution for this?

HarryM

1:33 pm on Oct 15, 2007 (gmt 0)

I don't know the answer, but you could try adding to the #picture styles:

background-position:top left; (or whatever)
background-repeat:no-repeat;

You could also try replacing img.pic styles with

img.pic
{
margin:8px 0 0 8px;
}

CodilX

1:35 pm on Oct 15, 2007 (gmt 0)

Nope, didn't work

HarryM

1:45 pm on Oct 15, 2007 (gmt 0)

The only other thing I can think of is that IE is not finding the images. Is the relative path correct?

For instance should background: url('images/pic_bg.jpg');
be background: url('../images/pic_bg.jpg');?

CodilX

3:05 pm on Oct 15, 2007 (gmt 0)

Well no, the path is correct, firefox finds it perfectly :)

edit: if no one knows how to correct this problem, does anyone have a solution to wrap the text?

[edited by: CodilX at 3:09 pm (utc) on Oct. 15, 2007]

HarryM

3:28 pm on Oct 15, 2007 (gmt 0)

You could try adding height and width to the img.pic styles. As it stands the browser can only work out the size of the image after it has been loaded, and as you are using relative positioning then that may be confusing IE.

Also I assume there is a container div in which div #picture is being floated?

If was my problem I would debug it by taking out everything but the essentials, check that worked, then add the next element. For example take out all the images, set a background-color on the div, and make sure that showed up. The add in the background image, etc.

CodilX

3:55 pm on Oct 15, 2007 (gmt 0)

The img.pic is inside the picture div, so I don't really see a reason to add width & height, I just use it for positioning inside the picture div, and even so, it doesn't make any difference. the img.pic is inside picture div, and picture div doesn't show up, thus img.pic is gone with it. I tried it with the img.pic, without it, etc, doesn't work

Well that's what I did, the debugging. The problem is the same with or without the images. it happens when I add the float element.

Marshall

4:00 pm on Oct 15, 2007 (gmt 0)

I suggest removing the class img.pic and set padding in the <div> that holds the image to position it. Also, is you text in a <p> tag? I do not see one in you sample code. Remember, you are dealing with two block elements, the <div> and <p> and one in-line element, the img.

One other option if you want to retain the img.pic class, is remove the position:relative and add display:block;

And the floated <div> should come before the text in the html that is to wrap it:

<div>floated division</div>
<p>text to wrap</p>

Marshall

CodilX

4:13 pm on Oct 15, 2007 (gmt 0)

That didn't work either.

For testing purposes I removed the img.pic entirely leaving only the <div> which I want the text to wrapped around.

With the <p> it doesn't wrap, it shows the text 1 line beneath the <div>

Marshall

4:58 pm on Oct 15, 2007 (gmt 0)

What doctype are you using? I do this all the time without any problems and, in fact, just did several yesterday floating images both left and right.

Marshall

HarryM

5:05 pm on Oct 15, 2007 (gmt 0)

If the text isn't wrapping around the div, then the float isn't working properly. Is there anything else in your html that could be affecting it.

The other thing I would check for is typos. For example if you have a missing semicolon in your css above one of your styles, then that style could be being ignored. Also a typo in the html can throw things.

CodilX

5:19 pm on Oct 15, 2007 (gmt 0)

I'm just starting this page so it's incomplete

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>
  <title>v2</title>
  <link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
  
  <div id="main">
    <div id="content">
    
      <div id="logo_container">
      <div id="logo1"></div>
      <div id="logo2"></div>
    </div>
    
    <div id="menu">
    Links 
    </div>
    
       
    <div id="lcontent">
    
      <h2>Welcome</h2>
      <div id="dots"></div><br />
      
      <div id="pic"> <img src="images/floatme.jpg" class="pic" /> </div>Lorem Ipsum
      
      
      
    </div>
    
    
  
    </div>
  </div></body>
</html>

CSS:


body 
{
  margin: 0;
  padding: 0;
  background: #f2f2f2;
  font-family: Tahoma;
  font-size: 12px;
  letter-spacing: 1pt;
  line-height: 13pt;
}#main 
{
  width: 742px;
  height: 829px;
  min-height: 829px;
  height: auto;
  background: url('images/mainshaddow.jpg') repeat;
  left: 50%;
  margin-left: -380px;
  position: absolute;
}
#content
{
  width: 684px;
  height: auto;
  position: relative;
  left: 29px;
}
#logo_container
{
  width: 684px;
  height: 133px;
  top: 18px;
  position: absolute;
}
#logo1
{
  width: 245px;
  height: 133px;
  background: url('images/logo.jpg');
  position: absolute;
}
#logo2
{
  width: 430px;
  height: 133px;
  background: url('images/logo2.jpg');
  left: 253px;
  position: absolute;
}
#menu
{
  width: 684px;
  height: 34px;
  background: url('images/menu_bg.jpg') repeat;
  top: 156px;
  position: absolute;
}
  
#lcontent
{
  width: 482px;
  height: 200px;
  top: 200px;
  position: absolute;
}
h2
{
  font-size: 18px;
color: #252525;
letter-spacing: 0.1pt;
}
#dots 
{
  width: 100%;
  height: 1px;
  background: #252525 url('images/dot.jpg') repeat-x;
  margin-top: 0px;
  position: inherit;
}
#pic
{
  width: 101px;
  height: 92px;
  background: url('images/pic_bg.jpg'); 
  margin-right:5px; 
  margin-bottom:5px; 
}img.pic
{
  left: 8px;
  top: 8px;
  position: relative;
  
}

Marshall

5:51 pm on Oct 15, 2007 (gmt 0)

I just tested your HTML and CSS and it worked fine. The code is below. It might also help to add height and width to the image.

<!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=utf-8" />
<title>the picture div is a shadow</title>
<style type="text/css">
#picture
{
width: 101px;
height: 92px;
background: url('images/pic_bg.jpg');
float: left;
margin-right:5px;
margin-bottom:5px;
}

img.pic
{
left: 8px;
top: 8px;
position: relative;

}

</style>
</head>

<body>
<div id="picture">
<img src="images/floatme.jpg" class="pic" />
</div>
<p>the picture div is a shadow, and the img.pic property centers my image inside the shadow container.

The problem is, that in IE the image and the shadow div don't even show up, I just get text without an image.

Everything works fine in Firefox, the image shows up, the text wraps perfectly, but this issue with IE is killing me :/

Does anyone know a solution for this? </p>

</body>

</html>

Marshall

CodilX

6:37 pm on Oct 15, 2007 (gmt 0)

Yes it works with the example you posted, but it doesn't work on my full site

Marshall

6:49 pm on Oct 15, 2007 (gmt 0)

Then there is obviously something else in your CSS interfering with it. You may have to put <br style="clear:both;" /> or <div style="clear:both;"> above the <div> you are trying to float.

Marshall

[edited by: Marshall at 6:50 pm (utc) on Oct. 15, 2007]

CodilX

6:52 pm on Oct 15, 2007 (gmt 0)

Thanks a million! This worked perfectly!

Curiosity, why did this happen? And why does this style clear thing work?