Frage stellen
Ich habe für meine Familie eine private Homapage (http://www.unser-abenteuer.ch) in Typo3 erstellt. Die linke Navigation habe ich mit UL-Listen gebaut und im IE sieht alles super aus, aber wenn ich in Firefox wechsle dann kommts schief. Die grundstruktur des CSS habe ich aus dem Beispiel von Studio8.
Kann mir jemand helfen wos klemmt. das CSS ist:
- Code: Alles auswählen
body{
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #333333;
line-height: 1.166;
margin: 0px;
padding: 0px;
}
a{
color: #666666;
text-decoration:underline;
}
a:link{
color: #666666;
text-decoration:underline;
}
a:visited{
color: #666666;
text-decoration:underline;
}
a:hover{
color: #666666;
text-decoration: underline;
}
h1{
font-family: Verdana,Arial,sans-serif;
font-size: 120%;
color: #FFCC00;
margin: 0px;
padding: 0px;
}
h2{
font-family: Arial,sans-serif;
font-size: 114%;
color: #FFCC00;
margin: 0px;
padding: 0px;
}
h3{
font-family: Arial,sans-serif;
font-size: 100%;
color: #333333;
margin: 0px;
padding: 0px;
}
h4{
font-family: Arial,sans-serif;
font-size: 100%;
font-weight: normal;
color: #333333;
margin: 0px;
padding: 0px;
}
h5{
font-family: Verdana,Arial,sans-serif;
font-size: 100%;
color: #333333;
margin: 0px;
padding: 0px;
}
ul{
list-style-type: square;
}
ul ul{
list-style-type: disc;
}
ul ul ul{
list-style-type: none;
}
label{
font-family: Arial,sans-serif;
font-size: 100%;
font-weight: bold;
color: #334d55;
}
/***********************************************/
/* Layout Divs */
/***********************************************/
#masthead{
padding: 0px;
width: 100%;
background-image: url(head_bg.png);
background-repeat: repeat-x;
}
#masthead a{
text-decoration:none;
}
#navBar{
float: left;
width: 201px;
height:350px;
margin: 0px;
padding: 0px;
background-color: #CCCCCC;
border-right-width: 1px;
border-bottom-width: 1px;
border-right-style: solid;
border-bottom-style: solid;
border-right-color: #333333;
border-bottom-color: #333333;
background-image: url(/t3/fileadmin/design/hintergrund_navbar.png);
background-repeat: no-repeat;
}
#headlines{
float:right;
width: 20%;
height:350px;
padding-right: 10px;
border-bottom-width: 1px;
border-left-width: 1px;
border-bottom-style: solid;
border-left-style: solid;
border-bottom-color: #333333;
border-left-color: #333333;
}
#content{
float: left;
width: 55%;
}
/***********************************************/
/* Components */
/***********************************************/
#siteName{
margin: 0;
padding: 0 0 0 10px;
}
/************* #globalNav styles **************/
#globalNav{
color: #666666;
background-color: #FFCC00;
border-bottom-width: 1px;
border-bottom-style: solid;
border-top-color: #333333;
border-bottom-color: #333333;
border-top-width: 1px;
border-top-style: solid;
padding-top: 3px;
padding-right: 0px;
padding-bottom: 3px;
padding-left: 210px;
height: 20px;
background-image: url(globalnav_bg.png);
background-repeat: repeat-y;
}
#globalNav img{
display: block;
}
#globalNav a {
font-size: 90%;
padding: 0 4px 0 0;
}
/*************** #pageName styles **************/
#pageName{
margin: 0px;
padding-top: 10px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 10px;
}
/************* #breadCrumb styles *************/
#breadCrumb{
font-size: 80%;
padding-top: 10px;
padding-right: 0px;
padding-bottom: 10px;
padding-left: 10px;
}
/************* #rootLine styles *************/
#rootLine{
font-size: 60%;
text-align: right;
float:right;
padding-top: 2px;
padding-right: 10px;
padding-bottom: 0;
padding-left: 10px;
}
/************** .feature styles ***************/
.feature{
padding: 0px 0px 10px 10px;
font-size: 80%;
}
.feature h3{
padding: 30px 0px 5px 0px;
text-align: center;
}
.feature img{
float: left;
padding: 10px 10px 0px 0px;
}
/************** .story styles *****************/
.story{
clear: both;
padding: 10px 0px 0px 10px;
font-size: 80%;
}
.story p{
padding: 0px 0px 10px 0px;
}
/************* #siteInfo styles ***************/
#siteInfo{
clear: both;
border: 1px solid #cccccc;
font-size: 75%;
color: #cccccc;
padding: 10px 10px 10px 10px;
margin-top: 20px;
margin-bottom: 15px;
}
#siteInfo img{
padding: 4px 4px 4px 10px;
vertical-align: middle;
}
/************* #search styles ***************/
#search{
padding: 5px 0px 5px 10px;
border-bottom: 1px solid #cccccc;
font-size: 90%;
}
#search form{
margin: 0px;
padding: 0px;
}
#search label{
display: block;
margin: 0px;
padding: 0px;
color:#333333;
}
/*********** #sectionLinks styles ***********/
#sectionLinks{
width:200px;
font-family: arial, verdana, sans-serif;
font-size: 12px;
margin-top: 20px;
}
/*********** #navBar link styles ***********/
#liste{
list-style:none;
margin: 0px;
background-color: #FFCC00;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #333333;
}
#liste1{
list-style:none;
height: 10px;
background-color: #666666;
margin: 0px;
}
#liste2 {
background:#fff;
list-style:none;
height: 10px;
margin: 0px;
}
#liste li a{
color:#333333;
display:block;
text-decoration:none;
height: 10px;
padding-top: 5px;
padding-right: 10px;
padding-bottom: 5px;
padding-left: 10px;
background-color: #CCCCCC;
border-top-width: 1px;
border-top-style: solid;
border-top-color: #333333;
font-size: 12px;
}
#liste li a:hover{
color:#333333;
text-decoration:none;
background-color: #FFCC00;
}
#liste li span{
color:#333333;
display:block;
text-decoration:none;
height: 10px;
padding-top: 5px;
padding-right: 10px;
padding-bottom: 5px;
padding-left: 10px;
background-color: #FFCC00;
border-top-width: 1px;
border-top-style: solid;
border-top-color: #333333;
font-size: 12px;
}
#liste1 li a{
color:#333333;
display:block;
text-decoration:none;
height: 10px;
padding-top: 3px;
padding-right: 10px;
padding-bottom: 3px;
padding-left: 20px;
background-color: #CCCCCC;
border-top-width: 1px;
border-top-style: solid;
border-top-color: #333333;
font-size: 10px;
}
#liste1 li a:hover{
color:#333333;
text-decoration:none;
background-color: #FFCC00;
}
#liste1 li span {
color:#333333;
display:block;
text-decoration:none;
height: 10px;
padding-top: 3px;
padding-right: 10px;
padding-bottom: 3px;
padding-left: 20px;
background-color: #FFCC00;
border-top-width: 1px;
border-top-style: solid;
border-top-color: #333333;
font-size: 10px;
}
#liste2 li a {
color:#333333;
display:block;
text-decoration:none;
height: 10px;
padding-top: 2px;
padding-right: 10px;
padding-bottom: 2px;
padding-left: 30px;
background-color: #CCCCCC;
border-top-width: 1px;
border-top-style: solid;
border-top-color: #333333;
font-size: 9px;
}
#liste2 li a:hover {
color:#333333;
text-decoration:none;
background-color: #FFCC00;
}
#liste2 li span {
color:#333333;
display:block;
text-decoration:none;
height: 10px;
padding-top: 2px;
padding-right: 10px;
padding-bottom: 2px;
padding-left: 30px;
background-color: #FFCC00;
border-top-width: 1px;
border-top-style: solid;
border-top-color: #333333;
font-size: 9px;
}
/*********** .relatedLinks styles ***********/
.relatedLinks{
position: relative;
margin: 0px;
padding: 0px 0px 10px 10px;
font-size: 90%;
}
.relatedLinks h3{
padding: 10px 0px 2px 0px;
}
.relatedLinks a:link,
.relatedLinks a:visited {
display: block;
}
/************** #advert styles **************/
#advert{
padding: 30px 0px 10px;
}
#advert img{
display: block;
}
/************** #headlines styles **************/
#headlines{
margin: 0px;
padding: 10px 0px 20px 10px;
font-size: 80%;
}
#headlines p{
padding: 5px 0px 5px 0px;
}
Besten Dank für eure Hilfe. Ich bin mir sicher, dass es eine Kleinigkeit ist.
