That is what I have done, the only HTML change I have made is the extra BR.
> Keep your HTML, just add a <br /> before the <div
> class="nameplate"> The CSS changes, but not the HTML.
> 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:222069
Subscription: http://www.houseoffusion.com/groups/CF-Community/subscribe.cfm
Unsubscribe:
http://www.houseoffusion.com/cf_lists/unsubscribe.cfm?user=11502.10531.5
