Tak miały wyglądać ramki i tak wyglądają w Opera 7.51
Mozilla 1.7
IE 6
Jak zapewne zauważyliście w każdej przeglądarce strona wygląda inaczej.
Tak wygląda kod XHTML, który bezbłędnie przechodzisprawdzanie w Validatorze (tekst wyciąłem dla poprawienia czytelności):
<?xml version="1.0" encoding="iso-8859-2"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl"> <head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-2" /> <meta http-equiv="content-language" content="pl" /> <link rel="stylesheet" href="stylesheet/style.css" type="text/css" /> </head> <body> <div class="main"> <div class="info"> Lorem ipsum.<br /> Lorem ipsum. </div> <div class="links"> Lorem ipsum. </div> <div class="versions"> Lorem ipsum. </div> </div> </body> </html>
Tak natomiast wygląda kod CSS:
Kod
body {
text-align: center;
font-family: Verdana, sans-serif;
font-size: 11px;
}
div.main {
border-style: solid;
border-width: 1px;
font-family: Verdana, sans-serif;
font-size: 11px;
margin-left: auto;
margin-right: auto;
padding: 5px;
text-align: justify;
width: 760px;
}
div.info {
border-style: solid;
border-width: 1px;
font-family: Verdana, sans-serif;
font-size: 11px;
margin-bottom: 5px;
margin-left: 0px;
margin-right: 0px;
padding: 5px;
text-align: justify;
}
div.links {
border-style: solid;
border-width: 1px;
float: left;
font-family: Verdana, sans-serif;
font-size: 11px;
margin-left: 0px;
margin-right: auto;
padding: 5px;
text-align: center;
width: 300px;
}
div.versions {
border-style: solid;
border-width: 1px;
float: right;
font-family: Verdana, sans-serif;
font-size: 11px;
margin-left: auto;
margin-right: 0px;
padding: 5px;
text-align: justify;
width: 431px;
}
text-align: center;
font-family: Verdana, sans-serif;
font-size: 11px;
}
div.main {
border-style: solid;
border-width: 1px;
font-family: Verdana, sans-serif;
font-size: 11px;
margin-left: auto;
margin-right: auto;
padding: 5px;
text-align: justify;
width: 760px;
}
div.info {
border-style: solid;
border-width: 1px;
font-family: Verdana, sans-serif;
font-size: 11px;
margin-bottom: 5px;
margin-left: 0px;
margin-right: 0px;
padding: 5px;
text-align: justify;
}
div.links {
border-style: solid;
border-width: 1px;
float: left;
font-family: Verdana, sans-serif;
font-size: 11px;
margin-left: 0px;
margin-right: auto;
padding: 5px;
text-align: center;
width: 300px;
}
div.versions {
border-style: solid;
border-width: 1px;
float: right;
font-family: Verdana, sans-serif;
font-size: 11px;
margin-left: auto;
margin-right: 0px;
padding: 5px;
text-align: justify;
width: 431px;
}
Kombinowałem z tym bardzo długo ale nie mogę nic wymyślić. W jaki sposób zmienić te pliki, aby we wszystkich przeglądarkach strona wyglądała tak jak w Operze?