• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 359
  • Last Modified:

Remove spacing around input elements in IE7

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?
0
josephdaviskcrm
Asked:
josephdaviskcrm
  • 3
  • 2
  • 2
  • +1
1 Solution
 
amar31282Commented:
css and html code please

Or provide the online link
0
 
gamebitsCommented:
<form action="" method="POST" style="margin: 0px; padding: 0px;">
0
 
amar31282Commented:
.body
{
margin:0px;
padding:0px;
}
0
The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

 
hehdaddyCommented:
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...
<![endif]-->

Here is a link that will show you some different ways:
http://www.positioniseverything.net/articles/ie7-dehacker.html

I hope this is helpful.
0
 
josephdaviskcrmAuthor Commented:
adding margin and padding styles to the body or the form tags does no good.

hehdaddy...
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" />
<![endif]-->

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.
0
 
hehdaddyCommented:
Is there a way you could attach your stylesheets and a sample page? Everything works fine on my end.
0
 
josephdaviskcrmAuthor Commented:
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.
0
 
josephdaviskcrmAuthor Commented:
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.
0

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

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.

  • 3
  • 2
  • 2
  • +1
Tackle projects and never again get stuck behind a technical roadblock.
Join Now