Making A website IE and firefox compatible.

[deltahawk12]

Alright i made this website that im trying to make IE and firefox compatible but ive ran into some problems. When i use the float in IE it dosent ignore the paragraph that "floating" but in firefox it does. This gives both broswers a different postion on where to put the paragraph below it. Then i decided it want to place the paragraph below it in a specifc spot. the only problem is that when i put a margin in I get a different results in both browsers becuase of the float. Any ideas on how to fix this.

[aquatsr]

Could you post your code, please?

[deltahawk12]

the entire code is abit too long but heres some of the important parts

body{color: #FFFFFF;background-image: url(images/bg.jpg);font-family: Sans-Serif;font-size: small;}#box5{text-align: center;float: left;margin-top: 2%;margin-left:2%;width:201px;height: 320px;}#box6{text-align:center;width: 359px;margin-top: 27%;margin-left: 38.5%;margin-right: 20%;height: 136px;padding: 0px 0px 20px 0px;}

[aquatsr]

for your second box (box6) you will need to add the code below in between the brackets:clear: left;That line will tell box6 to come below box5, which is floated left.

[deltahawk12]

Okay that worked but im getting this werid problem where 1% or 1px in IE is different than in firefox so i can never get the right position on both broswer. There always 1px off.

[aquatsr]

Ok I'm not sure what might be causing that but you may want to play with some hidden objects to try and fix it. Alternatively you can mess around with padding and margins and see if anything works.And if you're really ambitious (and have php at your disposal) you could code 2 spreadsheets - 1 for FF and 1 for IE where you determine which stylesheet is displayed depending on what browser the user is running, but that depends on availability of php and how determined you are to have the same look in both browsers.

[Guest Part Time Dummy]

Okay that worked but im getting this werid problem where 1% or 1px in IE is different than in firefox so i can never get the right position on both broswer. There always 1px off.

I used to encounter that problem as well with perfect alignment in both browsers. Here's what I used to solve that problem...For IE, use an underscore before the value, like this "_margin-left:100px;"And for FF, the regular non underscored value "margin-left:99px;"I just include both values, and make the appropriate pixel adjustment. And IE reads the underscored value, while FF reads the other.

[judgem]

I used to encounter that problem as well with perfect alignment in both browsers. Here's what I used to solve that problem...For IE, use an underscore before the value, like this "_margin-left:100px;"And for FF, the regular non underscored value "margin-left:99px;"I just include both values, and make the appropriate pixel adjustment. And IE reads the underscored value, while FF reads the other.

This option does the trick indeed but would not validate as valid CSS. Another way of getting the same result which does validate is add this to your stylesheet:* html #box6{ margin-left: 100px;}Again only IE will read this.Good luck!

[judgem]

To add some more details:A good way of designing a website is to first make it work in FF. Work from top to bottom. Use the "IEtab" extension in FF to view your work in IE. Then adjust the elements the way I explained in my previous post.Best of luck!