Browser ctrl+f find on the page shows result behind the static header

Question

I have created a page, which has a Header, that stays where it is, even if I scroll the page.

The issue is, when I do a browser based word find by hitting Ctrl+f key, and try to search something on my webpage, the search goes behind the Header div. And I have scroll down to see the searched work (which gets highlighted for the part the browser searched).

I noticed that gmail has a header also, which also stays stationary on scroll of the page, and they do handle this "find" issue as well.

Any suggestions of how can I fix this.

Providing a sample source of my page below:

    <html>

<head>
<style> 
#masthead {
    background-color: #131623;
    border-bottom: 4px solid #FFFFFF;
    border-top: 0 none;
    left: 0;
    min-width: 980px;
    position: fixed;
    top: 0;
    width: 100%;
}
#masthead {
    border-bottom: 0 none;
    border-top: 4px solid #171A23;
    left: 0;
    min-width: 980px;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 900;
}
#masthead {
    border-bottom: medium none;
    border-top: 0 none;
    box-shadow: none;
    overflow: visible;
    position: fixed;
}
#masthead {
    background-color: #131623;
    border-bottom: 4px solid #FFFFFF;
    border-top: 1px solid #666666;
    left: 0;
    min-width: 980px;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 900;
}

div, p, span, a, li, strong {
    font-family: Arial,sans-serif;
}

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, li, fieldset, form, label, legend {
    border: 0 none;
    font-size: inherit;
    margin: 0;
    outline: 0 none;
    padding: 0;
    vertical-align: baseline;
}
</style>
</head>
<body>
<div id="masthead">
  <div id="universal-nav" style="height:40px; background-color:#eaeaea;" >

  </div>
  <div class="menu-subtabs" style="height:30px; background-color:#fafafa;"">
        <h2>SalesOne</h2>


  </div>
</div>
</br></br></br></br></br>
<table border="0" summary="Content Block">
    <tr>
        <td>
            <p xmlns="">
                <a href="#Win">Win Summary</a>
                <br/>
                <a href="#Client">Client</a>

                <br/>
                <a href="#Overview">Project Overview</a>
                <br/>
            </p>
            <p xmlns="" id="Win">
                <strong>
                    <font color="#008000">Win Summary</font>
                </strong>

            </p>
            <p xmlns="">
                Located in Norway, Yara International ASA is the world&#153;s leading chemical company that converts energy, natural minerals and nitrogen from the air into essential products for farmers and industrial customers. Through their environmental and industrial products, they help safeguard air and water quality and preserve food quality.Located in Norway, Yara International ASA is the world&#153;s leading chemical company that converts energy, natural minerals and nitrogen from the air into essential products for farmers and industrial customers. Through their environmental and industrial products, they help safeguard air and water quality and preserve food quality.Located in Norway, Yara International ASA is the world&#153;s leading chemical company that converts energy, natural minerals and nitrogen from the air into essential products for farmers and industrial customers. Through their environmental and industrial products, they help safeguard air and water quality and preserve food quality.Located in Norway, Yara International ASA is the world&#153;s leading chemical company that converts energy, natural minerals and nitrogen from the air into essential products for farmers and industrial customers. Through their environmental and industrial products, they help safeguard air and water quality and preserve food quality.Located in Norway, Yara International ASA is the world&#153;s leading chemical company that converts energy, natural minerals and nitrogen from the air into essential products for farmers and industrial customers. Through their environmental and industrial products, they help safeguard air and water quality and preserve food quality.Located in Norway, Yara International ASA is the world&#153;s leading chemical company that converts energy, natural minerals and nitrogen from the air into essential products for farmers and industrial customers. Through their environmental and industrial products, they help safeguard air and water quality and preserve food quality.Located in Norway, Yara International ASA is the world&#153;s leading chemical company that converts energy, natural minerals and nitrogen from the air into essential products for farmers and industrial customers. Through their environmental and industrial products, they help safeguard air and water quality and preserve food quality.Located in Norway, Yara International ASA is the world&#153;s leading chemical company that converts energy, natural minerals and nitrogen from the air into essential products for farmers and industrial customers. Through their environmental and industrial products, they help safeguard air and water quality and preserve food quality.Located in Norway, Yara International ASA is the world&#153;s leading chemical company that converts energy, natural minerals and nitrogen from the air into essential products for farmers and industrial customers. Through their environmental and industrial products, they help safeguard air and water quality and preserve food quality.Located in Norway, Yara International ASA is the world&#153;s leading chemical company that converts energy, natural minerals and nitrogen from the air into essential products for farmers and industrial customers. Through their environmental and industrial products, they help safeguard air and water quality and preserve food quality.Located in Norway, Yara International ASA is the world&#153;s leading chemical company that converts energy, natural minerals and nitrogen from the air into essential products for farmers and industrial customers. Through their environmental and industrial products, they help safeguard air and water quality and preserve food quality.Located in Norway, Yara International ASA is the world&#153;s leading chemical company that converts energy, natural minerals and nitrogen from the air into essential products for farmers and industrial customers. Through their environmental and industrial products, they help safeguard air and water quality and preserve food quality.Located in Norway, Yara International ASA is the world&#153;s leading chemical company that converts energy, natural minerals and nitrogen from the air into essential products for farmers and industrial customers. Through their environmental and industrial products, they help safeguard air and water quality and preserve food quality.Located in Norway, Yara International ASA is the world&#153;s leading chemical company that converts energy, natural minerals and nitrogen from the air into essential products for farmers and industrial customers. Through their environmental and industrial products, they help safeguard air and water quality and preserve food quality.Located in Norway, Yara International ASA is the world&#153;s leading chemical company that converts energy, natural minerals and nitrogen from the air into essential products for farmers and industrial customers. Through their environmental and industrial products, they help safeguard air and water quality and preserve food quality.Located in Norway, Yara International ASA is the world&#153;s leading chemical company that converts energy, natural minerals and nitrogen from the air into essential products for farmers and industrial customers. Through their environmental and industrial products, they help safeguard air and water quality and preserve food quality.Located in Norway, Yara International ASA is the world&#153;s leading chemical company that converts energy, natural minerals and nitrogen from the air into essential products for farmers and industrial customers. Through their environmental and industrial products, they help safeguard air and water quality and preserve food quality.</p>


            <p xmlns="" id="Client">
                <font color="#008000">
                    <strong>Customer</strong>
                </font>
            </p>
            <p xmlns="">
                <a href="http://www.yara.com/">Yara International ASA</a>Located in Norway, Yara International ASA is the world&#153;s leading chemical company that converts energy, natural minerals and nitrogen from the air into essential products for farmers and industrial customers. Through their environmental and industrial products, they help safeguard air and water quality and preserve food quality.Located in Norway, Yara International ASA is the world&#153;s leading chemical company that converts energy, natural minerals and nitrogen from the air into essential products for farmers and industrial customers. Through their environmental and industrial products, they help safeguard air and water quality and preserve food quality.Located in Norway, Yara International ASA is the world&#153;s leading chemical company that converts energy, natural minerals and nitrogen from the air into essential products for farmers and industrial customers. Through their environmental and industrial products, they help safeguard air and water quality and preserve food quality.Located in Norway, Yara International ASA is the world&#153;s leading chemical company that converts energy, natural minerals and nitrogen from the air into essential products for farmers and industrial customers. Through their environmental and industrial products, they help safeguard air and water quality and preserve food quality.Located in Norway, Yara International ASA is the world&#153;s leading chemical company that converts energy, natural minerals and nitrogen from the air into essential products for farmers and industrial customers. Through their environmental and industrial products, they help safeguard air and water quality and preserve food quality.Located in Norway, Yara International ASA is the world&#153;s leading chemical company that converts energy, natural minerals and nitrogen from the air into essential products for farmers and industrial customers. Through their environmental and industrial products, they help safeguard air and water quality and preserve food quality.Located in Norway, Yara International ASA is the world&#153;s leading chemical company that converts energy, natural minerals and nitrogen from the air into essential products for farmers and industrial customers. Through their environmental and industrial products, they help safeguard air and water quality and preserve food quality.Located in Norway, Yara International ASA is the world&#153;s leading chemical company that converts energy, natural minerals and nitrogen from the air into essential products for farmers and industrial customers. Through their environmental and industrial products, they help safeguard air and water quality and preserve food quality.Located in Norway, Yara International ASA is the world&#153;s leading chemical company that converts energy, natural minerals and nitrogen from the air into essential products for farmers and industrial customers. Through their environmental and industrial products, they help safeguard air and water quality and preserve food quality.Located in Norway, Yara International ASA is the world&#153;s leading chemical company that converts energy, natural minerals and nitrogen from the air into essential products for farmers and industrial customers. Through their environmental and industrial products, they help safeguard air and water quality and preserve food quality.
            </p>


            <p xmlns="" id="Overview">
                <strong>
                    <font color="#008000">Project Overview</font>
                </strong>
            </p>
            <p xmlns="">
                ITS Enterprise Services - security services will provide hosted and managed services as part of SO project for data center hosting and management. The security components include:</p>

        </td>

    </tr>
</table>
</body>
</html>
</html>

Thanks in advance, Zeeshan

Check the z-index of your header. I notice gmails has it set to 990. — Doug McK, Jan 14 '13 at 10:55
Zeeshan; Please try the code I gave you in my answer, it will do the trick ;) — Christoffer Munkestam, Jan 18 '13 at 20:25
The solution you have provided works fine, but then if I dont want to do the scroll just on the body. But instead I want to do something like what facebook is doing. You can try testing the find on facebook, works in a very different way. — Zeeshan Rang, Jan 21 '13 at 12:03
note that facebook has the same problem, if searched word is under the header, page will not be scrolled when word is focused by search — dmi3y, Jan 22 '13 at 16:20
In your question you refer to gmail and asks how to make it like that, and my answer targeting exactly that! If my answer works at the same way gmail does, you should mark it as the solution to your question. — Christoffer Munkestam, Jan 25 '13 at 09:39

score 10 · Answer 1 · answered Jan 14 '13 at 10:59

10

By the way you describe it I imagine that you overlay the header div over the page using position: fixed and z-index, or perhaps using javascript.

Instead, try the following:

<div class="header">this is the header</div>
<div class="content" style="overflow: scroll;">
  this is the content div, if the content becomes to large it will scroll
</div>

The overflow: scroll attribute will make a div scrollable, instead of the whole page. This will keep your header visible, without putting content behind the header.

Hope this helps!

answered Jan 14 '13 at 10:59

rmhartog

2,293
12
19

Hi, this did not fix the issue. – Zeeshan Rang Jan 17 '13 at 13:26
@ZeeshanRang When setting the proper styles, this is the way to fix your problem, as you can see [here](http://jsfiddle.net/Qbchg/). Kindly show the code that you've tried and we can see what styles are missing. – rmhartog Jan 18 '13 at 10:51

Christoffer Munkestam · Accepted Answer · 2013-01-18T08:03:11.903

Gmail has a div with overflow scroll, so they never hide anything under their header. You should do so too, by not using position fixed and let the content part be as big as it can without go outside of your window viewport. Try something like this:

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
<style> 
#masthead {
    background-color: #131623;
    border-bottom: 4px solid #FFFFFF;
    border-top: 0 none;
    min-width: 980px;
    width: 100%;
}

div, p, span, a, li, strong {
    font-family: Arial,sans-serif;
}

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, li, fieldset, form, label, legend {
    border: 0 none;
    font-size: inherit;
    margin: 0;
    outline: 0 none;
    padding: 0;
    vertical-align: baseline;
}

#content{
    overflow: scroll;
    overflow-x: hidden;
}
</style>

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function () {
        var head = $('#masthead').height(),
        remaining_height = parseInt($(window).height() - head);
        $('#content').height(remaining_height);
    });
</script>
</head>
<body>
<div id="masthead">
  <div id="universal-nav" style="height:40px; background-color:#eaeaea;" >

  </div>
  <div class="menu-subtabs" style="height:30px; background-color:#fafafa;"">
        <h2>SalesOne</h2>


  </div>
</div>
    <div id="content">
<table border="0" summary="Content Block">
    <tr>
        <td>
            <p xmlns="">
                <a href="#Win">Win Summary</a>
                <br/>
                <a href="#Client">Client</a>

                <br/>
                <a href="#Overview">Project Overview</a>
                <br/>
            </p>
            <p xmlns="" id="Win">
                <strong>
                    <font color="#008000">Win Summary</font>
                </strong>

            </p>
            <p xmlns="">
                Located in Norway, Yara International ASA is the world&#153;s leading chemical company that converts energy, natural minerals and nitrogen from the air into essential products for farmers and industrial customers. Through their environmental and industrial products, they help safeguard air and water quality and preserve food quality.Located in Norway, Yara International ASA is the world&#153;s leading chemical company that converts energy, natural minerals and nitrogen from the air into essential products for farmers and industrial customers. Through their environmental and industrial products, they help safeguard air and water quality and preserve food quality.Located in Norway, Yara International ASA is the world&#153;s leading chemical company that converts energy, natural minerals and nitrogen from the air into essential products for farmers and industrial customers. Through their environmental and industrial products, they help safeguard air and water quality and preserve food quality.Located in Norway, Yara International ASA is the world&#153;s leading chemical company that converts energy, natural minerals and nitrogen from the air into essential products for farmers and industrial customers. Through their environmental and industrial products, they help safeguard air and water quality and preserve food quality.Located in Norway, Yara International ASA is the world&#153;s leading chemical company that converts energy, natural minerals and nitrogen from the air into essential products for farmers and industrial customers. Through their environmental and industrial products, they help safeguard air and water quality and preserve food quality.Located in Norway, Yara International ASA is the world&#153;s leading chemical company that converts energy, natural minerals and nitrogen from the air into essential products for farmers and industrial customers. Through their environmental and industrial products, they help safeguard air and water quality and preserve food quality.Located in Norway, Yara International ASA is the world&#153;s leading chemical company that converts energy, natural minerals and nitrogen from the air into essential products for farmers and industrial customers. Through their environmental and industrial products, they help safeguard air and water quality and preserve food quality.Located in Norway, Yara International ASA is the world&#153;s leading chemical company that converts energy, natural minerals and nitrogen from the air into essential products for farmers and industrial customers. Through their environmental and industrial products, they help safeguard air and water quality and preserve food quality.Located in Norway, Yara International ASA is the world&#153;s leading chemical company that converts energy, natural minerals and nitrogen from the air into essential products for farmers and industrial customers. Through their environmental and industrial products, they help safeguard air and water quality and preserve food quality.Located in Norway, Yara International ASA is the world&#153;s leading chemical company that converts energy, natural minerals and nitrogen from the air into essential products for farmers and industrial customers. Through their environmental and industrial products, they help safeguard air and water quality and preserve food quality.Located in Norway, Yara International ASA is the world&#153;s leading chemical company that converts energy, natural minerals and nitrogen from the air into essential products for farmers and industrial customers. Through their environmental and industrial products, they help safeguard air and water quality and preserve food quality.Located in Norway, Yara International ASA is the world&#153;s leading chemical company that converts energy, natural minerals and nitrogen from the air into essential products for farmers and industrial customers. Through their environmental and industrial products, they help safeguard air and water quality and preserve food quality.Located in Norway, Yara International ASA is the world&#153;s leading chemical company that converts energy, natural minerals and nitrogen from the air into essential products for farmers and industrial customers. Through their environmental and industrial products, they help safeguard air and water quality and preserve food quality.Located in Norway, Yara International ASA is the world&#153;s leading chemical company that converts energy, natural minerals and nitrogen from the air into essential products for farmers and industrial customers. Through their environmental and industrial products, they help safeguard air and water quality and preserve food quality.Located in Norway, Yara International ASA is the world&#153;s leading chemical company that converts energy, natural minerals and nitrogen from the air into essential products for farmers and industrial customers. Through their environmental and industrial products, they help safeguard air and water quality and preserve food quality.Located in Norway, Yara International ASA is the world&#153;s leading chemical company that converts energy, natural minerals and nitrogen from the air into essential products for farmers and industrial customers. Through their environmental and industrial products, they help safeguard air and water quality and preserve food quality.Located in Norway, Yara International ASA is the world&#153;s leading chemical company that converts energy, natural minerals and nitrogen from the air into essential products for farmers and industrial customers. Through their environmental and industrial products, they help safeguard air and water quality and preserve food quality.</p>


            <p xmlns="" id="Client">
                <font color="#008000">
                    <strong>Customer</strong>
                </font>
            </p>
            <p xmlns="">
                <a href="http://www.yara.com/">Yara International ASA</a>Located in Norway, Yara International ASA is the world&#153;s leading chemical company that converts energy, natural minerals and nitrogen from the air into essential products for farmers and industrial customers. Through their environmental and industrial products, they help safeguard air and water quality and preserve food quality.Located in Norway, Yara International ASA is the world&#153;s leading chemical company that converts energy, natural minerals and nitrogen from the air into essential products for farmers and industrial customers. Through their environmental and industrial products, they help safeguard air and water quality and preserve food quality.Located in Norway, Yara International ASA is the world&#153;s leading chemical company that converts energy, natural minerals and nitrogen from the air into essential products for farmers and industrial customers. Through their environmental and industrial products, they help safeguard air and water quality and preserve food quality.Located in Norway, Yara International ASA is the world&#153;s leading chemical company that converts energy, natural minerals and nitrogen from the air into essential products for farmers and industrial customers. Through their environmental and industrial products, they help safeguard air and water quality and preserve food quality.Located in Norway, Yara International ASA is the world&#153;s leading chemical company that converts energy, natural minerals and nitrogen from the air into essential products for farmers and industrial customers. Through their environmental and industrial products, they help safeguard air and water quality and preserve food quality.Located in Norway, Yara International ASA is the world&#153;s leading chemical company that converts energy, natural minerals and nitrogen from the air into essential products for farmers and industrial customers. Through their environmental and industrial products, they help safeguard air and water quality and preserve food quality.Located in Norway, Yara International ASA is the world&#153;s leading chemical company that converts energy, natural minerals and nitrogen from the air into essential products for farmers and industrial customers. Through their environmental and industrial products, they help safeguard air and water quality and preserve food quality.Located in Norway, Yara International ASA is the world&#153;s leading chemical company that converts energy, natural minerals and nitrogen from the air into essential products for farmers and industrial customers. Through their environmental and industrial products, they help safeguard air and water quality and preserve food quality.Located in Norway, Yara International ASA is the world&#153;s leading chemical company that converts energy, natural minerals and nitrogen from the air into essential products for farmers and industrial customers. Through their environmental and industrial products, they help safeguard air and water quality and preserve food quality.Located in Norway, Yara International ASA is the world&#153;s leading chemical company that converts energy, natural minerals and nitrogen from the air into essential products for farmers and industrial customers. Through their environmental and industrial products, they help safeguard air and water quality and preserve food quality.
            </p>


            <p xmlns="" id="Overview">
                <strong>
                    <font color="#008000">Project Overview</font>
                </strong>
            </p>
            <p xmlns="">
                ITS Enterprise Services - security services will provide hosted and managed services as part of SO project for data center hosting and management. The security components include:</p>

        </td>

    </tr>
</table>
        </div>
</body>
</html>

score 4 · Answer 3 · answered Jan 23 '13 at 23:21

4

I have a solution but I don't know if you'll like it.

As Default, the opacity of the header will be set to something like... opacity:0.5;, this will make it almost invisible, and if you're searching, and the searchable word happens to be behind it, you'll be able to see it.

When you move the mouse on the header, you can change its opacity to 1.

JQUERY

$("#header").mouseover(function(){

    $("#header").css("opacity","1");
});

$("#header").mouseout(function(){

    $("#header").css("opacity","0.5");
});

You can change the color a little bit too, for example, if it's blue, have a dark blue and a lighter blue, since the color you are using is gray, feels light..

answered Jan 23 '13 at 23:21

Ali Bassam

9,691
23
67
117

like it, and continue this idea, you could catch ctrl+f and than make opacity .5 and after clicking on body back it to 1 again, will provide bin shortly – dmi3y Jan 24 '13 at 17:45
the only drawback, this solution will not work if user use find menu option, what is not common anyway, also not sure about different tablets and mobile devices – dmi3y Jan 24 '13 at 19:26

dmi3y · Answer 4 · 2013-01-22T16:02:59.187

You could not solve this issue the way you want without revising code with suggested workarounds. The problem here is: to fix it straightway you have to 'learn' browser about your markup so find-bar knows about that fixed positioned elements and made additional scrolling. But accessible API to find-bar have only extensions, not html pages. Here is some documentation from Chrome and from Mozilla that could be helpful to read.

And to mention, in addition to suggested markup fix you may go around with own find-bar javascript implementation. More or less working example here and also there is similar workaround used in editor of 9 cloud IDE. So in short you may catch Ctrl + F key hits, disable browser default behavior with stopPropagation() or preventDefault() and than use own implementation.

score 3 · Answer 5 · answered Jan 22 '13 at 22:36

I think all you need to do is add a margin-top to your content (table), i.e.:

<html>

<head>
<style>

#content {
  margin-top:80px;
}

#masthead {
    background-color: #131623;
    border-bottom: 4px solid #FFFFFF;
    border-top: 0 none;
    left: 0;
    min-width: 980px;
    position: fixed;
    top: 0;
    width: 100%;
}
#masthead {
    border-bottom: 0 none;
    border-top: 4px solid #171A23;
    left: 0;
    min-width: 980px;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 900;
}
#masthead {
    border-bottom: medium none;
    border-top: 0 none;
    box-shadow: none;
    overflow: visible;
    position: fixed;
}
#masthead {
    background-color: #131623;
    border-bottom: 4px solid #FFFFFF;
    border-top: 1px solid #666666;
    left: 0;
    min-width: 980px;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 900;
}

div, p, span, a, li, strong {
    font-family: Arial,sans-serif;
}

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, li, fieldset, form, label, legend {
    border: 0 none;
    font-size: inherit;
    margin: 0;
    outline: 0 none;
    padding: 0;
    vertical-align: baseline;
}
</style>
</head>
<body>
<div id="masthead">
  <div id="universal-nav" style="height:40px; background-color:#eaeaea;" >

  </div>
  <div class="menu-subtabs" style="height:30px; background-color:#fafafa;"">
        <h2>SalesOne</h2>


  </div>
</div>
<table id="content" border="0" summary="Content Block">
    <tr>
        <td>
            <p xmlns="">
                <a href="#Win">Win Summary</a>
                <br/>
                <a href="#Client">Client</a>

                <br/>
                <a href="#Overview">Project Overview</a>
                <br/>
            </p>
            <p xmlns="" id="Win">
                <strong>
                    <font color="#008000">Win Summary</font>
                </strong>

            </p>
            <p xmlns="">
                Located in Norway, Yara International ASA is the world&#153;s leading chemical company that converts energy, natural minerals and nitrogen from the air into essential products for farmers and industrial customers. Through their environmental and industrial products, they help safeguard air and water quality and preserve food quality.Located in Norway, Yara International ASA is the world&#153;s leading chemical company that converts energy, natural minerals and nitrogen from the air into essential products for farmers and industrial customers. Through their environmental and industrial products, they help safeguard air and water quality and preserve food quality.Located in Norway, Yara International ASA is the world&#153;s leading chemical company that converts energy, natural minerals and nitrogen from the air into essential products for farmers and industrial customers. Through their environmental and industrial products, they help safeguard air and water quality and preserve food quality.Located in Norway, Yara International ASA is the world&#153;s leading chemical company that converts energy, natural minerals and nitrogen from the air into essential products for farmers and industrial customers. Through their environmental and industrial products, they help safeguard air and water quality and preserve food quality.Located in Norway, Yara International ASA is the world&#153;s leading chemical company that converts energy, natural minerals and nitrogen from the air into essential products for farmers and industrial customers. Through their environmental and industrial products, they help safeguard air and water quality and preserve food quality.Located in Norway, Yara International ASA is the world&#153;s leading chemical company that converts energy, natural minerals and nitrogen from the air into essential products for farmers and industrial customers. Through their environmental and industrial products, they help safeguard air and water quality and preserve food quality.Located in Norway, Yara International ASA is the world&#153;s leading chemical company that converts energy, natural minerals and nitrogen from the air into essential products for farmers and industrial customers. Through their environmental and industrial products, they help safeguard air and water quality and preserve food quality.Located in Norway, Yara International ASA is the world&#153;s leading chemical company that converts energy, natural minerals and nitrogen from the air into essential products for farmers and industrial customers. Through their environmental and industrial products, they help safeguard air and water quality and preserve food quality.Located in Norway, Yara International ASA is the world&#153;s leading chemical company that converts energy, natural minerals and nitrogen from the air into essential products for farmers and industrial customers. Through their environmental and industrial products, they help safeguard air and water quality and preserve food quality.Located in Norway, Yara International ASA is the world&#153;s leading chemical company that converts energy, natural minerals and nitrogen from the air into essential products for farmers and industrial customers. Through their environmental and industrial products, they help safeguard air and water quality and preserve food quality.Located in Norway, Yara International ASA is the world&#153;s leading chemical company that converts energy, natural minerals and nitrogen from the air into essential products for farmers and industrial customers. Through their environmental and industrial products, they help safeguard air and water quality and preserve food quality.Located in Norway, Yara International ASA is the world&#153;s leading chemical company that converts energy, natural minerals and nitrogen from the air into essential products for farmers and industrial customers. Through their environmental and industrial products, they help safeguard air and water quality and preserve food quality.Located in Norway, Yara International ASA is the world&#153;s leading chemical company that converts energy, natural minerals and nitrogen from the air into essential products for farmers and industrial customers. Through their environmental and industrial products, they help safeguard air and water quality and preserve food quality.Located in Norway, Yara International ASA is the world&#153;s leading chemical company that converts energy, natural minerals and nitrogen from the air into essential products for farmers and industrial customers. Through their environmental and industrial products, they help safeguard air and water quality and preserve food quality.Located in Norway, Yara International ASA is the world&#153;s leading chemical company that converts energy, natural minerals and nitrogen from the air into essential products for farmers and industrial customers. Through their environmental and industrial products, they help safeguard air and water quality and preserve food quality.Located in Norway, Yara International ASA is the world&#153;s leading chemical company that converts energy, natural minerals and nitrogen from the air into essential products for farmers and industrial customers. Through their environmental and industrial products, they help safeguard air and water quality and preserve food quality.Located in Norway, Yara International ASA is the world&#153;s leading chemical company that converts energy, natural minerals and nitrogen from the air into essential products for farmers and industrial customers. Through their environmental and industrial products, they help safeguard air and water quality and preserve food quality.</p>


            <p xmlns="" id="Client">
                <font color="#008000">
                    <strong>Customer</strong>
                </font>
            </p>
            <p xmlns="">
                <a href="http://www.yara.com/">Yara International ASA</a>Located in Norway, Yara International ASA is the world&#153;s leading chemical company that converts energy, natural minerals and nitrogen from the air into essential products for farmers and industrial customers. Through their environmental and industrial products, they help safeguard air and water quality and preserve food quality.Located in Norway, Yara International ASA is the world&#153;s leading chemical company that converts energy, natural minerals and nitrogen from the air into essential products for farmers and industrial customers. Through their environmental and industrial products, they help safeguard air and water quality and preserve food quality.Located in Norway, Yara International ASA is the world&#153;s leading chemical company that converts energy, natural minerals and nitrogen from the air into essential products for farmers and industrial customers. Through their environmental and industrial products, they help safeguard air and water quality and preserve food quality.Located in Norway, Yara International ASA is the world&#153;s leading chemical company that converts energy, natural minerals and nitrogen from the air into essential products for farmers and industrial customers. Through their environmental and industrial products, they help safeguard air and water quality and preserve food quality.Located in Norway, Yara International ASA is the world&#153;s leading chemical company that converts energy, natural minerals and nitrogen from the air into essential products for farmers and industrial customers. Through their environmental and industrial products, they help safeguard air and water quality and preserve food quality.Located in Norway, Yara International ASA is the world&#153;s leading chemical company that converts energy, natural minerals and nitrogen from the air into essential products for farmers and industrial customers. Through their environmental and industrial products, they help safeguard air and water quality and preserve food quality.Located in Norway, Yara International ASA is the world&#153;s leading chemical company that converts energy, natural minerals and nitrogen from the air into essential products for farmers and industrial customers. Through their environmental and industrial products, they help safeguard air and water quality and preserve food quality.Located in Norway, Yara International ASA is the world&#153;s leading chemical company that converts energy, natural minerals and nitrogen from the air into essential products for farmers and industrial customers. Through their environmental and industrial products, they help safeguard air and water quality and preserve food quality.Located in Norway, Yara International ASA is the world&#153;s leading chemical company that converts energy, natural minerals and nitrogen from the air into essential products for farmers and industrial customers. Through their environmental and industrial products, they help safeguard air and water quality and preserve food quality.Located in Norway, Yara International ASA is the world&#153;s leading chemical company that converts energy, natural minerals and nitrogen from the air into essential products for farmers and industrial customers. Through their environmental and industrial products, they help safeguard air and water quality and preserve food quality.
            </p>


            <p xmlns="" id="Overview">
                <strong>
                    <font color="#008000">Project Overview</font>
                </strong>
            </p>
            <p xmlns="">
                ITS Enterprise Services - security services will provide hosted and managed services as part of SO project for data center hosting and management. The security components include:</p>

        </td>

    </tr>
</table>
</body>
</html>
</html>

This also enables you to get rid of all those </br>s

that makes code cleanlier, but not helps with find/highlight issue — dmi3y, Jan 23 '13 at 05:21
@dmi3y - it does fix the issue in Chrome, Safari & Opera, but not FF or IE. — ic3b3rg, Jan 23 '13 at 14:19
just tested in Chrome 24.0.1312.52 on win8 http://jsbin.com/ebonev/1, nope it does not worked for me — dmi3y, Jan 23 '13 at 14:25
@dmi3y - it works for me in Chrome 25.0.1364.36 beta-m on win7. Tested with your jsbin. — ic3b3rg, Jan 23 '13 at 14:36
that's really weird, by the way Opera 12.12 same platform is not working as well, but they did better approach in terms of UI, screenshot here http://imageshack.us/f/24/operatest.png/ — dmi3y, Jan 23 '13 at 14:54

Boris · Answer 6 · 2013-01-23T09:21:46.463

3

I think a margin-top on your body should do the trick. It does in chome anyway.

<body style="margin-top: 80px;">
...

edited Jan 23 '13 at 09:21

answered Jan 23 '13 at 09:12

Boris

1,161
9
20

So I tested it more and it only works in chrome. In firefox, i couldn't find anything, but then facebook's trick doesn't work either (search highlights can be behind their header). On IE9 it seems that the header isn't fixed anyway. – Boris Jan 23 '13 at 09:39

score 3 · Answer 7 · answered Jan 23 '13 at 18:56

3

Can you add a Screenshot? If it is the issue, I think it is a bug in that browser.

The browser has to fix it.

Explaination: A website should never be able to overlap a browser control.

See this page for further information: http://labs.neohapsis.com/2012/11/14/browser-event-hijacking/

answered Jan 23 '13 at 18:56

Christian Kuetbach

15,850
5
43
79

yup, that probably could be done in browser, but it looks like heavy logic for small thing, more logically sounds providing some in browser events notifications for find/nightlight so developers could use it and provide correct behavior. – dmi3y Jan 24 '13 at 17:40

score 2 · Answer 8 · answered Jan 24 '13 at 00:36

2

Put your content in an iframe. Then it will scroll seperately and never go under the header.

In theory you can do the same thing with overflow:scroll, but iframes tend to be more robust.

answered Jan 24 '13 at 00:36

dspeyer

2,904
1
18
24

Browser ctrl+f find on the page shows result behind the static header

8 Answers8