Why are browsers so picky?

[dRyW]

Hi everyone,

I’m incontering a few setbacks with my website (www.ilcontadinobio.it)
Try to open it on pc (it should be fine) and on smartphone…exactly, chaos!
The behaviour is pretty much the same on mobile browsers such as Chrome, Mozilla, Opera and Dolphin.

-the flash header is within table and centered.

-same story for the azure rectangle with fading sides that I put in backgroung.

body {
  background: url(../images/sfondo.png)  no-repeat top center;
}

-Less convincing is the green menù which I don’t know whether there is any setting that might change its position but since it work on standard browsers, leave me clueless.

@charset "utf-8";
/* CSS Document */
 
#sse2
{
    /*You can decorate the menu's container, such as adding background images through this block*/
   background:#fff url(../images/verde.gif) no-repeat center; 
    height: 20px;
    padding: 10px;
    border-radius: 6px;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
}
#sses2
{
    margin:0 auto;/*This will make the menu center-aligned. Removing this line will make the menu align left.*/
}
#sses2 ul 
{
    position: absolute;
    list-style-type: none;
    float: center;
    padding: 0;
    margin: 0;
    width: 1074px;
    top: 225px;
    height: 43px;
}
#sses2 li
{
    float: left;
    list-style-type: none;
    padding:0;margin:0;background-image:none;
}
/*CSS for background bubble*/
#sses2 li.highlight
{
    background:#693500 url(../images/mb2_2.gif) no-repeat center bottom;
    top:3px;
    height:17px;
    border-radius: 8px;
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    z-index: 1;
    position: absolute;
    overflow:hidden;
}
#sses2 li a
{
    width: 2000;
    height:30px;
    padding-top: 3px;
    margin: 0 30px;/*used to adjust the distance between each menu item. Now the distance is 20+20=40px.*/
    color: #f6f165;
    font: strong 12px arial;
    text-align: center;
    text-decoration: none;
    float: center;
    display: block;
    position: relative;
    z-index: 2;
}

It doesn't seem so difficult to solve but I lack the css knowledge and experience to pick the right tag and tamper with it.

First two how it goes on mobile third how in normal pc browsers







Help please!
Thanks

[nemesis23]

You MUST actually work for every browser separately... For example, the IE settings..


And now the coding, what you need to do, in order to make the page look different in every browser.. (IE Example below)

<!--[if IE]>
<style type="text/css">
  IE specific CSS rules go here
</style>
<![endif]-->

[nemesis23]

What coding software are you using? I remember myself as a starter, and at the beginning I was sticked to notepad only.. Then I grew up to more complex coding and design softwares..

[molendijk]

Your sizing is done in pixels. As a result, your site looks different on small devices (scroll bars are added).
If you want your site to look acceptable on all devices (= with all screen resolutions), you'll have to make it 'responsive' by scaling the pages. But that may be a hell of a job.
And remember, you must NOT work for every browser separately. IE doesn't support the conditional comments anymore.