Keep your HTML, just add a <br /> before the <div class="nameplate"> The CSS changes, but not the HTML.
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 9:42 AM To: CF-Community Subject: RE: CSS Issue 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:222066 Subscription: http://www.houseoffusion.com/groups/CF-Community/subscribe.cfm Unsubscribe: http://www.houseoffusion.com/cf_lists/unsubscribe.cfm?user=89.70.5
