PDA

Zobacz pełną wersję : Templatka w IE a Operze a CSS



woonski
19-06-2006, 09:37
Witam, mam problemik z templatką którą ściągnąłem :(

Otóż templatka na Operze wygląda tak:

http://img220.imageshack.us/img220/4960/o9bt.th.jpg (http://img220.imageshack.us/my.php?image=o9bt.jpg)

a w IE tak:

http://img223.imageshack.us/img223/4711/ie0kp.th.jpg (http://img223.imageshack.us/my.php?image=ie0kp.jpg)

Od razu widać że na Operze, czcionka jest większa i sonda nie miesci sie w swoim polu. Podejrzewam że to wina CSSa którego nie bardzo trybi Opera czy ktoś wie może dlaczego :( ?

vj_
19-06-2006, 10:23
Dlatego, ze nie wszystkie syrektywy css sa interpretowane przez wszystkie rodzaje przegladarek, dla przykladu np. jak wstawisz w css cos takiego:


H4 > I { color: green; background-color: yellow;}

jest to tak zwany przyklad selektora dziecka - innymi slowy jak w naglowku 4, wstawisz italic text tez bedzie zielony i na zoltym tle

To jesli uzywasz wersji Internet Explorer juz od wersji 6 nie bedzie to interpretowane, natomiast w Operze i FF pewnie bedzie widac efekty

Podobnie nalezy uwazac tez opcja np. text-shadow, albo font-size-adjust, nie ma juz tego w css od 2.1 w wersji css 3 tez nie bedzie juz interpretowane zapewne, zatem w nowszych przegladarkach nie ujrzysz efektow, tyle po krotce.

woonski
19-06-2006, 10:44
Z tym, że jeśli chodzi i samą czcionkę to nie ma ona jakiś szczególnych parametrów, a to właśnie rozmiar czcionki jest głównym powodem tego jak strona się rozjeżdza :(
Poniżej kod CSS mojego stylu.



/* CSS Document */
* {
}
body {
padding:0px;
margin:0px;
height:100%;
font-family: Tahoma, Arial, Helvetica, sans-serif;
font-size: 11px;
text-align:justify;
}
a:link, a:visited, a:hover {
text-decoration:none;
color:#408CB3;
}
td,tr,p,div {
color:#4B5B64;
}
.rechte_spalte{
}
.usermodules_tbl li a:link,.usermodules_tbl li a:hover,.usermodules_tbl li a:visited{
font-weight:normal;
color:#4A5660;
}
.usermodules_tbl h3{
padding-bottom:5px;
border-bottom:2px dotted #408CB3;
}
.usermodules_tbl ul {
margin-top:0;
padding-top:0;
}
.tabellenschatten {
background:url(../images/tabellen_schatten_rechts.gif) repeat-y;
}
.navigationsleiste {
background:url(../images/navigationsleiste_bg.png) repeat-y;
margin:0;
padding:0;
}
.tabellen_header {
height:205px !important;
width:580px !important;
background:url(../images/header_bg.jpg) repeat-y;
}
.sky_td {
height:205px !important;
width:800px !important;
background:url(../images/sky.jpg) repeat-y;
}
.my_header {
vertical-align:middle;
margin-left:120px;
height:28px;
font-size:28px;
}
.newsflash_div {
padding-left:20px;
width:180px;
height:180px;
font-size:11px;
vertical-align:middle;
text-align:justify;
overflow:hidden;
}
.mainbody_bg {
background:url(../images/mainbody_bg.png) repeat-y right;
}
.contenttbl_bg {
background:url(../images/contenttbl_bg.jpg) no-repeat;
padding-top:50px;
}
ul#mainlevel-nav
{
margin:0;
padding:0;
font-size:11px;
font-family:Tahoma, Arial, Helvetica, sans-serif;
}
ul#mainlevel-nav li
{
list-style: none;
display:inline;
line-height:100%;
border-right:2px solid #FFFFFF;
padding:0px 10px 0px 10px;
}
ul#mainlevel-nav li a:link, ul#mainlevel-nav li a:visited
{
color:#FFFFFF;
text-decoration:none;
font-weight:bold;
}
ul#mainlevel-nav li a:hover
{
}
.menuecontainer {
width:180px;
}
.contentheading, .blog_more strong {
font-size:19px;
color:#408CB3;
background:url(../images/indent2.png) no-repeat;
margin:0px;
padding-left:20px;
padding-bottom:15px;
}
.blog_more strong {
font-weight:lighter;
}
.componentheading {
font-size:20px;
color:#006699;
margin:0px;
margin-bottom:25px;
}
.moduletable {
padding-top:20px;
text-align:left;
}
.moduletable table tr td div img{
margin-left:-4px;
}.moduletable table tr td div {
height:18px;
}
.moduletable h3 {
font-size:12px;
text-transform:uppercase;
color:#006699;
text-align:left;
margin:0px;
margin-bottom:10px;
}
table.contentpaneopen {
border-spacing:0px;
}
table.contentpaneopen td{
padding-right:10px;
}
.contentpane td {
padding-bottom:10px;
}
/* Login-Modul */
#mod_login_username, #mod_login_password{
width:175px;
padding:2px;
}
#mod_login_remember{
padding-bottom:5px;
padding-top:5px;
margin-left:0px;
}
/* Schnellsuche */
#mod_search_searchword{
margin:0;
padding:0;
width:175px;
font-size:9px !important;
border:1px solid #4A5660;
padding:3px;
}
/* Layer in dem sich die Schnellsuche befindet */
.search {
margin:0;
margin-top:8px;
padding:0px;;
width:220px;
}
/* Contentgestaltung */
.createdate {
font-size:9px;
padding-bottom:10px;
}
.small{
font-size:9px;
font-weight:bold;
}
.modifydate{
font-size:9px;
font-weight:bold;
padding-top:10px;
padding-bottom:10px;
}
.pagenavbar{
border-top:1px dotted #CCCCCC;
border-bottom:1px dotted #CCCCCC;
padding:5px;
padding-left:0px;
font-weight:bold;
}
.readon:link,.readon:hover,.readon:visited,
.pagenav_next a:hover,.pagenav_next a:link,.pagenav_next a:visited
{
border-left:2px solid #006699;
border-bottom:1px dotted #006699;
padding-left:5px;
padding-bottom:2px;
}
.pagenav_prev a:hover,.pagenav_prev a:link,.pagenav_prev a:visited
{
border-right:2px solid #006699;
border-bottom:1px dotted #006699;
padding-right:5px;
padding-bottom:2px;
}
/* Standard-Tag-Formatierung */
ul {
margin:0;
padding:17px;
}
li{
list-style:url(../images/indent1.png);
}
li a{
font-weight:bold;
}
/* Menüformatierung */
/* -> Hauptmenüpunkt */
a.mainlevel:link, a.mainlevel:visited{
display: block;
color:#4A5660;
text-align:left;
background:url(../images/line_dotted.gif) repeat-x bottom left;
padding-top:4px;
padding-bottom:4px;
height:15px;
}
a.mainlevel:hover{
display: block;
color:#006699;
background-color:#E6E6E6;
padding-left:5px;
}
/* -> Untermenüpunkt */
a.sublevel:link, a.sublevel:visited{
color:#4A5660;
margin-left:10px;
}
a.sublevel:hover{
color:#006699;
}
#active_menu {
font-weight:bold;
}
/*Sectiontable */
.sectiontableheader {
background-color:#dddddd;
font-weight:bold;
padding: 3px 0px 3px 10px;
}
.sectiontableentry1, .sectiontableentry2{
text-align:left !important;
}
.sectiontableentry1, .sectiontableentry1 td{
background-color:#e6e6e6;
padding: 3px 0px 3px 10px;
}
.sectiontableentry2, .sectiontableentry2 td {
background-color:#EFEFEF;
padding: 3px 0px 3px 10px;
}
.sectiontableentry1 a, .sectiontableentry2 a {
font-weight:bold;
}
/* Umfragetabelle */
.poll {
border-spacing:0;
width:100% !important;
}
.button, .inputbox{
border:1px solid #999999;
background-color:#EEEEEE;
margin-bottom:1px;
font-size:11px;
}
.button {
margin-bottom:10px;
margin-top:10px;
}
.inputbox {
padding:3px;
}
.label{
padding:0px;
margin:0px;
vertical-align:top;
}
.contenttoc{
margin:5px;
border:1px solid #CCCCCC;
border-top: none;
border-right:none;
}
.contenttoc td, .contenttoc th {
text-align:left;
font-size:9px;
padding-left:4px;
padding-bottom:2px;
padding-top:2px;
}
.pagenavcounter {
font-weight:bold;
}
.mosimage {
border:1px solid #CCCCCC;
margin:5px;
}
.mosimage_caption {
border-top:1px solid #CCCCCC;
}
.highlight {
background-color:#DDFFFF;
}

vj_
19-06-2006, 11:03
Korzystaj zawsze z walidatora:



Line : 14 (Level : 1) You have no background-color with your color : a:hover
Line : 14 (Level : 1) You have no background-color with your color : a:hover
Line : 14 (Level : 1) You have no background-color with your color : a:hover
Line : 17 (Level : 1) You have no background-color with your color : div
Line : 17 (Level : 1) You have no background-color with your color : div
Line : 17 (Level : 1) You have no background-color with your color : div
Line : 17 (Level : 1) You have no background-color with your color : div
Line : 23 (Level : 1) You have no background-color with your color : .usermodules_tbl li a:visited
Line : 23 (Level : 1) You have no background-color with your color : .usermodules_tbl li a:visited
Line : 23 (Level : 1) You have no background-color with your color : .usermodules_tbl li a:visited
Line : 90 (Level : 1) You have no background-color with your color : ul#mainlevel-nav li a:visited
Line : 90 (Level : 1) You have no background-color with your color : ul#mainlevel-nav li a:visited
Line : 102 (Level : 1) You have no background-color with your color : .blog_more strong
Line : 102 (Level : 1) You have no background-color with your color : .blog_more strong
Line : 113 (Level : 1) You have no background-color with your color : .componentheading
Line : 115 (Level : 2) Redefinition of margin-bottom : .componentheading
Line : 129 (Level : 1) You have no background-color with your color : .moduletable h3
Line : 132 (Level : 2) Redefinition of margin-bottom : .moduletable h3
Line : 160 (Level : 2) Redefinition of padding-left : #mod_search_searchword
Line : 160 (Level : 2) Redefinition of padding-bottom : #mod_search_searchword
Line : 160 (Level : 2) Redefinition of padding-right : #mod_search_searchword
Line : 160 (Level : 2) Redefinition of padding-top : #mod_search_searchword
Line : 165 (Level : 2) Redefinition of margin-top : .search
Line : 188 (Level : 2) Redefinition of padding-left : .pagenavbar
Line : 221 (Level : 1) You have no background-color with your color : a.mainlevel:visited
Line : 221 (Level : 1) You have no background-color with your color : a.mainlevel:visited
Line : 236 (Level : 1) You have no background-color with your color : a.sublevel:visited
Line : 236 (Level : 1) You have no background-color with your color : a.sublevel:visited
Line : 240 (Level : 1) You have no background-color with your color : a.sublevel:hover
Line : 247 (Level : 1) You have no color with your background-color : .sectiontableheader
Line : 255 (Level : 1) You have no color with your background-color : .sectiontableentry1 td
Line : 255 (Level : 1) You have no color with your background-color : .sectiontableentry1 td
Line : 259 (Level : 1) You have no color with your background-color : .sectiontableentry2 td
Line : 259 (Level : 1) You have no color with your background-color : .sectiontableentry2 td
Line : 272 (Level : 1) You have no color with your background-color : .inputbox
Line : 272 (Level : 1) You have no color with your background-color : .inputbox
Line : 291 (Level : 2) Redefinition of border-top-style : .contenttoc
Line : 292 (Level : 2) Redefinition of border-right-style : .contenttoc
Line : 312 (Level : 1) You have no color with your background-color : .highlight