mboehler3 Posted October 1, 2009 Share Posted October 1, 2009 I am having an issue with floating an image to the left in FireFox. Here is how it looks in IE:Image floats to left while text is on right. However in FireFox the text is moved beneath the image, like this:Here 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 More sharing options...
dsonesuk Posted October 1, 2009 Share Posted October 1, 2009 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 More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.