help needed FF and IE css

[leecherz]

i have a problem


this is my code

	background-image:url(menu_bar.png);
	background-repeat:no-repeat;
	height: 63px;
	padding-left:20px;

when i check to FF its a good, but when i check it on IE it has a padding of somwthing in 25-40px,


what is the work around in this? thank you very much for a kind reply

leecherz Reviewed by leecherz on 4th Jul 2012. help needed FF and IE css i have a problem this is my code background-image:url(menu_bar.png); background-repeat:no-repeat; height: 63px; padding-left:20px; Rating: 5

[HostImage.ca]

<script>
if(navigator.userAgent.indexOf("Firefox") != -1)
{
window.location = "index_ff.php";
}
else
{
window.location = "index_ie.php";
}
</script>

I use the following, when absolutely necessary. Usually it's easier to create a unique div or inline css.

[leecherz]

i have a problem


this is my code

	background-image:url(menu_bar.png);
	background-repeat:no-repeat;
	height: 63px;
	padding-left:20px;

when i check to FF its a good, but when i check it on IE it has a padding of somwthing in 25-40px,


what is the work around in this? thank you very much for a kind reply

thanks for the quick reply sir, one qustion sir, im new to php, can u make an example, what is inside of index_ff.php and index_ie.php? sorry im a totally noob and learning from it

[HostImage.ca]

Sorry..

Basically, you have a unique page for each users. It's a pain in the arse usually, but depending, it might be easier in the long run.
It's also less SEO friendly.

I'd opt for creating a unique div for each, and adjusting the padding accordingly in this case.

[leecherz]

okay i get it now sir, thanks for the reply

---------- Post added 5th Jul 2012 at 07:44 AM ---------- Previous post was 4th Jul 2012 at 12:33 PM ----------

i solved it using UL tags and LI, as said by my cousin, thanks anyway,

[HostImage.ca]

Sometime's clean code is nicer.

[mRAza]

I dont suggest you to use HostImage.ca method in your situation, your only problem is CSS, first try to see if you can use other CSS methods to fix the issues and if does not work look into conditional stylesheets ( [IF] statement ), where you can load separate CSS file for different browsers.

<!--[if IE]>
    <link rel="stylesheet" type="text/css" href="location/to/IE.stylesheet.css" />
<![endif]--> 

More Info on conditional stylesheets

[leecherz]

thanks for the reply , im just learning basic html5 and css3 now.

[BJ@008]

Have you tried to use this property before applying padding

 box-sizing: boder-box

This may solve the problem.