...

View Full Version : Floats not responding in IE Compatibility Mode



trs4ece
09-06-2010, 06:56 PM
In Firefox, Chrome and IE8, I am able to successfully stack right and left floats. However, in IE8 compatibility mode, the floats do not stack but rather line up next to each other. I am using clear for the floats but IE8 Compatibility Mode appears to be ignoring that.

Following is the code that I am trying to use.



<img src="/bands/2010/images/spacer.gif" class="internalSpacerRight" width="340px" style="border:none">
<img src="/bands/2010/images/spacer.gif" class="internalSpacerRight" width="560px" style="border:none">
<img src="/bands/2010/images/spacer.gif" class="internalSpacerRight" width="710px" style="border:none">
<img src="/bands/2010/images/spacer.gif" class="internalSpacerRight" width="800px" style="border:none">
<img src="/bands/2010/images/spacer.gif" class="internalSpacerRight" width="100%" style="border:none">

<img src="/bands/2010/images/spacer.gif" class="internalSpacerLeft" width="130px" style="border:none">
<img src="/bands/2010/images/spacer.gif" class="internalSpacerLeft" width="60px" style="border:none">
<img src="/bands/2010/images/spacer.gif" class="internalSpacerLeft" width="20px" style="border:none">


.internalSpacerLeft {
clear:left;
float:left;
height:20px;
}

.internalSpacerRight {
clear:right;
float:right;
height:20px;
}


Source: http://www.purdue.edu/bands/media/

Doctor_Varney
09-06-2010, 07:02 PM
By default, divs stack because they are block level.

To get them to line up, side by side, you float them.

So, if you want your divs to stack, you don't need the float... and if you want them side-side, you do.

Seeeemples... ;)

Dr. V

PS Why are you using all those spacer images? :eek:

trs4ece
09-06-2010, 07:13 PM
Sorry, I guess I should have better explained what I was trying to do. The positioning of the floats or divs isn't as important to me as the content that is flowing around them. If you visit the link provided, you should see a black curve and some text on the upper left side and then text under it. What I'm wanting is something like this:



TEXT TEXT TEXT TEXT //====
TEXT TEXT TEXT //.........
TEXT TEXT //.....GRAPHIC..
TEXT //.TEXT TEXT TEXT TE.
====.TEXT TEXT TEXT TEXT..
.TEXT TEXT TEXT TEXT TEXT.


So what I tried doing was setting up some right floats to push the top left text over and then some left floats to push the bottom right text over. It didn't work so well. DIVs didn't seem to do the job so that's why I opted for floats of 1px spacer GIFs.

Doctor_Varney
09-06-2010, 08:02 PM
Ah! With you now...

As it so happens, it's exactly what I'm doing at the moment. So I'll share this code with you now. I can only hope it's what you're trying to achieve... images floating around inside paragrahs?




<p class="p_first">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula pharetra est feugiat hendrerit. Duis id pretium ante. Aliquam erat volutpat. Aliquam blandit, justo tempor tempor adipiscing, tellus tellus lobortis ante, vitae scelerisque enim enim sed tortor.
<img class="p-img_left" src="images/zw10_mitzfield-1.jpg" alt="Steve as zombie" />
In vehicula, magna imperdiet pellentesque dapibus, neque quam adipiscing urna, laoreet varius neque enim id dolor. Nulla vitae augue venenatis odio porttitor aliquet sed at dolor. Fusce rutrum est non quam pellentesque pellentesque. Nam non vehicula purus. Nunc blandit suscipit ligula vitae consequat. Sed quis augue mi, non pharetra enim. Suspendisse potenti. Curabitur molestie, dolor vitae scelerisque venenatis, justo elit bibendum metus, aliquet pellentesque enim metus et lectus. Phasellus ac gravida purus.
</p>
<h2>
<img class="charlie" src="font_infected/charlie.gif" alt="C" />
onsectetur Adipiscing Elit
</h2>
<p class="p_last">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula pharetra est feugiat hendrerit. Duis id pretium ante.
<img class="p-img_right" src="images/zag_kayrakisewindow.jpg" alt="undead kay looking through broken window" />
Aliquam erat volutpat. Aliquam blandit, justo tempor tempor adipiscing, tellus tellus lobortis ante, vitae scelerisque enim enim sed tortor. In vehicula, magna imperdiet pellentesque dapibus, neque quam adipiscing urna, laoreet varius neque enim id dolor. Nulla vitae augue venenatis odio porttitor aliquet sed at dolor. Fusce rutrum est non quam pellentesque pellentesque. Nam non vehicula purus. Nunc blandit suscipit ligula vitae consequat. Sed quis augue mi, non pharetra enim. Suspendisse potenti. Curabitur molestie, dolor vitae scelerisque venenatis, justo elit bibendum metus, aliquet pellentesque enim metus et lectus. Phasellus ac gravida purus.
</p>

Then my CSS for this reads:



p {
margin-left:15%;
margin-right:20%;
text-align:justify;
}
.p_first {
margin-bottom:1em
}
.p_last {
margin-bottom:50px;
}
.p-img_left {
float:left;
clear:left;
padding:4px
}
.p-img_right {
float:right;
clear:right;
padding:4px
}


As you can see, there's no need for any spacer gifs, crowding up the place. Rather, I use a simple padding rule to generate some space around my images, while the text flows around them.

I have here a left floated img and a right floated one, which I call upon through class.

You'll have to excuse, I am no expert coder - and I'm not sure about the clear attribute. This confuses me, but I assume it needs to go after a float, to stop the next element down picking up the float. You'll have seek the advice of the more experienced on that.

Is that what you wanted?

Dr. V

SB65
09-06-2010, 08:14 PM
I think what you're seeing there is an error in the way IE7 renders floated elements. FF is rendering correctly but IE7 (IE8 in compatibility mode) isn't. There was a similar thread a long time ago here (http://www.codingforums.com/showthread.php?t=162916) which I'm reminded of - although in this case the poster wanted what IE was doing not what FF was doing.

In this situation you could make your code a whole lot simpler by removing all of the spacing images and empty paras within #internal anand d having something like:


<div id="internal" style="padding-top: 20px;">
<h2 id="internalPageHeader"> Multimedia</h2>

<p align="justify" style="margin-top: 170px; margin-left: 120px;">Check our photo albums and sound clips regularly to find a dynamic array of pictures reflecting the heritage and the fun of our department! If text is more of your thing then check out our news archives for a history of Purdue Bands and Orchestra events dating back to 2000!</p>

which uses padding to move the h2 down a bit and then margin top and left to move your text in. This is a lot cleaner and easier to maintain and avoids the issue with IE7.

trs4ece
09-06-2010, 08:33 PM
I tried doing something like that but because I'm using a template for many pages on this site, I was hoping to get something that would not require manipulation of the padding for each page.

An implementation like that also caused several problems with having too much white space. Using margins and padding would create a rectangular box offset by those parameters. The result would either have text overlapping into the black curved line or it would leave a large amount of white space to the top and left. I opted to use the many spacer images to get a staggered effect maximizing the white space usage.

The following is what I'd ideally like to have happen but I'm not sure if it's possible to get IE7 to do it properly since it keeps pulling the floats to the upper left instead of accepting the clear parameter and just putting the left floats lower on the page.

http://author.www.purdue.edu/bands/example100906.jpg

And here is the basic idea of how I've been trying to implement it (the red squares are the borders of my invisible spacers:

http://author.www.purdue.edu/bands/example1009062.jpg

SB65
09-06-2010, 09:13 PM
Hmm, well another (ugly) approach to your existing code would be to insert a clearing div before your left floated spacers. You'd need to move your h2 so it's before the clearing div as well. Something like:


<div id="internal"><img width="340px" style="border: medium none;" class="internalSpacerRight" src="/bands/2010/images/spacer.gif">
<img width="560" style="border: medium none;" class="internalSpacerRight" src="/bands/2010/images/spacer.gif">
<img width="710" style="border: medium none;" class="internalSpacerRight" src="/bands/2010/images/spacer.gif">
<img width="800" style="border: medium none;" class="internalSpacerRight" src="/bands/2010/images/spacer.gif">
<img width="100%" style="border: medium none;" class="internalSpacerRight" src="/bands/2010/images/spacer.gif">
<h2 id="internalPageHeader">Multimedia</h2>
<div style="clear:both"></div>
<img width="130" style="border: medium none;" class="internalSpacerLeft" src="/bands/2010/images/spacer.gif">
<img width="60" style="border: medium none;" class="internalSpacerLeft" src="/bands/2010/images/spacer.gif">
<img width="20" style="border: medium none;" class="internalSpacerLeft" src="/bands/2010/images/spacer.gif">

It's very ugly though...:(

Doctor_Varney
09-07-2010, 03:01 AM
Oh god... :rolleyes:

Make an image of the text and put what you want it to say in the alt="...". You could include the upper part of the border in it.

Or what about using a seperate <p> for each line? Give each line a .class with the appropriate fixed width and set the font size in pts. You've got to think about what might happen when someone increases the font size in their browser. There really shouldn't be any need for all those transparent spacers.

Or, and I hate to say it - it could be a case for using a table.

Or you could use some absolute positioning. That usually comes to the rescue in situations like this.

Whatever you do, try and keep it simple and elegant if you can.

Dr. V

SB65
09-07-2010, 03:10 PM
Just been doing a bit of digging on the bug discussed/experienced above - it occurs in IE7 and IE6 (at least) when an element with both float and clear properties only clears floats on the same side as it is floated. Fixed in IE8.

There's some information here (http://www.brunildo.org/test/IEWfc3.html) and here's my simplified test page (http://simonbattersby.com/test/ie_floaterror_demo.htm) if anyone's interested.

There doesn't seem to be any very elegant fix to this.

trs4ece, just looking again at your problem then the code is very messy just to achieve that indented left margin on your text in line with the black arc. I personally wouldn't bother. However, if you're really determined, than another alternative to the clear div in post 7 would be to use conditional css for IE7 and under to apply a suitable margin-top to your first left-floated div - which will force it down to where it should be.

trs4ece
10-01-2010, 02:53 AM
I ended up just scrapping the left floats altogether. Instead I just use a single block spacer gif to shift the main body to the right until it can wrap under the arc. It's a lot more simple and although it doesn't give the same contour effect, I like the way this looks a lot better.

Thanks for the help all. Things are working and the code looks a bit more clean now.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum