Image/text DIV issues in Firefox

[MarkMan]

Both the code snippets below work fine in IE 6, but the image and/or text bleeds out of the container div when viewed with Firefox 1.5.

 

Any suggestions??

 

...using align="left" on the image:

><div style=" text-align: left; margin: 0px 2% 0px .5%; padding: 15px 10px 15px 10px; width: 94%; border-top: 1px; border-right: 1px; border-bottom: 1px; border-left: 1px; border-style: solid; border-color: #000000; background-color: #d9dffd;">
		<a id="ace"></a>
		<span style="font-family: chiller, comic sans ms; font-size: 30px; color:#003399; font-weight: bold;">Ace of the Month</span>
	 	<br />
		<img src="images/ace_month_2006_03.jpg" alt="" border="0" width="225" height="300" align="left" />
			sajkdf sfl;kjsa fsdfj sfs dfsadj d sd f fsd fdsfds fd d d sd; sd dkfjsad fsdf sdsd fsd sdsd sd fsd fsdf sdf sdf sdf ds f sd dfs fd  sfd sd f sd sdf sdf sad f sda fsd f ew we fv ew f ve ge v e ve vgvaasdfs ds f sda fsad fsda fas f sdf sda fsad f sadf sad f dsaf

</div>

 

... or putting the image and text in separate divs:

><div style=" text-align: left; margin: 0px 2% 0px .5%; padding: 15px 10px 15px 10px; width: 94%; border-top: 1px; border-right: 1px; border-bottom: 1px; border-left: 1px; border-style: solid; border-color: #000000; background-color: #d9dffd;">
		<a id="ace"></a>
		<span style="font-family: chiller, comic sans ms; font-size: 30px; color:#003399; font-weight: bold;">Ace of the Month</span>
	 	<br />
		<div style="float: left; width: 40%">
		<img src="images/ace_month_2006_03.jpg" alt="" border="0" width="225" height="300" />
		</div>
		<div style="float: left; width: 20%">
			sajkdf sfl;kjsa fsdfj sfs dfsadj d sd f fsd fdsfds fd d d sd; sd dkfjsad fsdf sdsd fsd sdsd sd fsd fsdf sdf sdf sdf ds f sd dfs fd  sfd sd f sd sdf sdf sad f sda fsd f ew we fv ew f ve ge v e ve vgvaasdfs ds f sda fsad fsda fas f sdf sda fsad f sadf sad f dsaf
		</div>
</div>

[TCH-Bruce]

My opinion is Firefox is rendering it as you have coded it and IE is rending it as you want it. This is a common occurance between browsers. While Firefox is standards compliant IE6 is not.

 

Do you have a link?

[MarkMan]

Sure, here's a link -- but the site is under construction at this time so it looks a little rough right now.

 

div example

 

Even if the code snippets above are placed on a basic html page, then the problem will still occur. Strange thing is, I have other pages with nested divs and pictures but there are no problems -- so, yes, it's probably buggy code

[TCH-Bruce]

Add this to your div.gen_top_cont style.

 

>overflow: auto;

[MarkMan]

Excellent, it works now. Thanks Bruce!

[TCH-Bruce]

Glad I could help

[MarkMan]

Yikes, another late night and another <probably> simple problem .

 

I'm having the exact opposite issue now: Firefox renders as expected (which is usually the case) and IE is wacko.

 

If anyone wants to take a quick look, it'd be great. Site's still under dev

 

example of problem The pic should have some text to the right and a div under it with text, not text wrapping around it.

 

- many thanks

Edited March 7, 2006 by MarkMan

[TCH-Bruce]

When I mentioned to add the overflow to your CSS I meant your style sheet tag and not inside your source document. Maybe that's what's causing an issue in IE6.

[MarkMan]

The overflow worked perfect for the first problem (it was added to the stylesheet)

 

A "clear: both" did the trick for IE this time.

[TCH-Bruce]

Glad you got it sorted out