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
Are You Using the Best Web Development Editor?

The worlds of web hosting and web development are constantly evolving. Every year we see design trends change, coding standards adapt and new frameworks/CMS created. With such a quick pace of change it’s easy to get lost trying to keep up.

See if your editor made the list.


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

Salesforce Has Never Been Easier

Improve and reinforce salesforce training & adoption using WalkMe's digital adoption platform. Start saving on costly employee training by creating fast intuitive Walk-Thrus for Salesforce. Claim your Free Account Now

Question has a verified solution.

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

When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

617 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