Solved

Remove spacing around input elements in IE7

Posted on 2009-03-28
8
343 Views
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?
0
Comment
Question by:josephdaviskcrm
  • 3
  • 2
  • 2
  • +1
8 Comments
 
LVL 14

Expert Comment

by:amar31282
ID: 24011863
css and html code please

Or provide the online link
0
 
LVL 28

Expert Comment

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

Expert Comment

by:amar31282
ID: 24012151
.body
{
margin:0px;
padding:0px;
}
0
Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

 
LVL 6

Accepted Solution

by:
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...
<![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
 

Author Comment

by:josephdaviskcrm
ID: 24025458
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
 
LVL 6

Expert Comment

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

Author Comment

by:josephdaviskcrm
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.
0
 

Author Comment

by:josephdaviskcrm
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.
0

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering 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

This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
Find out what you should include to make the best professional email signature for your organization.
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

808 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