Forms IE vs FF 1

[1DMF]

Hello,

I'm having a mare with getting the same spacing between forms fields and lables on IE & FF.

It seems FF doesn't have any default spacing but IE does, however, If I place spacing (margin) on the fields, the gap is then bigger in IE than firefox.

Is there a way of nullifying IE and then have it just apply the margin I give so it looks the same across browsers?

I've tried padding:0; margin:0; then re-adding margin:1px; but they do not look the same, is it possible?

thanks,
1DMF

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you."

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!

 

[BillyRayPreachersSon]

Are your elements floated? If so, you might be suffering from IE 6's "double margin on floated elements" bug.

To fix this, either give the floated elements a display of "inline" for IE only using the underscore hack:

xxx {
   _display: inline;
}

Or use an IE-only style sheet.

Hope this helps,
Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[1DMF]

underscore hack:

where did you pluck that one from?


Thanks Dan,

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you."

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!

 

[1DMF]

but it doesn't help, as they are not floated!

only the label is float:left; display:block;

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you."

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!

 

[Vragabond]

Can we see the pages. It will be easier to debug the gaps that way.

___________________________________________________________
[small]Do something about world cancer today: PACT[/small]

 

[1DMF]

sorry Vragabond, my bad, thought i'd posted.

[URL unfurl="true"]http://www.independentmortgagenetwork.co.uk/new/advice.html[/URL]

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you."

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!

 

[1DMF]

hmm , I tried the underscore hack, doesn't seem to work in IE7.

is there an IE7 CSS hack?

as

_margin:0px;

would solve the problem.

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you."

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!

 

[Vragabond]

You should use IE conditional comments then:

<!--[if IE]>
  IE code here.
<![endif]-->

This is an HTML construct.

___________________________________________________________
[small]Do something about world cancer today: PACT[/small]

 

[1DMF]

yuk I hate that!!!!!

is there no way of getting rid of the extra spacing on input elements in IE?

without adding unwanted markup?

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you."

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!

 

[1DMF]

I don't like it, but it works!

Can anyone think of a CSS fix?

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you."

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!

 

[BillyRayPreachersSon]

A "hack" that works in IE 7 as well as IE 6 is the "*" hack:

xxx {
   *margin: 0px;
}

So if you wanted to only affect IE 7, you could do:

xxx {
   margin: 5px; /* or whatever you wanted non-IE browsers to have, omit if nothing */
   *margin: 0px; /* IE 6 + 7 */
   _margin: 3px; /* whatever you want IE 6 only to have */
}

But you're far, far better off using conditional comments if you want your code to validate (and be future-proof).

Hope this helps,
Dan

Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[1DMF]

Thanks Dan,

So does that CSS fail validation?

Also FF can be a bit finicky with CSS and stop processing the file from the line the error is on.

Could this happen?

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you."

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!

 

[BillyRayPreachersSon]

FF will ignore the properties beginning with "_" and "*". it will barf if you miss a semicolon delimiter on any property other than the last in a rule, though.

Yes - the hacks will fail validation, which is why the comments are a far better way to go.

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[1DMF]

many thanks.

I take it at pressent there is just nothing you can do about IE adding the additional spacing by default, except deal with it in this way?

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you."

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!

 

[BillyRayPreachersSon]

Apart from styling each version of IE as it comes, I'd say not.

Form elements are just one of those things that differ wildly... you can do the best you can, but sometimes you just don't get full control over them.



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[1DMF]

Cheers Dan,

At least I was banging my head for a reason this time.

I've got a work-a-round it's a few lines of code and only on page of the entire site so guess it's the best i'm gonna get.

Regards,
1DMF.

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you."

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!

 

[Vragabond]

I think your problem is not the form controls so much as line-height. That differs a lot as well across browsers and when you add the whole where-vertically-on-the-line-the-control-appears you have lost all pixel perfectness across browsers. I think if you would abandon the inline approach and did everything in block level (floated), you might be able to get things to look uniform.

___________________________________________________________
[small]Do something about world cancer today: PACT[/small]

 

[1DMF]

I did try that approach and it gave me a headache, so i abondoned it.

I'm happy with one simple IE only CSS command

<!--[if IE]>
<style type="text/css">input{ margin:0px;}</style>
<![endif]-->

works fine, and a lot less hastle than re-doing the form wouldn't you say ;-)

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you."

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!