Link to home
Start Free TrialLog in
Avatar of akoIT
akoIT

asked on

How to make css styles compatible in all web browser platforms?

In Google Chrome my design for div specifically for "positioning" is working fine but when i test the website in different browsers like Internet Explorer version 9>11 didn't work properly compare to Chrome.

What solution, code or snippets of script in my css can solve this scenario?

Thank you very much in advance.
ASKER CERTIFIED SOLUTION
Avatar of Pavel Gushchin
Pavel Gushchin

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
One big impact is browsers defaults. If you don't know the concept of CSS reset, take a look at it.

I made the exeprience the reset css has a different effect if you load it first and separate than when you embed it into a sites single css styling file.

A typical reset.css:
@CHARSET "UTF-8";

* 
{
    margin: 0;
    padding: 0;
    border: 0;
}

ul { list-style-type: none; }

Open in new window


Alone the reset of default margin,paddig, and borders of all (*) elements may work wonders. Load this first and separate. You may now need some adjustments. There are a few things, for which you need different styling per browser.

Bye, Olaf.
Avatar of akoIT
akoIT

ASKER

Hi Olaf,

My I ask where can I put this code snippet of yours for example on my project?

Thank you and best regards,
Into a file named reset.css
And you include that into your pages as first css.
You have css already, so why do you ask?

Bye, Olaf.
Avatar of akoIT

ASKER

Hi Olaf,

Thank you for the clarification. The reset.css sample you gave me didn't work however I will search for the css reset more to try to my website.

Thanks and best regards.
Pity, the reset of margins, paddings and borders to none can especially help fixing ppositioning problems due to the different defaults of browsers. It's obviously just a starter of making browsers more equal, there still are different rendering engines at work.

As you're unspecific about your CSS there's not more to tell. Good luck.

Bye, Olaf.
Avatar of akoIT

ASKER

Thank you