Floating a image to the right in internet explorer 9?

Question

Hi, newbie here, trying to float a image to the right in a <p> element. Seems to work fine in older versions of internet explorer, but 9 pushs the image down farther then the paragraph itself...have a look: Body Instrument. here is my code snippets:

Html:

<div id="page_content">
        <h1><a name="Welcome_to_Body_Instrument">Welcome to Body Instrument</a></h1>
        <p>
        <img id="basic_image_right" alt="Image of a Push up" height="231" longdesc="Image of a man doing a push up" src="Images/pushup.jpg" width="350" />Hello, and welcome to Body Instrument. Where I will bring together all
        the information I can find on weight free workouts. I have been
        interested in weight free workouts and have been doing them for a couple
        months now. I have read books and found a lot of information online on
        the subject, but I have never found one spot that has it all in one
        place.</p>
        <p>So I will dedicate this site to finding the information and share it
        with my readers and fellow weight free workout friends. After all our
        bodies can be the instruments that makes us look and feel better.</p>
CSS:

img#basic_image_right {
    float: right;
    margin-left: 10px;
    margin-bottom:10px;
    
}

Not sure why this is happening, just happened out of nowhere, showed up just fine in the designer view, so thought everything was gravy. But any help would be appreciated. Also second thought, is there a way that I can change a setting in expression web so it will show what internet explorer 9 looks like?

Answer 1

I don't have time to dig into it for you, but I will mention that you need to check other browsers other than just IE.  The earlier versions of IE are the exceptions.  What you see in IE9 is what you will see in current versions of Firefox, Chrome, etc..

Answer 2

Can't seem to find out what is going on, tried a couple things, but no luck, getting late will have to play with it some more tomorrow. Maybe I will get lucky and have a answer.

Answer 3

Well, if you're still here (or when you come back tomorrow ;-), I
found the problem. Like you, I couldn't get the image to float right,
although everything seemed correct. When something like that happens, I
look before the problem in source order, to see if an existing setting is causing the problem.

It didn't take long to spot that "clear:left" on the "credits" div. After
removing it, the photo popped right up where it belonged. Unfortunately,
it also moved the credits div out of position. I have never seen an
attempt to clear a floated element in the same selector (basically
having a floated element clear itself, which I don't think is possible),
but without it the layout changed. So I figured the resolution would be a
structural issue.

So, I removed the floats on both the left_col
and credits divs, wrapped them both in another div, and floated that div
left, which resolved the issue. If you didn't mind having the credits
inside the rounded rectangle menu div, you could just move it in there,
but if you want the appearance you currently have, the floated wrapper
div, with the two inner divs left unfloated, is the way to go.

BTW, Kathy is right. IE, all versions combined, only has about 52% share of all the browsers in use, with the majority of the remainder split between Firefox, Chrome, and to a lesser degree, Safari (unless you count mobile, where Safari is significant due to iDevices). Even within IE, there are significant differences in standards compliance ranging from IE6 to IE10, and thus differences in rendering the same markup. You really need to install and test on at least IE (IE10 offers Compatibility Modes for IE7 through IE10, so you can test most versions by installing IE10), Firefox, Chrome, and Safari. If you have clients or do business in Europe, you might want to add Opera, which is miniscule in the US, but popular in Europe. The point is, if you're only testing in IE9, you really only know what your site looks like in a very small subset of the browsers your visitors will be using. Just sayin'...  ;-)

cheers,
scott

---

Please remember to "Mark as Answer" the responses that resolved your issue. It is common courtesy to recognize those who have helped you, and it also makes it easier for visitors to find the resolution later.

Answer 4

One more note on this. I just went back and tested using the new Firebug 1.10.6, just to try it out, and found that you can just add the wrapper div and float it left, which resolves the issue, or you can do that and also remove the floats from "#credits" and "#left_col." Both resolve the issue and permit normal floats coming later in the source markup to work properly, but the latter also alters the appearance of the left column contents slightly. Take your pick...

BTW (and this goes out to everyone ;-), if you haven't already done so, upgrade your Firebug to the latest version. Among other reasons, there is a new feature called Trace Styles. As you can see from the description at that page, this can make finding tricky CSS issues, such as those caused by multiple selectors and unexpected specificity overrides, much easier. If for nothing else, that's a good reason to upgrade. Get it now!  ;-)

cheers,
scott

---

Please remember to "Mark as Answer" the responses that resolved your issue. It is common courtesy to recognize those who have helped you, and it also makes it easier for visitors to find the resolution later.

Answer 5

page seems to render ok with chrome

---

Windows MVP, XP, Vista, 7 and 8. More people have climbed Everest than having 3 MVP's on the wall.

Hardcore Games, Legendary is the only Way to Play

Developer | Windows IT | Chess | Economics | Vegan Advocate | PC Reviews

Answer 6

If the OP wants to clean up the page and move something, the should post the whole site instead of a fragment.

I work on web development every day now

---

Windows MVP, XP, Vista, 7 and 8. More people have climbed Everest than having 3 MVP's on the wall.

Hardcore Games, Legendary is the only Way to Play

Developer | Windows IT | Chess | Economics | Vegan Advocate | PC Reviews

Answer 7

Sorry I didn't get back to you all sooner, but Paladyn did solve the problem, thanks for the help! Will check out firebug, not really sure what that is all about...probably because I'm a newb. But thanks again!

Answer 8

Tech Bud, please mark my response as the answer. As the original poster of this thread, only you or a moderator can mark a response as answer. Thank you.

cheers,
scott

---

Please remember to "Mark as Answer" the responses that resolved your issue. It is common courtesy to recognize those who have helped you, and it also makes it easier for visitors to find the resolution later.