Solved

Remove spacing around input elements in IE7

Posted on 2009-03-28
8
346 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
[X]
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
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
Independent Software Vendors: 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!

 
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

Independent Software Vendors: 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!

Question has a verified solution.

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

Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
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 code links for mobile sites that, once clicked, send a call or text to a specified number. For a telephone link (once clicked, calls a number), begin with a normal "<a href=" link tag. For the href, specify…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

710 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