I think it has something to do with the fact that your image widths are
declared in HTML and not in your CSS. For a CSS float to work correctly, a
width has to be declared. Otherwise, the spec says the width should tend
toward 0, even though in some browsers it would tend toward 100%. In other
words, you can't predict how a browser would react.
Take the width and heights out of your images and put the width into the
css.
#main img {float:left border-style:solid, border-width: 2px;
border-color:#000000 }
#main .image1 { width:100px; }
#main .image { border-left-width:0px; width:100px; }
That still isn't solving the problem, but it does simplify your CSS, and the
reason is that IE6 treats Width as a min-width. It expands. Also for some
reason, IE doesn't allow you to clear and set a float on the same element
So for it to work correctly on all browsers, change your HTML to:
<div class="image"><a href="index.cfm?page=images&group=Misc"><img
src="gfx/misc_2.jpg" alt="Misc" name="Misc" width="100" height="100"
border="0" id="Misc"
onmouseover="MM_swapImage('Misc','','gfx/misc_1.jpg','NamePlate','','gfx/mis
c_text.gif',1)" onmouseout="MM_swapImgRestore()" /></a></div>
<br />
<div class="nameplate"><a href="mailto:[EMAIL PROTECTED]"><img
src="gfx/namePlate.gif" alt="Jay Smith" name="NamePlate" width="125"
height="23" border="0" id="NamePlate" /></a></div>
Then add your CSS as follows:
#main .image { float:left; border-style:solid; border-width:2px;
border-left-width:0px; width: 100px; border-color:#000000 }
#main br{
margin:0;
padding:0;
display:inline;
clear: both;
}
#main .nameplate { float:right; width: 125px;}
It would have probably been easier if you worked with structural HTML rather
than a bunch of Div's. Structural HTML tends to help solve problems like
this easier rather than having to introduce more HTML into the process.
Sandra Clark
==============================
http://www.shayna.com
Training in Cascading Style Sheets and Accessibility
-----Original Message-----
From: James Smith [mailto:[EMAIL PROTECTED]
Sent: Tuesday, December 12, 2006 8:17 AM
To: CF-Community
Subject: CSS Issue
Could someone with a knowledge of CSS have a quick look at
http://www.jaysphotography.org.uk in FF and IE and let me know why IE is
messing up the positioning? (The FF version is what I want it to look like).
Cheers.
--
Jay
http://www.jaysphotography.org.uk
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~|
Create robust enterprise, web RIAs.
Upgrade & integrate Adobe Coldfusion MX7 with Flex 2
http://ad.doubleclick.net/clk;56760587;14748456;a?http://www.adobe.com/products/coldfusion/flex2/?sdid=LVNU
Archive:
http://www.houseoffusion.com/groups/CF-Community/message.cfm/messageid:222061
Subscription: http://www.houseoffusion.com/groups/CF-Community/subscribe.cfm
Unsubscribe:
http://www.houseoffusion.com/cf_lists/unsubscribe.cfm?user=11502.10531.5
