Mobile Friendly Website

CSSPLAY

Doing it with style

IE7 RC1 bug fix COMMENTS

Welcome to my Comments Pages

Please note. I get a few hundred emails a week from visitors asking for help, or posing questions on how to modify my demos to suit their application and I read them all. Unfortunately I only have a limited amount of time to spend answering these questions.

So if I do not reply, please do not be offended, and if I do reply then you are one of the lucky ones.

If you are asking for permission to use any of my demonstration then please email me with your request stu{at}cssplay.co.uk.

Post a comment


Current posts

Uwe:-
It seems to be this famous IE-hasLayout-phenomenon described by Ingo Chao, Big John, Holly Bergevin et al. (www.satzansatz.de/cssd/onhavinglayout.html).

In your first example the li's will get hasLayout = true by the width-declaration (width: 100px). To prevent this, you should add width: auto to your rule set. In addition #menu should be inside an outer container, which has position:relative.


The following code works fine in IE7 RC1, Opera 9 and Firefox 1.50x, 2 Beta2:

CSS
#outerContainer { position: relative; }
#menu {...}

#menu li {
display: block;
width: 100px;
width: auto;
position: relative;
}

XHTML
<div id="outerContainer">
<ul id="menu">
<!-- unchanged -->
</ul><!-- /menu -->
</div><!-- /outerContainer -->


Sorry for my english and btw. happy belated birthday! ;-)

Best regards
Uwe
(24.09.2006, 00:21)

Stu:-
Uwe, I will check this out and post it if it works. But it doesn't explain why this works correctly without the links.
I would also like this to work without an outside container.
(24.09.2006, 09:35)

Stu:-
Uwe, it looked as though it worked, but on testing I found that the menu would be lost after the fourth or fifth flyout. This looks like a :hover problem with a bottom margin being added.
It is difficult to see if this is a link or a list margin.
(25.09.2006, 10:32)

Stu:-
I have found probably the best answer so far, and that is to remove all styling from the <li> except for the position:relative; and just style the links. IE7 then behaves itself.
I think it was getting confused with having a list and a link style change on hover.
(26.09.2006, 10:11)



Post

Your comment:

Your Name:

Stu's First Name - 3 letters (required)

Thanks to Alex for this script.

Please enter your comments for this site page.
Please note that all posts are moderated.

Posting rules

HTML is turned off
Maximum word length is 80 characters.
Messages limited to 1200 characters.
Web links should not include 'http://'

Support CSSPLAY

Your donations keep CSS PLAY running.
If your donation is for the use of a demo then please email me with the demo url after making your donation.


CUSTOM SEARCH

Facebook Twitter rss feed Facebook Fan Page