Fire Fox vs IE 8.0

HTML & CSS
1

I was using *html to make IE understand the padding. But IE 8.0 is not working.

Do you have any idea how should the code can be written so that both padding in form elements can come same?:slight_smile:

2

you need to provide a link or code. You should not have an issue with padding typically between IE or FF unless you are doing something funky.

Form elements are handled differently by different browsers and can cause a headache, but without code its next to impossible to diagnose.

3

Here is the code which I am trying to use for

Fire Fox:

#searchPanel input.kyefield
{
background-image: url(images/imgSearchInputBg.jpg);
background-repeat: no-repeat;
background-position: left 0px;
margin: 0px;
padding: 0px 0 0 15px;
height: 40px;
width: 475px;
border-width: 0px;
color: #999999;
}

For IE 8

*html #searchPanel .kyefield
{
background-image: url([images/imgSearchInputBg.jpg);
background-repeat: no-repeat;
background-position: left 0px;
margin: 0px;
padding: 10px 0 0 15px;
height: 40px;
width: 475px;
border-width: 0px;
color: #999999;
}

4

off the top of my head, i’ve read that IE8 ignores the *html hack… not verified but worth a check. Also from your css, the code:

*html #searchPanel .kyefield
{
background-image: url([images/imgSearchInputBg.jpg);
background-repeat: no-repeat;
background-position: left 0px;
margin: 0px;
padding: 10px 0 0 15px;
height: 40px;
width: 475px;
border-width: 0px;
color: #999999;
}

when you add a top padding but keep your height at 40, the new height will be 50px, so that may cause a problem.

What are the differences in IE8 versus FF?

5

Since it is specifically an IE6 hack, IE7 ignores it too.

There shouldn’t be any need to use different CSS for IE8 to what you are using for Firefox, Chrome, Safari, and Opera.

If it doesn’t look almost the same in all five of those browsers then there is something wrong with the way the CSS is defined leading to browsers having to guess at what you meant.

6

Thanks to all of you, I have corrected the CSS just removing the height and adjusting the padding.

But there is another issue in which the footer getting overlapped on top of the content after decreasing the height of the browser.

7

Hi,

Only Ie6 and under will parse the * html hack. IE7 and 8 will ignore it.

I can’t really see why you would need the extra padding on an input so I’d need to see the page to debug properly.

You can use conditional comments if you want to target various versions of IE but I would suggest we find out what the real issue is first :slight_smile:

8

We’d need to see the page to debug :slight_smile:

9

I can not display anything as of now, so is there any other way I can represent or explain the code?

10

once again post css and html code… you can use pastie.org or put it in the message.

11

All you have told us so far is this:

But there is another issue in which the footer getting overlapped on top of the content after decreasing the height of the browser.

That’s like saying " My car is broken " - “Can you fix it without looking at it”. :slight_smile:

If you are talking about a sticky footer then all the relevant details are explained in the FAQ at the top of the forum and it’s just a matter of making sure you have followed the rules correctly. If content is overlapping then make sure the footer height matches the negative margin and that the clearer element (dependiing on which method you have used) is also the same height as footer.

Without further code all we can do is make wild guesses I’m afraid. :wink:

12

I really appreciate paul for taking concern. I will see and find out if I have any alternative way, else will try to use some more brain. :slight_smile:

13

No Problem - we’re here to try and help :wink:

14

Hello everyone, thanks for all your help, I have been able to resolve the issue, I had mentioned inline styles which was causing the issue.