[Bf-webcontent] no more flickering

Bart Veldhuizen bart at vrotvrot.com
Thu Mar 3 07:41:02 CET 2005


Hi Johannes,

I think the biggest difference is that 'our' solution is in principle 
CSS only- no javascript required. Unfortunately, IE breaks that 
compatibility, so I had to insert a few lines of javascript to generate 
the onmouseover events for IE (and for IE only). These mouseovers 
change the li styles to li.over; this class is therefore only used for 
IE.. This is also the reason for using the li:hover: it will force CSS 
to display the submenus. Your solution required javascript on all 
platforms and is therefore another type of solution. Personally, I 
prefer the CSS-only solution. If it wasn't for IE, this would be a 
perfect world :)

However, you are right that we should look at your solution as well, so 
please explain what the advantage of your approach is.

By the way, I'm actually not sure why there is a "#mainmenu ul li 
ul:hover { display: block; }" in there; it doesn't seem to have a 
function.

Bart

Op 3-mrt-05 om 1:55 heeft Johannes Langlotz het volgende geschreven:

> Hi Bart and Bart,
>
> I have one question on your css file!
>
> http://neeneenee.de/blender/org/_src/www.css
>
> I don't understand why you use this
>
> #mainmenu ul li ul:hover { display: block; }
> #mainmenu ul li:hover ul { display: block; }
> #mainmenu ul li.over ul  { display: block; }
>
> and this
>
> #mainmenu ul li ul li:hover { display: list-item; }
> #mainmenu ul li ul li.over { display: block; } /* for IE  */
>
> Why li:hover?
>
> *Please do not ignore my stylesheet!* I use "hover" and "diplay: 
> block" only together with <a>! I don't get the idea behind this! 
> Please help me AND please have a look at my stylesheet!
>
> http://www.webminster.de/ext/b3d/mainmenu.css
>
>
> cheers,
>
> Johannes
>
>
>
> Bart Veldhuizen schrieb:
>> Hi Bart,
>> cool - now we're really almost done. I still have an issue with the 
>> e-shop menu on the blender3d.org implementation though. Could you 
>> have a quick look at that? If we can't figure it out right now, I'll 
>> just drop those subpages - they were just an experiment anyway.
>>  From what I can see now, it works okay in the following browsers:
>> Firefox/OSX
>> Safari/OSX
>> Opera 7.5/OSX
>> Linux: (tested by Johannes)
>> Firefox 1.0: 100%
>> Konqueror 3.3: 90% (without any alpha)
>> Bart
>> Op 1-mrt-05 om 23:21 heeft Bart het volgende geschreven:
>>>
>>> The
>>> #mainmenu ul li ul li:hover { display: inline-block; }
>>> is needed for opera 7.x older then 7.5x to open the dropdown but may
>>> #mainmenu ul li ul li:hover { display: list-item; }
>>> seems to work too and could looking better on Safari:
>>> http://www.neeneenee.de/blender/org/
>>>
>>> This style is very tricky, it is need for opera >7.5x, with display: 
>>> block; it causes flickering in FireFox and with inline-block it 
>>> generates brakes in Safari.
>>>
>>> With #mainmenu ul li ul li:hover { display: list-item; } here 
>>> anything runs smooth on IE 6, Opera 7.x and Firefox. hoping this 
>>> will be nice for  Safari too :)
>>>
>>> IE 5.x on Mac is not so much used, most Mac users using Safari or 
>>> FireFox now. So i think IE 5 on Mac could be ignored.
>>>
>>> Bart Veldhuizen schrieb:
>>>
>>> > Hi Bart,
>>> > I the optionSplit only works inside Typo's menuitems, so I 
>>> couldn't get it to work on the top lever wraps. I finally gave up 
>>> and added the following line to the menu items CSS:
>>> >         #topnav_528    ul li {margin-left: -72px;}
>>> > The eshop now works ok in firefox and safari, but it breaks in IE6.
>>> > I also found that the following line breaks the :hover in the 
>>> dropdown menus in Safari:
>>> > #mainmenu ul li ul li:hover { display: inline-block; }
>>> > I didn't need it for either firefox or safari, so do you think we 
>>> can drop it?
>>> > IE5 still behaves very badly on OSX; the page loads, but *very* 
>>> slowly. Does anyone here have an idea what causes it?
>>> _______________________________________________
>>> Bf-webcontent mailing list
>>> Bf-webcontent at projects.blender.org
>>> http://projects.blender.org/mailman/listinfo/bf-webcontent
>> _______________________________________________
>> Bf-webcontent mailing list
>> Bf-webcontent at projects.blender.org
>> http://projects.blender.org/mailman/listinfo/bf-webcontent
> _______________________________________________
> Bf-webcontent mailing list
> Bf-webcontent at projects.blender.org
> http://projects.blender.org/mailman/listinfo/bf-webcontent




More information about the Bf-webcontent mailing list