White Space Between the Title and Web Browsers

White Space between the Title and Web Browsers

I copied your code locally and replaced the local CSS and JS files with CDN links

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.css" rel="stylesheet"/>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>      
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>        

Then after

$('#' + hash + '_c').addClass('in');

I added

setTimeout(function() {
  window.scrollBy(0,-10);
},0);

(After you expand the desired panel, use scrollBy(0,-10) to scroll up by 10 pixels for example. However, you need to let the browser finishing updating the page layout before invoking scrollBy. This can be achieved using setTimeout with a zero delay).

This works here for me, although sometimes I need to refresh the page to get your accordion code to kick in in the first place.

Why is there still white space between these divs in all browsers except Chrome?

For some reason, the #btnWrapper div was forced to have a greater line-height than necessary in IE and FF. Adding a line-height of (at most) .7em proved to close up the white space (kind of funny because the actual buttons themselves (which are contained within the #btnWrapper div) are rendered with a line height of 1.3em, so this makes no real sense to me, but...).

So in short I simply added said property to the #btnWrapper rule, like so:

#btnWrapper
{
    white-space: nowrap;
    overflow: hidden;
    margin: 0px;
    line-height: .7em;
}

White space at top of page

Add a css reset to the top of your website style sheet, different browsers render some default margin and padding and perhaps external style sheets do something you are not aware of too, a css reset will just initialize a fresh palette so to speak:

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, ol, ul, li, fieldset, form, label, legend, caption {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}

UPDATE: Use the Universal Selector Instead:
@Frank mentioned that you can use the Universal Selector: * instead of listing all the elements, and this selector looks like it is cross browser compatible in all major browsers:

* {
        margin: 0;
        padding: 0;
        border: 0;
        outline: 0;
        font-size: 100%;
        vertical-align: baseline;
        background: transparent;
    }

Add a space to the browser-tab title

Looks like browsers trim leading white space characters, but the unicode 205f medium mathematical space character seems to work:

document.title = '​​\u205f​​​ Takedown';

space between top of browser or frame and document body

Put some styles:

p { margin: 0; padding: 0; }

White space at end of webpage, IE and Chrome show it in a different place?

add the following rule

 div#footer p {
     margin:0;
 }

Why is there white space at the top of my HTML/CSS website?

It's caused by margin collapsing phenomena. See related question. If you remove content of your main.css you will see that layout becomes "normal" (e.g. no white space on top), so normalize.css is not the cause of the issue.

How to fix?

Simply, add this to your normalize.css *{} section. See fiddle.

* {
overflow:hidden; /* or auto */
}

---

Related Topics