Currently, I am utilizing a simplified version of the Admin LTE Bootstrap Theme in an ASP.NET Web Forms Project. In this project type, only one form tag can be used per page.
The form tag must encapsulate both the Top (Nav) and Bottom (Side Bar Left & Main Content) sections, as these areas contain elements that require the form for proper rendering. Below is a basic layout of the page with named divs to illustrate their relation:
<Body>
<Form>
<header>
<Nav Bar>
<Nav Bar -Right>
</Nav Bar>
</header>
<Wrapper>
<Side Bar -Left>
<Main Content -Right>
</Wrapper>
</Form>
</Body>
Upon enclosing the major divs within the form tag, an issue arises where there is an unwanted style or margin around the edges of the screen, causing my logo image to be pushed down from the nav bar. This is what it currently looks like:
It appears that placing the form tag between the body and header tags is causing this displacement. Unfortunately, there doesn't seem to be anywhere else to position the form tag. Placing the end of the form tag between the body end tag and wrapper end tag is the only viable option. The form tag, when wrapped around bootstrap components, shifts everything below the nav bar.
The framework being used can be found at the following link:
enter link description here
Does anyone have any solutions on preventing the form tag from disrupting the contents of the header tag and forcing them downward? I have attempted to manipulate the CSS styles of the form tag but without success. Any suggestions?