Member Avatar for randallj2877

I've got some CSS issues with the following page: url removed.

In IE:

1) Extra dark grey space at the top and bottom of text boxes on the right...need to get rid of this space, and make it look like it does in Firefox...

2) Need to get the "Go!" search submit button to look lke it does in Firefox....you'll notice there is an extra thin line of grey above the submit in IE...I need to get rid of this

Thanks for any help with this!

  • 2 Contributors
  • 4 Replies
  • 107 Views
  • 12 Hours Discussion Span
  • Latest Post Latest Post by randallj2877

Dani AI

Generated

This thread shows a classic cross‑browser rendering mismatch that was resolved by the OP but without a followup explaining the fix. For anyone who finds this later: the usual culprits are default form control rendering (line-height/vertical-align), uncontained floats (container height collapses so backgrounds vanish), and small differences in how browsers draw input/button boxes. Also remember was right about posting code instead of a URL — a minimal HTML/CSS sample helps people reproduce and fix the problem quickly.

Quick troubleshooting checklist

  • Use the browser inspector to view computed styles and element box sizes; temporarily give suspect elements a background-color to reveal their extents.
  • Reset margins/padding on inputs and buttons, then add only what you need.
  • If a container’s background disappears, check for only-floated children; apply a clearfix or give the container overflow:auto (or zoom:1 in legacy IE) to force it to enclose floats.
  • For the tiny gray line or gap around inline controls, try setting vertical-align, line-height, or switching to display:block with floats to remove baseline gaps.

Minimal CSS patterns to try

/* consistent form controls */
input[type="text"], input[type="submit"] {
  margin: 0;
  padding: 2px 4px;
  border: 1px solid #999;
  line-height: normal;
  vertical-align: middle;
}

/* contain floats */
.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

/* legacy IE: trigger hasLayout if needed */
.container { zoom: 1; }

Final notes
If the OP fixed it, the most likely single change was normalizing the input/button box model or containing floats so the background could render. When posting next time, include a short, self-contained HTML/CSS example (not the live URL) so responders can run and test fixes directly.

Recommended Answers

All 4 Replies

Member Avatar for randallj2877

Sigh, nevermind...the text boxes look OK in IE now...

I still can;t seem to fix the search submit button in IE....there is a thin gray line above it...it should look like it does in Firefox...

Also, now in Firefox the background image of #content_container won;t appear and there is a thin slivver of a line beneath the second-to-top text box on the right that I didn;t notice before....

Thanks again..

Member Avatar for randallj2877

Ok, I fixed the search submit button....

I still have this problem, if anyone can help:

Also, now in Firefox the background image of #content_container won;t appear and there is a thin slivver of a line beneath the second-to-top text box on the right that I didn;t notice before....

Member Avatar for tgreer

I'm sorry, but to post a URL is against DaniWeb policy. You can, however, post code snippets for us to examine.

Member Avatar for randallj2877

My problem has been solved, thanks for the help everyone !!!

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.