IE vs. Firefox Problem

[SCSnare]

I'm trying to create a photography portfolio, however it's not coming out the way I want it to in Firefox. I was wondering if anyone could take a look at my code and see if they can see what the problem is. It comes out how I would like it to in IE, but in Firefox it does not. I realize that Firefox is the "right" browser and that's why I want to fix this problem. After I get this corrected, I'll add more .pobjects to have more photos and to have my container reach the bottom of the window; so don't worry about the container not reaching all the way down to the bottom of the screen.If you want to see the problem, go to My Photography WebpageCSS Code:

.pobject {	width: 98%;	padding: 3px;	border: 1px solid #001100;	text-align: left;	margin-top: 15px;}.pobject p {	padding-top: 5px; 	}.pobject p img {		float: left;	margin-right: 10px;}table img {	margin-top: 10px;}.pobject a img{		border: 1px solid #001100;}

HTML Code:

<div id="preamble">			<br/><h2>Click On A Thumbnail To See The Whole Photo</h2>				 <div class="pobject">				 			<h2>Squirrels</h2>							<p><a href="stubby01.html"><img src="images/stubby_01_thumb.jpg" alt="Stubby the Squirrel" title="Stubby the Squirrel"/></a><a href="stubby02.html"><img src="images/stubby_02_thumb.jpg" alt="Stubby the Squirrel" title="Stubby the Squirrel"/></a><a href="squirrel01.html"><img src="images/squirrel_01_thumb.jpg" alt="Squirrel on a Tree" title="Squirrel on a Tree"/></a><a href="squirrel02.html"><img src="images/squirrel_02_thumb.jpg" alt="Squirrel Eating Some Food" title="Squirrel Eating Some Food"/></a></p>							<p><a href="squirrel04.html"><img src="images/squirrel_04_thumb.jpg" alt="Squirrel Getting Some Food" title="Squirrel Getting Some Food"/></a><a href="squirrel03.html"><img src="images/squirrel_03_thumb.jpg" alt="Squirrel Hiding" title="Squirrel Hiding"/></a><a href="albino01.html"><img src="images/albino_01_thumb.jpg" alt="Albino Squirrel" title="Albino Squirrel"/></a><a href="albino02.html"><img src="images/albino_02_thumb.jpg" alt="Albino Squirrel" title="Albino Squirrel"/></a></p>				 </div>				 				 <p/>		 </div>

I'm not sure if that's all the code you need to see the problem or not. If you would like me to put all of the page's code in here, let me know and I'll add it. Thanks for your help.Mike

[DarkElf]

I can't see the problem immediately, but its likely to be something you've missed out. A fair few problems between browsers arise when they apply different css defaults to values; the IE default gives you the desired effect but the firefox default doesn't so you need to make sure you define the problem value.Although Firefox is a better browser, I must admit I always find problems occur in Firefox more than IE, the best way around this is test your scripts in Firefox and other browsers from the beginning. Its a pain if you've been writing a script and testing it in IE all along, and once its finished you then have a look in Firefox or Opera or something to find that it looks horrible and you've 100 lines of css to find the problem in!

[DarkElf]

Ok, I don't approve of just giving people the answer, on top of which I've not got time to try it all out and test it, but here are a few things you could try playing with.The first thing that leaps out is that you've got all those pictures floating left, floats can commonly cause problems in which things spill out of divs (exactly what you are seeing now). You have to have the float there so try and see if you can find another way to ensure the div stays the right size other than purely expecting it to resize to fit the content. If you are only ever going to use the same number a size of images then you can simply set the dimensions of the div. Otherwise you may need to use a script to resize the div based upon its contents, this can be achieved with both server and client side scripts depending upon your preference.The other thing I notice is that all those images are inside a <p> tag, I'm failing to see the neccesity and this may also be possibly causing problems. You can acheive exactly the same effect without the <p> tags be reassigning some of those values either to the div or to the images.Go away and have a play.

[aspnetguy]

you need to contain your floating elements.

<div>  <img src="something.gif" style="float:left" alt=""/></div>

This will spill out of the div if the image is bigger thant he div. Inorder to contain the image inside the div you need to do this.

<div>  <img src="something.gif" style="float:left" alt=""/>  <br style="clear:left"/></div>

At the end of your floated elements you need to clear the floats with a <br>Hope this helps

[SCSnare]

Thank you very much!Mike

[dcole.ath.cx]

Does Linux FireFox parse CSS differently than Windows FireFox? Because I have a Text logo on my page and it is Large Large in Windows but on Linux it is size 3 or 4... so small it's like a put two "."s