Wrapping problem in Firefox

[jwhite68]

I have the following code which displays 6 photos - with a coloured background behind. This coloured background is controlled with a stylesheet.

When displayed in Internet Explorer, the 6th photo wraps neatly to the second row, displayed underneath the first photo.

But in Firefox, the 6th photo is displayed horizontally to the right of the 5th photo, and stretches the background area, so that its not consistent with the form areas above.

<div class="offer0"><a href="properties_for_sale/BO-PROP-000027861.jpg" target="_blank"><img src="properties_for_sale/BO-PROP-000027861th.jpg" class="offerimg" /></a><a href="properties_for_sale/BO-PROP-000027862.jpg" target="_blank"><img src="properties_for_sale/BO-PROP-000027862th.jpg" class="offerimg" /></a><a href="properties_for_sale/BO-PROP-000027863.jpg" target="_blank"><img src="properties_for_sale/BO-PROP-000027863th.jpg" class="offerimg" /></a><a href="properties_for_sale/BO-PROP-000027864.jpg" target="_blank"><img src="properties_for_sale/BO-PROP-000027864th.jpg" class="offerimg" /></a><a href="properties_for_sale/BO-PROP-000027865.jpg" target="_blank"><img src="properties_for_sale/BO-PROP-000027865th.jpg" class="offerimg" /></a><a href="properties_for_sale/BO-PROP-000027866.jpg" target="_blank"><img src="properties_for_sale/BO-PROP-000027866th.jpg" class="offerimg" /></a><br /></div>

The stylesheet class for offer0:

div.offer0{
	width: 874px;
	border: 1px solid #DDDDDD;
	margin-top: 10px;
	background: #F0F9ED !important;
	display: table !important;
	padding-bottom: 15px;
}

The stylesheet class for offerimg:

img.offerimg{
	width: 150px;
	margin: 15px 5px 0px 15px;
	border: 1px solid #303030;
}

Can anyone offer any advice. Again, IE and Firefox not behaving consistently.

I realise the width of the main div area is 874, and that with 6 photos, their total width would add to 900 - but how come IE is smart enough to wrap automatically, and Firefox isnt? I just wanted to understand if there is some setting I can make in HTML/CSS that tells it to be smart!

 

[nickdel]

Hi Jwhite, I'm not entirely sure I understand what you mean but normally when you have wrapping issue's with firefox

overflow:auto

normally fixes it!

Cheers

nick

 

[feherke]

Hi

HTML content is wrapped on whitespace characters ( space, tab, new line, carriage return ). Your code has no such character where the content could be wrapped.

It is not only FireFox or other Mozillas, but also other standard compliant browsers, like Opera and Safari. Only Explorer wraps that content for unknown reason.

Feherke.

http://rootshell.be/~feherke/

 

[jwhite68]

I was able to get the image problem resolved by adding float: left to the offerimg class in the stylesheet.

If I dont have any whitespaces in a text string, is there still a way to force Mozilla to wrap automatically like IE does? During testing I have added artificially long text strings, which are causing the form to stretch, as for the images. Adding the same solution idea (float:left) doesnt fix this one. Ideas?

 

[jwhite68]

I have set the divs overflow to auto, assuming this would resolve the text wrap problem in Firefox, but it hasnt. This text wrapping issue seems to be widely reported when you search for the problem on Google.

 

[Vragabond]

Reading into what feherke said, you could get the content to wrap by inserting spaces between elements. I cannot imagine how you would need a very long string of text without any spaces to output -- if you do, you could think of a server-side solution to crop such a long string and only show the first n number of characters.

___________________________________________________________
[small]Do something about world cancer today: PACT[/small]