I am testing the following script with FireFox 3.6.8. The problem with the following script is that when the user zooms in, the browser view doesn’t grow at all. Ideally, I expect to see a growing view with horizontal bar on the bottom of the browser. I am sure that I miss some key CSS rules here.
Anyone can help?
<!DOCTYPE html>
<html lang="en">
<head>
<title>Test Zoom In</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style TYPE="text/css">
#nav-primary {
border: border:5px solid red;
background:url("http://static02.linkedin.com/scds/common/u/img/sprite/sprite_global_v3.png") no-repeat scroll 0 -470px transparent;
}
#nav-primary .wrapper {
background:url("http://static02.linkedin.com/scds/common/u/img/sprite/sprite_global_v3.png") no-repeat scroll 0 -510px transparent;
height: 39px;
padding: 0 5px;
}
</style>
</head>
<body>
<div class="member" id="header">
<div class="wrapper">
<div id="nav-primary">
<div class="wrapper">
</div>
</div>
</div>
</div>
</body>
</html>
Thank you
set width on #nav-primary .wrapper css class to 980px(which is the width of your image)