[SOLVED] float right IE bug :(

[Jahren]

Hi guys!

I might sound like a newb but.. I AM 

 

no seriously, i'm trying to have an image going to the right of a div of text..

Works well in firefox/safari/opera but fails in IE 7

 

Right :

Wrong :

 

here's some code

 

HTML

<div id="introduction">	
		<img class='img_intro' src="images/orientation/pierre_beaupré.png" alt="Pierre Beaupré">

		<div id="texte_intro">
			<h3>Pierre Beaupré</h3><br/>
			Téléphone:   (450) 430-3120 <br/>
			poste:       2738<br/>
			Local : L-111-F <br/>
			Courriel:    <a href="mailto:email@domain.com">email@domain.com</a> <br/>
		</div>
		<div id="clearme"></div>
	</div>
	<div id="introduction2">	
		<br/>
		<img class='img_intro2' src="images/orientation/benois_dumas.png" alt="Benois Dumas">

		<div id="texte_intro2">
			<h3>Benois Dumas</h3><br/>
			Téléphone:   (450) 430-3120 <br/>
			poste:       2738<br/>
			Local : L-111-F <br/>
			Courriel:    <a href="mailto:email@domain.com">email@domain.com</a> <br/>
		</div>

		<div id="clearme"></div>
	</div>

 

CSS

#introduction
{
margin-top : -15px;
margin-left : 15px;
}

.img_intro
{
width : 150px;
height : 200px;
margin-right : 300px;
border : 2px solid black;
float : right;
}

.img_intro2
{
width : 150px;
height : 200px;
margin-left : 30px;
border : 2px solid black;
float : left;
}

#texte_intro
{
margin-left : 10px;
}

#texte_intro2
{
margin-left : 220px;
}

#clearme
{
clear : both;
}

 

[TheFilmGod]

I don't have time to completely analyze your code but from a quick glance I can see that your text intros do not have a specified width. This would def. solve your issue, as IE7 needs a width to render it properly, although it shouldn't be like that.

 

I also realized that you are using "margin-left" - why? Use margin: 0 0 0 20px; instead. I know it isn't convient but by using margin-left you allow the browser to set the default margins for all other sides. - You don't want to do that. The more things you specify the less the browsers (including stupid IE) have control over your stuff.

 

Lastly, your html is not semantic. You use < br /> this isn't the most ideal solution. Use <p> instead or better yet, use an unordered list. Semantic code does not only improve SEO but it also makes it a lot easier for you to code and layout your html.

[Jahren]

Setting a width to introduction makes the first picture to go left by that pixel amount for some reasons! (in firefox too)

 

Thanks for the margin tip, I changed all of them to fit and I can tell I see a difference! (didn't fix my problem tho but thanks for the knowledge)

 

lol your  BR tag was interpreted by the forums

I'll try and do it right next time with <p> thanks. I'm learning as I go.

People like you make my day ehe.

 

Now I need to find out what's wrong with my design making IE crying.

[Jahren]

OMG!

 

You were right about the width!

I didn't notice at first because I used a 300px which was larger than the available space lol

with 250px, it fits REALLY nicely. Thank you very much

 

I'll remove the pictures now.

edit : I can't modify my first topic.. oh well! too bad!