Jump to content

Simlpe Float In Ff?


Recommended Posts

I am having an issue with floating an image to the left in FireFox. Here is how it looks in IE:float.gifImage floats to left while text is on right. However in FireFox the text is moved beneath the image, like this:nofloat.gifHere is my XHTML:

	<div class="roundedStageBox">	<div class="roundedStageBoxImage">	<img src="/images/stage-sales-tools.gif"  />	</div>	<p style="width:200px;">Proven tips and suggestions to guide you in your payroll conversations.</p>	</div>

And the CSS:

.roundedStageBoxImage {float:left; width:213px;}.roundedStageBox {background-image: url('/images/static_RoundedBox.gif'); background-repeat:no-repeat; width:470px; height:389px; padding:34px 0 0 17px;}

Is there an explanation for this? I read somewhere that you have to have a width declared when floating an element, which is why I have the width of the picture (213px) delcared with the float.thank you in advance to anyone willing to explain.

Link to comment
Share on other sites

IE renders padding/margins in a different way to over browsers. and setting width of paragraph forces it to be larger in size than where is is supposed to fit, so it has no option but to move down to a position where it will fit. try removing width of paragraph at least, and adjust padding.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Create New...