Color picker не работает в FireFox

[horan]

Здравствуйте! Ребят, на моем сайте http://webcute.ru/menu.html?menu=hor когда переходишь на вкладку "Градиент", colorpicker не отображается нормально именно в FireFox! В остальных браузерах все ок. Кто подскажет почему?

[рони]

horan,
единицы измерения везде есть "px"?

[horan]

horan,
единицы измерения везде есть "px"?

Везде

[рони]

horan,
id="gradient-black" -- id уникально и недолжно повторятся

[horan]

horan,
id="gradient-black" -- id уникально и недолжно повторятся

У меня такого ID нет!

[рони]

horan,
<div class="picker" id="picker">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100%">
<defs>
<linearGradient id="gradient-black" x1="0%" y1="100%" x2="0%" y2="0%">
<stop offset="0%" stop-color="#000000" stop-opacity="1" />
<stop offset="100%" stop-color="#CC9A81" stop-opacity="0" />
</linearGradient>
<linearGradient id="gradient-white" x1="0%" y1="100%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#FFFFFF" stop-opacity="1" />
<stop offset="100%" stop-color="#CC9A81" stop-opacity="0" />
</linearGradient>
</defs>
<rect x="0" y="0" width="100%" height="100%" fill="url(#gradient-white)" />
<rect x="0" y="0" width="100%" height="100%" fill="url(#gradient-black)" />
</svg>
</div>
<div class="picker" id="picker-grad" style="background-color: rgb(0, 107, 255);">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100%">
<defs>
<linearGradient id="gradient-black" x1="0%" y1="100%" x2="0%" y2="0%">
<stop offset="0%" stop-color="#000000" stop-opacity="1" />
<stop offset="100%" stop-color="#CC9A81" stop-opacity="0" />
</linearGradient>
<linearGradient id="gradient-white" x1="0%" y1="100%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#FFFFFF" stop-opacity="1" />
<stop offset="100%" stop-color="#CC9A81" stop-opacity="0" />
</linearGradient>
</defs>
<rect x="0" y="0" width="100%" height="100%" fill="url(#gradient-white)" />
<rect x="0" y="0" width="100%" height="100%" fill="url(#gradient-black)" />
</svg>
</div>

[horan]

horan,
<div class="picker" id="picker">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100%">
<defs>
<linearGradient id="gradient-black" x1="0%" y1="100%" x2="0%" y2="0%">
<stop offset="0%" stop-color="#000000" stop-opacity="1" />
<stop offset="100%" stop-color="#CC9A81" stop-opacity="0" />
</linearGradient>
<linearGradient id="gradient-white" x1="0%" y1="100%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#FFFFFF" stop-opacity="1" />
<stop offset="100%" stop-color="#CC9A81" stop-opacity="0" />
</linearGradient>
</defs>
<rect x="0" y="0" width="100%" height="100%" fill="url(#gradient-white)" />
<rect x="0" y="0" width="100%" height="100%" fill="url(#gradient-black)" />
</svg>
</div>
<div class="picker" id="picker-grad" style="background-color: rgb(0, 107, 255);">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100%">
<defs>
<linearGradient id="gradient-black" x1="0%" y1="100%" x2="0%" y2="0%">
<stop offset="0%" stop-color="#000000" stop-opacity="1" />
<stop offset="100%" stop-color="#CC9A81" stop-opacity="0" />
</linearGradient>
<linearGradient id="gradient-white" x1="0%" y1="100%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#FFFFFF" stop-opacity="1" />
<stop offset="100%" stop-color="#CC9A81" stop-opacity="0" />
</linearGradient>
</defs>
<rect x="0" y="0" width="100%" height="100%" fill="url(#gradient-white)" />
<rect x="0" y="0" width="100%" height="100%" fill="url(#gradient-black)" />
</svg>
</div>

Спасибо,я это понял!Но в моем исходном коде я задаю разные ID. А браузер интерпретирует одинаковые. Интересно! По ходу я что то не догоняю