Member Avatar for jeffherron

Please view the following URL in IE8 and then in any other browser.

It looks fine in every browser except for IE8. The culprit is the extra space being included after the </form> tag.

Does anyone know how to remove this space from IE8? I have tried all the usual tricks of adding margin:0 and padding:0 and even display:inline to the form tag, and nothing seems to work.

Any help would be greatly appreciated.

  • 6 Contributors
  • 5 Replies
  • 341 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by prateeksha

Dani AI

Generated

Brief diagnosis: the rendering difference is almost always caused by invalid/fragile HTML or by layout rules that render slightly differently in IE8. As noted, nested <form> elements are invalid and can produce unpredictable gaps; 's validator point is relevant — fixing the markup and DOCTYPE usually removes browser-specific artifacts. 's suggestion to stop using tables for pure layout is also sound for long‑term stability.

Concrete actions that reliably fix this class of problem:

  • Normalize the document into standards mode (explicit DOCTYPE).
  • Eliminate nested forms — either move the inner form outside the outer one or replace the inner form with a non-form container and handle its submit with script. HTML5’s form attribute can decouple inputs from DOM nesting in modern browsers, but it is not supported in IE8, so avoid relying on it if IE8 must be supported.
  • After markup fixes, re-check with the validator and with IE8’s Developer Tools (F12) to inspect computed box sizes and any remaining margin/line-height.

Minimal examples (illustrative):

Before (invalid):

<form id="outer">
  ...
  <form id="inner"> ... </form>
</form>

Option A — move forms apart (valid):

<form id="outer"> ... </form>
<form id="inner"> ... </form>

Option B — keep one form and convert the inner area to a container + script:

<form id="outer">
  ...
  <div class="innerControls"> ... </div>
</form>

Temporary CSS workarounds if an immediate fix is required (not a substitute for valid HTML):

/* remove inline-block gap */
form { display:inline-block; vertical-align:top; }

/* or neutralize table-cell whitespace */
td { font-size:0; line-height:0; }
td > * { font-size:14px; line-height:normal; }

Final note: fixing the HTML and DOCTYPE is the correct path. Workarounds can hide symptoms but will leave the layout brittle across browsers and future maintenance.

Recommended Answers

All 5 Replies

Member Avatar for colweb

I don't have IE 8 on this computer, but have seen this problem before. The solution I found here worked in my case, maybe also in yours:

Member Avatar for Airshow

Jeffherron,

I'm not sure how to cure your space problem but something you should be aware of is the your page has two forms, one nested inside the other. HTML forms should not be nested as the HTML specification makes no provision for form nesting, thus browsers are free to interpret a nested structure as they wish. Most browsers will behave as you might expect but there is no guarantee.

Airshow

Member Avatar for Troy III

Please view the following URL in IE8 and then in any other browser.

It looks fine in every browser except for IE8. The culprit is the extra space being included after the </form> tag.

Does anyone know how to remove this space from IE8? I have tried all the usual tricks of adding margin:0 and padding:0 and even display:inline to the form tag, and nothing seems to work.

Any help would be greatly appreciated.

There's no help - that code is using extremely ugly Netscape specific bug, to layout that design arrangement.
You can't force Explorer to break rows and cells bleeding their content out of their boundaries just to accommodate this ugly abuse of tables and bug exploit for a simple layout that shouldn't be using tables at all .
The only decent way to fix that is to recode that html completely, avoiding tables OR, learn some better row spanning and coll spanning techniques in case you decide to keep the existing code.

Because all I see there is "dig a hole to patch another" principle, which at the end - will always end up leaving you with a brand new hole to patch.

Member Avatar for almostbob

What they said ^up there^

http://validator.w3.org/check?uri=http%3A%2F%2Fminorityrecruitonline.com%2Fcollege%2Fdefault.aspx&charset=%28detect+automatically%29&doctype=Inline&group=0

http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fminorityrecruitonline.com%2Fcollege%2Fdefault.aspx&profile=css21&usermedium=all&warning=1&lang=en

xhtml is particular <element1><element2></element2></element1> works <element1><element2></element1></element2> fails
Fix your code and the display errors will likely vanish

and redesign your page, its 619,569bytes and takes way too long to download, 8 seconds is all you get,
92KB of javascript ?
44 images 377KB ?
Some recommendations to remove the bloat, (there is a captcha)

Member Avatar for prateeksha

Please view the following URL in IE8 and then in any other browser.

Hi..

I checked your site...my suggestion is that you move the tow graphics links-dreamjob.jpg, links-career.jpg to the same ROW of the form.....

do u understand?

Put the images, before the </td> at line 375....

Sumeet

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.