Ok, I may have misread you somewhere, but I have moved all of the compn
elements into "#main img" as you suggested as it has completely messed up
the formatting and now everythign is stacked vertically instead of
horisontally :(
Where did I go wrong?
> 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','NamePlat
e','','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:222065
Subscription: http://www.houseoffusion.com/groups/CF-Community/subscribe.cfm
Unsubscribe: http://www.houseoffusion.com/cf_lists/unsubscribe.cfm?user=89.70.5
