Extra Spaces on Page - Simple Stuff... Options

[ftbadolato]

Hello,

First time poster...

I recently purchased a template, which you can see here:
http://re.eimpactweb.com/index.html

I am converting the template to a .ASPX Master Page, which I have started here:
http://re.eimpactweb.com/default.aspx

If you toggle between the two pages, you'll notice that the search box at the top is not right justified in the .ASPX page as it should be and there is additional white space between the main menu and the first set of images. I am not sure where these formatting inconsistencies are coming from. Other than the addition of some server-side code from the .ASPX page, the code should be identical. I have looked at the pages side-by-side and not seeing where the issue might be. You can see the additional code below that is rendered on the .ASPX page, but this should not be impacting the page in this manner. Any help you can provide is GREATLY appreciated!

Thank you!

CODE

<form name="aspnetForm" method="post" action="default.aspx" id="aspnetForm">
<div>
<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />
<input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKMjEwNDQyMTMxM2RkVaEAr5QwVbi0guKlxt7r0AOPX9U=" />
</div>

<script type="text/javascript">
//<![CDATA[
var theForm = document.forms['aspnetForm'];
if (!theForm) {
    theForm = document.aspnetForm;
}
function __doPostBack(eventTarget, eventArgument) {
    if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
        theForm.__EVENTTARGET.value = eventTarget;
        theForm.__EVENTARGUMENT.value = eventArgument;
        theForm.submit();
    }
}
//]]>
</script>


<script src="/WebResource.axd?d=sny4fDsP01Cb_XHK8gI3zQYFskK6sgF3_-7w8239vtbLCTL5FrAd4iRLp9Ms-wy8QdudAeEGiN5Us7LH6zCm00LxItI1&amp;t=635082976903173947" type="text/javascript"></script>


<script src="/ScriptResource.axd? d=EQFuC1ZVNpabPE_hvOm3tBm4cdL0eFIDeYcgO32SG_1GFF7gcCVxwwhgAmHkN0DKBH5curoPr1ss5h
GHQwrX_6xqFuAuOShIUc1uHkBxo05fmA9MA_X0dc2pAyJQDFGoXIwnvtcG5dOj3D5ccMPrRmN_vNnrxg
yepMEJwjYf3GLEXJ9b0&amp;t=79a3e1ff" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
if (typeof(Sys) === 'undefined') throw new Error('ASP.NET Ajax client-side framework failed to load.');
//]]>
</script>

<script src="/ScriptResource.axd?d=UYlej1zf69bPCDt3OTgVYwI5e-FOTF- zUWQABFwEehxM98YPAFl8x4XNwCyV7SUuPW4FBO6RDdWGqkKsZRLLe4_3bgnGyxqmtMLUQH8yhrDpCro
BtR0sNFryZPyl-xbS0KyevzCq5Dk2ptLdznj7mT7UX2vCO1GOoglvT4qQnRyCGbwG0&amp;t=79a3e1ff" type="text/javascript"></script>
        <script type="text/javascript">
//<![CDATA[
Sys.WebForms.PageRequestManager._initialize('ctl00$ScriptManager1', document.getElementById('aspnetForm'));
Sys.WebForms.PageRequestManager.getInstance()._updateControls([], [], [], 90);
//]]>
</script>

[Christian J]

Hello and welcome...

Other than the addition of some server-side code from the .ASPX page, the code should be identical.

No the code is different:

- The template uses an HTML5 Doctype, the ASPX version XHTML4 Transitional. This may cause subtle rendering differences in browsers.

- The template loads font-awesome.css, the ASPX version instead loads touchTouch.css.

- The template FORM element is inside a <div class="container">, and contains id="search" class="search", the ASPX version is directly inside BODY and just uses id="aspnetForm".

I didn't look at the CSS of the two pages.

BTW the ASPX version has an extra TITLE element that should be removed.

[ftbadolato]

Thank you, Christian, for your response. I sit corrected, you are absolutely right. Here is what I have done per your findings:

- The template uses an HTML5 Doctype, the ASPX version XHTML4 Transitional. This may cause subtle rendering differences in browsers.
I made the doctypes identical between pages.

- The template loads font-awesome.css, the ASPX version instead loads touchTouch.css.
I commented out touchTouch.css.

- The template FORM element is inside a <div class="container">, and contains id="search" class="search", the ASPX version is directly inside BODY and just uses id="aspnetForm".
The form on the .ASPX page you are seeing is a standard auto-generated form for every .ASPX page. You'll notice that the form with id="search" is also on the .ASPX page.

BTW the ASPX version has an extra TITLE element that should be removed.
I could not find this duplication.

After making all of these changes, the page still renders incorrectly. Any other thoughts?

[pandy]

In bootstrap.css you have this.

form {
margin: 0 0 20px;
}

Voilà!

http://re.eimpactweb.com/index-3.html also uses bootstrap.css, but that style rule seems to be overridden by something. Also, the form only contains the search box. In the ASP page it contains the whole head section. Anyway, the easy fix is to just override that margin in another style sheet.

[Christian J]

The form on the .ASPX page you are seeing is a standard auto-generated form for every .ASPX page. You'll notice that the form with id="search" is also on the .ASPX page.

Oh, sorry.

BTW the ASPX version has an extra TITLE element that should be removed.
I could not find this duplication.

It's at the end of the HEAD section.

[ftbadolato]

Hey!....this resolved the space under the image, but the Search form in the header is still not right-justified???

[pandy]

I'm confused. With Iron I get totally different HTML when I view source and when I use the Inspector. How can that bee?

With the inspector the form contains a bunch of scripts and the whole HEADER.

CODE

<form name="aspnetForm" method="post" action="default.aspx" id="aspnetForm">
<div>
<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="">
<input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="">
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKMjEwNDQyMTMxM2RkVaEAr5QwVbi0guKlxt7r0AOPX9U=">
</div>

<script type="text/javascript">
//<![CDATA[
var theForm = document.forms['aspnetForm'];
if (!theForm) {
    theForm = document.aspnetForm;
}
function __doPostBack(eventTarget, eventArgument) {
    if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
        theForm.__EVENTTARGET.value = eventTarget;
        theForm.__EVENTARGUMENT.value = eventArgument;
        theForm.submit();
    }
}
//]]>
</script>


<script src="/WebResource.axd?d=sny4fDsP01Cb_XHK8gI3zQYFskK6sgF3_-7w8239vtbLCTL5FrAd4iRLp9Ms-wy8QdudAeEGiN5Us7LH6zCm00LxItI1&amp;t=635082976903173947" type="text/javascript"></script>


<script src="/ScriptResource.axd? d=EQFuC1ZVNpabPE_hvOm3tBm4cdL0eFIDeYcgO32SG_1GFF7gcCVxwwhgAmHkN0DKBH5curoPr1ss5h
GHQwrX_6xqFuAuOShIUc1uHkBxo05fmA9MA_X0dc2pAyJQDFGoXIwnvtcG5dOj3D5ccMPrRmN_vNnrxg
yepMEJwjYf3GLEXJ9b0&amp;t=79a3e1ff" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
if (typeof(Sys) === 'undefined') throw new Error('ASP.NET Ajax client-side framework failed to load.');
//]]>
</script>

<script src="/ScriptResource.axd?d=UYlej1zf69bPCDt3OTgVYwI5e-FOTF- zUWQABFwEehxM98YPAFl8x4XNwCyV7SUuPW4FBO6RDdWGqkKsZRLLe4_3bgnGyxqmtMLUQH8yhrDpCro
BtR0sNFryZPyl-xbS0KyevzCq5Dk2ptLdznj7mT7UX2vCO1GOoglvT4qQnRyCGbwG0&amp;t=79a3e1ff" type="text/javascript"></script>
        <script type="text/javascript">
//<![CDATA[
Sys.WebForms.PageRequestManager._initialize('ctl00$ScriptManager1', document.getElementById('aspnetForm'));
Sys.WebForms.PageRequestManager.getInstance()._updateControls([], [], [], 90);
//]]>
</script>

        <!--==============================header=================================-->
        <header>
            <div class="headtop">
                <div class="container">
                    <ul class="social">
                        <li>
                            <a class="icon-twitter" href="#"></a>
                        </li>
                        <li>
                            <a class="icon-facebook" href="#"></a>
                        </li>
                        <li>
                            <a class="icon-rss" href="#"></a>
                        </li>
                    </ul>
                    <p class="pull-right"><i class="icon-phone">&nbsp;</i>Call us: <span>(800) 1234-5678</span></p>
                </div>
            </div>
            <div class="container">
                <h1 class="brand_"><a href="/index.html"><img alt="Real Estate Upprisal" src="/img/logo.png"></a></h1>
                
                     <input type="text" onfocus="if(this.value =='' ) this.value=''" onblur="if(this.value=='') this.value=''" value="" name="s">
                     <a class="btn link1" href="#" onclick="document.getElementById('search').submit()">search</a>
                
            </div>
            <div class="container">
                <div class="navbar navbar_ clearfix extra">
                  <div class="nav-collapse nav-collapse_ collapse">
                    <ul class="nav sf-menu sf-js-enabled">
                        <li><a href="/index.html">Home</a><span></span></li><li><a href="/index-1.html" class="sf-with-ul">About<b class="sf-sub-indicator"></b></a><span></span><ul class="sub-menu" style=""><li><a href="#">Lorem ipsum</a></li><li><a href="#">Dolor sit amet</a></li><li><a href="#">Conse ctetur</a></li><li><a href="#">Dipisicing</a></li><li><a href="#">Eeliteiusmod</a></li></ul></li><li><a href="/index-2.html">our blog</a><span></span></li><li><a href="/index-3.html">Services And prices</a><span></span></li><li><a href="/index-4.html">Contacts</a><span></span></li>
                    </ul>
                  </div><select class="select-menu" style="display: none;"><option value="#">Navigate to...</option><option value="http://re.eimpactweb.com/index.html">Home</option><option value="http://re.eimpactweb.com/index-1.html">About</option><option value="http://re.eimpactweb.com/default.aspx#">–Lorem ipsum</option><option value="http://re.eimpactweb.com/default.aspx#">–Dolor sit amet</option><option value="http://re.eimpactweb.com/default.aspx#">–Conse ctetur</option><option value="http://re.eimpactweb.com/default.aspx#">–Dipisicing</option><option value="http://re.eimpactweb.com/default.aspx#">–Eeliteiusmod</option><option value="http://re.eimpactweb.com/index-2.html">our blog</option><option value="http://re.eimpactweb.com/index-3.html">Services And prices</option><option value="http://re.eimpactweb.com/index-4.html">Contacts</option></select>
                </div>
            </div>
        </header></form>

Viewing source I get this.

CODE

                <form id="search" class="search" action="/search.php" method="GET" accept-charset="utf-8">
                     <input type="text" onfocus="if(this.value =='' ) this.value=''" onblur="if(this.value=='') this.value=''" value="" name="s" />
                     <a class="btn link1" href="#" onclick="document.getElementById('search').submit()">search</a>
                </form>

The last is what I also get with other browsers. So that must be the true source.

In the template the search form seems to be floated right, but I don't find where they do it. Anyway, you could just add 'float: right' to a rule for the form. Or create a new rule.