Sorry, it's a descendant selector
It means all images within the div with an id of #main
<div id="main">
<img />
<img />
</div>
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:222067
Subscription: http://www.houseoffusion.com/groups/CF-Community/subscribe.cfm
Unsubscribe: http://www.houseoffusion.com/cf_lists/unsubscribe.cfm?user=89.70.5
