Member Avatar for programmer12

I'm trying to add the tag form to my AP DIVS that contain a input and submit button... But when i added the form tag the whole header gets shift 20px; from top of browser... -_-'

How can I fix this issue?

CODE BELOW:

<html>
<head>
<title>banner-slice</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="css/md.css" rel="stylesheet" type="text/css">
</head>
<body>
<form>
  <!-- End ImageReady Slices -->
  <div style="position:relative;margin-left:auto;margin-right:auto;width:990px;">
    <div id="apDiv1" style="position: absolute; left: 0px; top: 0px; width: 30px; height: 168px; z-index: 1; vertical-align: middle"><img src="images/banner-slice_01.jpg" width="30" height="168" alt=""></div>
    <div id="apDiv2" style="position: absolute; left: 30px; top: 0px; width: 930px; height: 28px; z-index: 2"> <img src="images/banner_02.jpg" width="930" height="28" alt=""> </div>
    <div id="apDiv3" style="position: absolute; left: 960px; top: 0px; width: 30px; height: 168px; z-index: 3; vertical-align: middle"><img src="images/banner-slice_03.jpg" width="30" height="168" alt=""></div>
    <div id="apDiv4" style="position: absolute; left: 30px; top: 28px; width: 930px; height: 11px; z-index: 4"><img src="images/banner-slice_04.jpg" width="930" height="11" alt=""></div>
    <div id="apDiv5" style="position: absolute; left: 30px; top: 39px; width: 377px; height: 89px; z-index: 5; vertical-align: middle"><img src="images/banner-slice_05.jpg" width="377" height="89" alt=""></div>
    <div id="apDiv6" style="position: absolute; left: 407px; top: 39px; width: 318px; height: 77px; z-index: 6; background: #000000; vertical-align: middle"><img src="images/spacer.gif" width="318" height="77" alt=""></div>
    <div id="apDiv7" style="position: absolute; left: 725px; top: 39px; width: 235px; height: 15px; z-index: 7"><img src="images/banner-slice_07.jpg" width="235" height="15" alt=""></div>
    <div id="apDiv8" style="position: absolute; left: 725px; top: 54px; width: 181px; height: 14px; z-index: 8"><img src="images/banner-slice_08.jpg" width="181" height="14" alt=""></div>
    <div id="apDiv9" style="position: absolute; left: 906px; top: 54px; width: 39px; height: 44px; z-index: 9; vertical-align: middle">
      <input name="go" value="" class="go" type="submit">
    </div>
    <div id="apDiv10" style="position: absolute; left: 945px; top: 54px; width: 15px; height: 74px; z-index: 10; vertical-align: middle"><img src="images/banner-slice_10.jpg" width="15" height="74" alt=""></div>
    <div id="apDiv11" style="position: absolute; left: 725px; top: 68px; width: 70px; height: 60px; z-index: 11; vertical-align: middle"><img src="images/banner-slice_11.jpg" width="70" height="60" alt=""></div>
    <div id="apDiv12" style="position: absolute; left: 795px; top: 68px; width: 102px; height: 20px; z-index: 12">
      <input name="search" class="login_input" type="text">
    </div>
    <div id="apDiv13" style="position: absolute; left: 897px; top: 68px; width: 9px; height: 60px; z-index: 13; vertical-align: middle"><img src="images/banner-slice_13.jpg" width="9" height="60" alt=""></div>
    <div id="apDiv14" style="position: absolute; left: 795px; top: 88px; width: 102px; height: 40px; z-index: 14; vertical-align: middle"><img src="images/banner-slice_14.jpg" width="102" height="40" alt=""></div>
    <div id="apDiv15" style="position: absolute; left: 906px; top: 98px; width: 39px; height: 30px; z-index: 15; vertical-align: middle"><img src="images/banner-slice_15.jpg" width="39" height="30" alt=""></div>
    <div id="apDiv16" style="position: absolute; left: 407px; top: 116px; width: 318px; height: 12px; z-index: 16"><img src="images/banner-slice_16.jpg" width="318" height="12" alt=""></div>
    <div id="apDiv17" style="position: absolute; left: 30px; top: 128px; width: 118px; height: 34px; z-index: 17"><img src="images/banner-slice_17.jpg" width="118" height="34" alt=""></div>
    <div id="apDiv18" style="position: absolute; left: 148px; top: 128px; width: 116px; height: 34px; z-index: 18"><img src="images/banner-slice_18.jpg" width="116" height="34" alt=""></div>
    <div id="apDiv19" style="position: absolute; left: 264px; top: 128px; width: 1px; height: 40px; z-index: 19; vertical-align: middle"><img src="images/banner-slice_19.jpg" width="1" height="40" alt=""></div>
    <div id="apDiv20" style="position: absolute; left: 265px; top: 128px; width: 161px; height: 34px; z-index: 20"><img src="images/banner-slice_20.jpg" width="161" height="34" alt=""></div>
    <div id="apDiv21" style="position: absolute; left: 426px; top: 128px; width: 1px; height: 40px; z-index: 21; vertical-align: middle"><img src="images/banner-slice_21.jpg" width="1" height="40" alt=""></div>
    <div id="apDiv22" style="position: absolute; left: 427px; top: 128px; width: 143px; height: 34px; z-index: 22"><img src="images/banner-slice_22.jpg" width="143" height="34" alt=""></div>
    <div id="apDiv23" style="position: absolute; left: 570px; top: 128px; width: 1px; height: 40px; z-index: 23; vertical-align: middle"><img src="images/banner-slice_23.jpg" width="1" height="40" alt=""></div>
    <div id="apDiv24" style="position: absolute; left: 571px; top: 128px; width: 123px; height: 34px; z-index: 24"><img src="images/banner-slice_24.jpg" width="123" height="34" alt=""></div>
    <div id="apDiv25" style="position: absolute; left: 694px; top: 128px; width: 1px; height: 40px; z-index: 25; vertical-align: middle"><img src="images/banner-slice_25.jpg" width="1" height="40" alt=""></div>
    <div id="apDiv26" style="position: absolute; left: 695px; top: 128px; width: 130px; height: 34px; z-index: 26"><img src="images/banner-slice_26.jpg" width="130" height="34" alt=""></div>
    <div id="apDiv27" style="position: absolute; left: 825px; top: 128px; width: 2px; height: 40px; z-index: 27; vertical-align: middle"><img src="images/banner-slice_27.jpg" width="2" height="40" alt=""></div>
    <div id="apDiv28" style="position: absolute; left: 827px; top: 128px; width: 133px; height: 34px; z-index: 28"><img src="images/banner-slice_28.jpg" width="133" height="34" alt=""></div>
    <div id="apDiv29" style="position: absolute; left: 30px; top: 162px; width: 234px; height: 6px; z-index: 29"><img src="images/banner-slice_29.jpg" width="234" height="6" alt=""></div>
    <div id="apDiv30" style="position: absolute; left: 265px; top: 162px; width: 161px; height: 6px; z-index: 30"><img src="images/banner-slice_30.jpg" width="161" height="6" alt=""></div>
    <div id="apDiv31" style="position: absolute; left: 427px; top: 162px; width: 143px; height: 6px; z-index: 31"><img src="images/banner-slice_31.jpg" width="143" height="6" alt=""></div>
    <div id="apDiv32" style="position: absolute; left: 571px; top: 162px; width: 123px; height: 6px; z-index: 32"><img src="images/banner-slice_32.jpg" width="123" height="6" alt=""></div>
    <div id="apDiv33" style="position: absolute; left: 695px; top: 162px; width: 130px; height: 6px; z-index: 33"><img src="images/banner-slice_33.jpg" width="130" height="6" alt=""></div>
    <div id="apDiv34" style="position: absolute; left: 827px; top: 162px; width: 133px; height: 6px; z-index: 34"><img src="images/banner-slice_34.jpg" width="133" height="6" alt=""></div>
    <div id="apDiv35" style="position: absolute; left: 0px; top: 0px; width: 1px; height: 169px; z-index: 35"></div>
    <!-- ImageReady Slices (banner-slice.psd) -->
  </div>
</form>
</body>
</html>
  • 3 Contributors
  • 2 Replies
  • 126 Views
  • 4 Days Discussion Span
  • Latest Post Latest Post by Arkinder

Dani AI

Generated

Quick summary and practical fixes for s situation: wrapping the whole banner in a <form> can introduce extra top space because browsers apply default styles (and a missing DOCTYPE can trigger quirks-mode behaviour). is right that the markup is hard to follow — that makes debugging harder — and is on track with a reset idea (you don't need the universal reset exactly as posted to see results).

First, make sure the page has a proper doctype so browsers use standards mode:

<!DOCTYPE html>

Then use the inspector (Chrome/Firefox devtools) to see which element actually has a top margin. If the form or body shows a non‑zero margin, reset those explicitly:

html, body { margin: 0; padding: 0; }
form { margin: 0; padding: 0; display: block; }

Two layout approaches that avoid the 20px shift:

  • Keep the form local to the inputs instead of wrapping the whole banner. Place the <form> inside the small div that contains the search input and submit button. That prevents the form element from adding any flow-space to the header.
  • If the search area must sit over the banner, absolutely position the form inside the positioned banner container so it does not affect normal flow:
.banner { position: relative; width: 990px; margin: 0 auto; }
.search-form { position: absolute; top: 54px; right: 90px; margin: 0; padding: 0; }

Other quick checks: remove any stray inline vertical-align on block elements, confirm the wrapper div remains position: relative (absolute children position relative to it), and validate the markup (missing tags or stray whitespace can sometimes surface weird shifts). After these fixes, simplify the ImageReady slices as suggested — fewer elements will make future issues much easier to track.

Recommended Answers

All 2 Replies

Member Avatar for macgurl70

Looking at your code, just the number of divs you have defined is extremely confusing and difficult to sift through. After viewing the code in a browser - there are definitely small divs that don't need to be in there.

What does the banner look like with the images? Since I have only seen the framework (screen shot attached) and it really could be cleaned up a lot. While this won't solve the form issue off the bat - it could help find out where the issue is coming from. Start with the easiest fixes first and see how the affect the page.

The first one here - would be cleaning up the code so it is easier to read, correct and update later on.

BannerSS.jpg 46.34 KB
Member Avatar for Arkinder

Every browser, by default adds margin and padding to different elements. Set this to 0 by using this CSS rule.

* {
    margin: 0;
    padding: 0;
}

This is known as the universal rule or selector, and It affects every element on the page.


Regards, Arkinder

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.