Any page with scripts in it are adding space to the top.

Question

0.00/5 (No votes)

See more:

Hi all, thanks in advance for any help.

I'm running into a strange scenario where any page that I have implemented JavaScript/jQuery on my .aspx page, my menu is in turn showing a 15 pixel "padding-top".
I am going to link a few screenshots, both of pages without any scripts (i.e. displaying correctly), and also those with scripts (i.e. showing this 15px "padding" to my menu).

First, a screenshot of a correctly displayed menu, note the pixel for the div's height is 29px:
http://s24.postimg.org/p854jsrhh/goodmenu.png[^]

Now, a screenshot of an incorrectly displayed menu, note the pixel for the div's height is 44px (44-29 = 15px difference noted in my introduction):
http://s30.postimg.org/8bytujh2p/badmenu.png[^]

What you should see is the red box I have made on the second link. This spacing only occurs on pages that I have used jQuery on.

I have seen a couple of resources that are somewhat related to this, most relevant being this StackOverflow thread/answer[^], but I did EVERYTHING I could, and couldn't find any astray whitespace, etc., in my MasterPage of my Project.

For reference, my MasterPage <head> looks as follows:

ASP.NET

<%@ Master Language="VB" AutoEventWireup="true" CodeBehind="Site.Master.vb" Inherits="WM_Cube.Site" %>

<!DOCTYPE html>
<html>
<head id="head1" runat="server">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title><%: Page.Title %></title>
    <link rel="shortcut icon" href="~/favicon.ico" />
    <script src="//code.jquery.com/jquery-latest.min.js"></script>
    <script src="//code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
    <!-- Add support for HTML5 elements to old IE -->
    <!--[if lt IE 9]>
        <script>
        document.createElement('header');
        document.createElement('nav');
        document.createElement('section');
        document.createElement('article');
        document.createElement('aside');
        document.createElement('footer');
        document.createElement('hgroup');
        </script>
    <![endif]-->
    <link href="~/Styles/Site.css" type="text/css" rel="Stylesheet"/>
    <meta name="viewport" content="width=device-width"/>
    <asp:ContentPlaceHolder runat="server" ID="HeadContent"></asp:ContentPlaceHolder>
</head>

Posted 14-Jan-14 9:11am

Nicholas Vielbig

Updated 14-Jan-14 9:16am

Ron Beyer

v2

Add a Solution

Comments

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) 15-Jan-14 0:38am

First of all, very nice explanation. Thanks a lot for that. :)

Coming to your problem, do you have an online link to the page? Is it hosted anywhere to test directly. Actually I can use this code, but as I see you have linked one CSS file that is Site.css. Can you upload that file somewhere and give me the link?

Also where is that aspx page code? So, if you can show me that, then I can help you finding the problem. If you have TeamViewer installed, then I can also connect to your system amd try to find out the problem.

Nicholas Vielbig 15-Jan-14 9:41am

Thank you :) Unfortunately the page is not accessible to the public; it uses windows authentication.

I put my CSS file on this site: http://www.sendspace.com/file/56ouen , if you have any issues accessing that please let me know. The menu itself is an asp:menu, with several level 1,2 and 3 menu options.

This aspx code is apart of my MasterPage. TeamViewer - sorry, work computer would undoubtedly block that from getting access :P

Killzone DeathMan 20-Jan-14 11:27am

There is a default margin, etc...
You can reset the CSS: http://meyerweb.com/eric/tools/css/reset/
Have a nice day :)

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)