Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 10 of 10
  1. #1
    New Coder
    Join Date
    Dec 2009
    Posts
    19
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Question Floats not responding in IE Compatibility Mode

    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.

    Code:
    <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">
    Code:
    .internalSpacerLeft {
    	clear:left;
    	float:left;
    	height:20px;
    }
    
    .internalSpacerRight {
    	clear:right;
    	float:right;
    	height:20px;
    }
    Source: http://www.purdue.edu/bands/media/

  • #2
    Regular Coder Doctor_Varney's Avatar
    Join Date
    Mar 2008
    Location
    Midlands, UK
    Posts
    649
    Thanks
    45
    Thanked 29 Times in 28 Posts
    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?
    Last edited by Doctor_Varney; 09-06-2010 at 07:04 PM.
    Definition: Computer rage is a heightened physiological response with associated feelings of anger and frustration[1] resulting from using a computer or other complex electronic device. It may result in the physical assault of the computer or similar item.[2] Computer use often leads to verbal abuse and occasionally physical violence towards the object.[3] Computer rage may be caused by distress due to a hardware or software problem which the enraged person is unable to correct.

  • #3
    New Coder
    Join Date
    Dec 2009
    Posts
    19
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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:

    Code:
    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.
    Last edited by trs4ece; 09-06-2010 at 07:17 PM. Reason: fixing sample code layout

  • #4
    Regular Coder Doctor_Varney's Avatar
    Join Date
    Mar 2008
    Location
    Midlands, UK
    Posts
    649
    Thanks
    45
    Thanked 29 Times in 28 Posts
    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?

    Code:
    						<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:
    Code:
    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
    Definition: Computer rage is a heightened physiological response with associated feelings of anger and frustration[1] resulting from using a computer or other complex electronic device. It may result in the physical assault of the computer or similar item.[2] Computer use often leads to verbal abuse and occasionally physical violence towards the object.[3] Computer rage may be caused by distress due to a hardware or software problem which the enraged person is unable to correct.

  • #5
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,955
    Thanks
    9
    Thanked 726 Times in 720 Posts
    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 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:

    Code:
    <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.
    Last edited by SB65; 09-06-2010 at 08:17 PM.

  • #6
    New Coder
    Join Date
    Dec 2009
    Posts
    19
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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.



    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:


  • #7
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,955
    Thanks
    9
    Thanked 726 Times in 720 Posts
    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:

    Code:
    <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...

  • #8
    Regular Coder Doctor_Varney's Avatar
    Join Date
    Mar 2008
    Location
    Midlands, UK
    Posts
    649
    Thanks
    45
    Thanked 29 Times in 28 Posts
    Oh god...

    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
    Last edited by Doctor_Varney; 09-07-2010 at 03:19 AM.
    Definition: Computer rage is a heightened physiological response with associated feelings of anger and frustration[1] resulting from using a computer or other complex electronic device. It may result in the physical assault of the computer or similar item.[2] Computer use often leads to verbal abuse and occasionally physical violence towards the object.[3] Computer rage may be caused by distress due to a hardware or software problem which the enraged person is unable to correct.

  • #9
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,955
    Thanks
    9
    Thanked 726 Times in 720 Posts
    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 and here's my simplified test page 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.

  • #10
    New Coder
    Join Date
    Dec 2009
    Posts
    19
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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.


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •