CSS! The problem is with the webkit, the horizontal menu actually goes up so that it is not visible?

But for some reason this happens in webkit (safari, chrome) browsers, although in opera, IE and Firefox there was still no place, why does this happen and how will it not be treated? ps The menu is rubber, and this should remain. Here is an example.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>Crossbrowsing Menu</title> <style> /* MENU */ div.bmenu { position: absolute; left: 0; top: 0; z-index: 1; width: 100%; height: 6%; background: #c2c2c2; } div.bmenu a { position: relative; display: inline-block; white-space: nowrap; width: 20%; float: left; margin: -6.5% 0 0 0; outline: none;} div.bmenu img { height: 100%; width: 100%; } div.bmenu a:hover { margin: -5% 0 0 0; z-index: 2; } </style> </head> <body> <div class="bmenu"> <a class='mlink' href="#"><img alt='' name="test" border=0 src='menu/test.png'></a></li> <a class='mlink' href="#"><img alt='' name="test" border=0 src='menu/test.png'></a></li> <a class='mlink' href="#"><img alt='' name="test" border=0 src='menu/test.png'></a></li> <a class='mlink' href="#"><img alt='' name="test" border=0 src='menu/test.png'></a></li> <a class='mlink' href="#"><img alt='' name="test" border=0 src='menu/test.png'></a></li> </div> </body> </html> 

alt text

  • I plowed, checked in the corn and in chrome. Attach a screen, and indicate with arrows that it does not roll. - FreeMast

1 answer 1

margin: -X% 0 0 0; Why did they put it in? This is more about the background-position than the element itself.