Remove spacing around input elements in IE7

Posted on 2009-03-28
Last Modified: 2012-05-06
I'm struggling to build a web form that is compatible with IE7 and FireFox.  Firefox displays the form elements right next to each other, but IE7 seems to add quite a bit of margin or padding around textboxes and drop down lists.  When I use CSS to add negative margins I can bring the form into the way it is supposed to look in IE7, but of course then it looks horrible in FireFox.

I've tried setting the margin of inputs on the page to 0px, but it doesn't seem to make any difference.  Has anybody dealt with this issue before?  Any ideas how to make this work in both browsers?
Question by:josephdaviskcrm
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 2
  • 2
  • +1
LVL 14

Expert Comment

ID: 24011863
css and html code please

Or provide the online link
LVL 28

Expert Comment

ID: 24012147
<form action="" method="POST" style="margin: 0px; padding: 0px;">
LVL 14

Expert Comment

ID: 24012151
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!


Accepted Solution

hehdaddy earned 500 total points
ID: 24013372
Hi there. IE7 can be a real unwieldy beast. It has a bunch of "quirks" that require workarounds. Here is a way you can have the IE7 specific hacks, along with your clean Firefox css/markup. In your stylesheet or style block:

<!--[if IE7]>
... your IE7 specific CSS goes here...

Here is a link that will show you some different ways:

I hope this is helpful.

Author Comment

ID: 24025458
adding margin and padding styles to the body or the form tags does no good.

I've tried to follow what you have suggested in your post, but it doesn't seem to be working for me.  I added the following inside my head tag on my page...

<link href="App_Themes/Main.css" rel="stylesheet" type="text/css" />
<link href="App_Themes/Content.css" rel="stylesheet" type="text/css" />
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="App_Themes/ieCorrect.css" />

I also added my other two link tags that are tying in my other stylesheets so you can see that the file location for my new one is correct.  Anyway, this is not making any difference in my application.  IE7 is still looking horrid.

Expert Comment

ID: 24025510
Is there a way you could attach your stylesheets and a sample page? Everything works fine on my end.

Author Comment

ID: 24026031
Well I think this may be what the issue is....
I've got a Default.aspx page and it functions as a shell to load all of the other pages content via ajax.  Your code example works fine for me as well when I put it around some text inside the body of the document.  But for some reason, when I apply the stylesheet in the head tag with the IE7 conditional tags around it, nothing is changing.

Author Comment

ID: 24026102
Ok... it is working...
Sorry.  I was making a stupid mistake.

In all my effort fiddling around trying to make it work, I had commented out margin styles and place a margin:0px underneath them.  In the IE7 stylesheet I uncommented the margin styles and couldn't understand why they weren't taking effect.  Well, it was because I still had the margin:0px style underneath them.

Thanks for helping me out with this.

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Add a little space on either side of a table. 12 25
Session on Html 8 39
HTML or/and CSS codes to construct numbered paragraphs. 5 20
title attribute 5 24
This article discusses how to create an extensible mechanism for linked drop downs.
Find out what you should include to make the best professional email signature for your organization.
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…

756 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question