Hi Alan! Thank you so much for your generous help with my drop down nav. I especially appreciate you taking the time to show me what the removing floats technique does. I am going to have to study your reply to fully understand the changes you made to the css and why it works (I hate being a beginner, but what else can I do?), but one thing I can do right now is put a transparent background on my menu images!
Best Wishes, and thank you again, Ellen > ------------------------------ > > Message: 21 > Date: Sun, 09 Sep 2007 11:27:03 -0700 > From: Alan Gresley <[EMAIL PROTECTED]> > Subject: Re: [css-d] drop down nav > To: [email protected] > Message-ID: > <[EMAIL PROTECTED]> > > Content-Type: TEXT/plain; CHARSET=US-ASCII > > Ellen Pham wrote: > > > Hi all, > > > > This is my first web site, and I haven't been able to get this drop down > > nav list to behave > > properly in IE. It behaves better in mozilla, but still not great (for > > example, the background of > > the drop down nav doesn't resize when the # of items in the list gets > > shorter, making the space > > between "Doll Chat" and "Contact" look funny). Will someone take a look and > > tell me where I have > > gone wrong? > > > > http://lovelydollcompany.com/ > > > > Thank you! > > > > Ellen > > > > PS I know the site should be using more css and less tables... I'm working > > on it (actually, I'm > > hoping the new version of Dreamweaver CS3 will have a nice, unstyled > > template that will solve all > > my problems, but I have to install more RAM to run it) > > Hi Ellen > > I have played around with the CSS (sliced it to pieces), and rearrange some > of the code. > > <http://css-class.com/x/doll/lovelydollcompany2.htm> > > Working the same now in IE7, FF and Opera. You had a negative left margin on > the #left float containing the menu and this caused the #left element to > drift slightly out of the viewpoint on the left when the viewpoint was > narrowed far enough. The reason you this was obviously to not have the menu > overlap the baby doll image. The lasted demo shows that the menu is slightly > overlapping the baby doll image. Can those menu images have a transparent > background instead of a pink background. This overlapped of the image I find > ok, since all background colors have been removed. > > Please note that I have removed all font size 12px. This causes IE to freeze > the font. > > At this point the menu is not highly accessible. It can not be tabbed through > and if images are disabled, the main menu images items don't show. > > Please note that both #left and #right (blue border) floats has the Georg > Sorten's removing floats technique [1] employed using negative margins. The > reason is that the divs containing the baby doll image have hasLayout with a > width specified. The removing the floats technique counters the bug where > elements with hasLayout don't flow around floats [2] causing the hasLayout > elements to drop below or be shifted by floats. Please see the demo without > these negative margins. Mote how the #left float forces the image divs to be > pushed right and the #right float forces the image divs downwards. > > <http://css-class.com/x/doll/lovelydollcompany3.htm> > > Now the removing floats technique does wonders for Firefox to (more so then > IE would you believe). Initially the baby doll image is well down the page > and when the menu items are hovered, the images drops more. > > [1] <http://www.gunlaug.no/contents/wd_chaos_03.html> > > [2] <http://www.satzansatz.de/cssd/onhavinglayout.html#nextfloat> > > How IE6 will respond to the changes is a mystery to me. I hope this helps. > > Kind Regards, Alan > http://css-class.com/ > > > > ------------------------------ _________________________________________________________________ Can you find the hidden words? Take a break and play Seekadoo! http://club.live.com/seekadoo.aspx?icid=seek_wlmailtextlink ______________________________________________________________________ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
