tags:

views:

10

answers:

1

Hello all,

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

+1  A: 

set width on #nav-primary .wrapper css class to 980px(which is the width of your image)

Vinay B R
Hello Vinay,May you tell me why I have to set width in order to make the horizontal bar show up?thank you
q0987
the browser shows scroll bars only when it detects that page contents are larger than what it can show. Background css on the other hand takes whatever width it can get which is decided by the html tag on which it is set. so in your case even though the background image was larger than your screen width the div element on which it was set could render within the browser s width.Hope this answers ur question
Vinay B R