On Mon, Feb 20, 2012 at 12:33 AM, Ed Goodson <e...@copywritecolombia.com> wrote: > Hi all > I have been able to replicate the gap in ie7 using a third party ie testing > program I attach the screen shot here: > > http://alluresurgerycenter.com/ie7.jpg > > Why is there this gap in ie7? > www.alluresurgerycenter.com > > Thank you
Short version: Set text-align: left for li.haschildren. Read on if you want to see how I arrived at that conclusion... It's interesting that I can't reproduce this problem in IE9's IE7 mode. Only in IETester and real IE7. I guess the IETester folks deserve some credit for that. http://www.my-debugbar.com/wiki/IETester/HomePage I can't figure out exactly why it's happening. I can only say that I've seen IE act weird before with regard to absolute positioning if you don't tell it precisely where to place the elements. I tried to figure it out. The size of the gap is about 110px, but I couldn't find any margin or padding that accounts for that. The specification doesn't clearly define what's supposed to happen when an absolutely positioned element has one of its positions set to auto. It does give an example, starting with "might result in something like", which seems to imply that the property defined as "auto" would be relative to where it would have been if it were not absolutely positioned... confused yet? I am. http://www.w3.org/TR/CSS21/visuren.html#propdef-left http://www.w3.org/TR/CSS21/visuren.html#comp-abspos IE7 seems to be putting it farther to the left than where it would be if it wasn't absolutely positioned. Then, your left margin is moving it to the right, creating that gap... There's a clue here, somehow... The displacement is exactly half the width of the element. //////////////////////////////////////////////////////////////////////////////// EUREKA!! #main_top had text-align: center, so all of its children did, too. Since the positioned element was supposed to be centered, IE7 thought it was the element's center that should have the left position set to auto... or something like that... I'm confused, but the easiest solution is to set text-align: left on li.haschildren. See Internet Explorer _does_ make sense... you just have to turn your brain inside-out first. :) //////////////////////////////////////////////////////////////////////////////// I did fix it in my testing environment, though... - Add position: relative to #suckerfishnav. - Add position: relative to li.haschildren. There currently aren't any styles set for this class - Set the left margin on "#suckerfishnav li ul ul" to 0. You're using both absolute positioning and margin to position your sub-menu... it's confusing. That's at approximately line 62 of main.css. - Set left to 0px for "#suckerfishnav li:hover ul". That's the first drop-down. - Set left to 220px for "li li:hover ul". That's the second level drop-down. It looks like you're set up for a lot deeper menu levels, but it's really hard to read your CSS code. I recommend you add some meaningful class names so that you can do away with selectors like "#suckerfishnav li.sfhover ul ul ul ul". I think it'll save you a lot of time and effort later. You can tell I write these paragraphs and sentences in completely random order while I'm working on a problem rather than after I figure it out, right? It's my particular brand of insanity. -- Vince Aggrippino a.k.a. Ghodmode http://www.ghodmode.com ______________________________________________________________________ css-discuss [css-d@lists.css-discuss.org] 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/
