I have found several mentions of bugs on the internet concerning IE floats and images, but none seem to address my problem. <!-- *********TOP CONT In********** --> <div class="real_top_cont"> <div class="real_right"> <?php if (isset($primary_links)) { ?><?php print theme('links', $primary_links, array('class' => 'links', 'id' => 'navlist')) ?><?php } ?> </div> <div class="real_top"> <img src="/themes/real_estate/images/top-image.jpg" alt="" /> </div> </div> <!-- *********TOP CONT Out********** --> Code (markup): ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,fieldset,input,div,a,img { padding:0; margin:0; border:0; } h1,h2,h3,h4,h5,h6,pre,code { font-size:1em; } a img,:link img,:visited img { border:none } ul,ol,li { list-style:none } body { background-color:#4A6529; text-align:center; color:#FFFFFF; } .real_main { margin:0 auto; width:790px; text-align:left; background-color:#637D39; background-image:url('/themes/real_estate/images/back.png'); background-repeat:repeat-y; border-left:2px solid #FFFFFF; border-right:2px solid #FFFFFF; } .real_content { width:556px; float:right; } .real_right { float:right; width:232px; height:217px; background-color:#CCCCCC; } .real_top_cont { border-bottom:2px solid #FFFFFF; height:217px; } Code (markup): The problem that I am having is that in IE, the image that is supposed to appear on the left of the .real_right div is falling below. I have tried adjusting the width until it was obvious that the image should clear the .real_right div, but the image still drops below as if I haven't floated it at all. The site that I am working on is http://www.mobile-home-sales.com Also, on the same site, in the .real_top_cont div, in IE there is a space between the image and the 2px border bottom which I don't want to be there. I have tried making the image a block, tried removing the baseline alignment, and given a line-height of 0 to it's container, yet for some reason, the space is still there. Thank you for any help or advice that you might offer.
Okay, maybe that's the problem. Care to elaborate? I added an ending "/" and an alt attribute to the image tag, and can't see any CSS errors that would cause this problem.
I just ran the html and css through the validator, and it says "Congratulations". http://validator.w3.org/check?uri=h...(detect+automatically)&doctype=Inline&group=0 http://jigsaw.w3.org/css-validator/validator?uri=http://www.mobile-home-sales.com/node
In FF, the image is pushed to the left. In IE, no change. I changed the main containers width from 790px to 788px. I also reduced the size of .real_right by 12px, to the point that you could clearly see a space between the image and the right side div (the gray area). Usually when I have a float problem, it is because I am trying to stuff too much into to small of a space. That doesn't seem to be what's happening here.
I'm not understanding. I looked in IE and FF. The header looks the same in both-- the logo is left and the title is right. In FF where the house photo is, it sits left and a block called Test sits right. In IE6 the text block turns grey like a PNG does and sits below the img. It looks like the image (374px wide) is floating left and to the right is a text block (232px wide), sitting in a container called real_top_cont which is only 217px wide. So I don't understand what's going on or why FF is allowing 606px wide inside a box that's supposed to only be 217px wide??? *Edit the gap at the bottom of the image... I had that twice now with menus made of stuff floating in one direction, only in IE, and the end result was that the container of the floaties was wrapping the floats (which only IE is dumb enough to do) instead of letting the floats hang out like everyone else is doing... and both times I fixed that by adding overlfow:hidden to the container fo the floats. You could give it a try for this case. I too would have thought it was the descender-letter thing, but floating the img left already made it a block (as you well know).
You know, that's similiar to a fix I found which is to give the image container a font-size:0px; It seems to me IE thinks images are fonts in disguise and adds the extra space for descenders. It's a nuisance for sure in image based roillover dropdown menus.
I fixed this issue. I had to rethink the entire code. I started from scratch, and found a much better way of coding for true css columns. Thank you for all of your help.
If you found the answer to a specific problem, post it! Cause everyone has these issues, esp with IE and floats. qube, I've seen the font-size: 0px and font-size: 1px on CSS sheets too... I wonder if that's what the issue is. All my menus which had this did have CSS background images, but never in the HTML, so I dunno if it's the decender thing or not.
I don't know what's really going on with giving an image a font-size. It's just a trick to get rid of the extra space at the bottom. I stumbled into another nasty recently when I discovered that a dropdown menu cannot have the same background color as the div it's inside of. When the colors are exactly the same, the menu disappers entirely in IE! When the colors differ by a single unit, everything works fine. Also, IE 6 breaks when background:transparent; is used so you're forced to have a background color. If your div background is #ffffff you have to make the menu background #fffffe to get it to work. I haven't seen this one published anywhere. It's 100% reproducible by toggling that single value in the menu background.
font-size: 0; is often used to collapse a container in IE because IE will always use the font-size as the minimum height for containers of text. For images, it's far better to set the vertical alignment to bottom and be done with it. While doing so I also kill the borders on images so I don't have to worry about them popping up in Firefox when they're inside links. img { border: 0; /* this squashes a Firefox bug */ vertical-align: bottom; /* this squashes an IE bug */ } Code (markup): Just drop that in near the top of your stylesheet and you're done.