Hjelp med koding på en side. CSS

[andesh]

Prøve å sette sammen noen sider for å trene. Har denne siden som funker helt perfekt i firefox, men streiker i alle andre browsere. SIDEN

 

Første feil er at alt blir malplassert i forhold til hvordan det skal være, trur det er fordi IE leser border annerledes enn firefox. Men kan være noe annet.

 

Andre er at i IE så overføre han ul li info jeg har spesifisert inne i en div, så det kommer alle plasser jeg har liste. Dette har jeg aldri opplevd før.

 

Så for dere som har firefox å IE, kan vel kanskje hjelpe meg? må nesten se siden i Firefox for å se hvordan siden skal være.

 

CSS:

body {
font-family: "Trebuchet MS", Arial, sans-serif, serif;
background-color: #C7CED8;
margin: 0;
text-align: center;
}

#container {
width: 700px;
text-align: left;
margin: auto;
}
#header {
float: left;
margin-top: 20px;
background-image: url(../bilder/headerredandblue.jpg);
width: 300px;
height: 150px;
}

h1 {
visibility: hidden;
}

h2 {
font-size: 16px;
margin: 20px 10px 0 0;
}

h3 {
font-size: 12px;
background-color: #52727D;
border-top: 2px solid #fff;
border-bottom: 2px solid #fff;
color: #fff;
text-align: center; 
}
h4 {
font-size: 14px;
color: #922C13;
margin: 0;
}

acronym {
cursor: help;
color: #922C13;
}

.right {
float: right;
border: 2px solid #922C13;
}

#mainwrap {
float: right;
width: 492px;
text-align: left;
border-right: 4px solid #fff;
border-left: 4px solid #fff;
border-bottom: 4px solid #fff;
background-color: #DBD8D7;
}

.textwrap a {
color: #476570;
text-decoration: none;
}

.textwrap a:hover {
text-decoration: line-through;
}


.dato {
font-size: 10px;
margin: 0px 0 20px 20px;
color: #9F4C37;
}
.lesmer {
float: right;
margin: 0 10px 0 0;
}
a.lesmer {
background-color: #922C13;
border: 2px solid #fff;
width: 90px;
color: #fff;
text-align: center;
text-decoration: none;
padding: 1px 5px 1px 5px;
}

a:hover.lesmer  {
background-color: #52727D;
text-decoration: none;

}

.textwrap {
padding: 10px 10px 10px 10px;
margin: 0 0 10px 0;
}

.textwrap ul li {
list-style-image: url(../bilder/dott.jpg);
font-size: 12px;
}

.textwrap ul li a {
color: #52727D;
text-decoration: none;
}

.textwrap ul li a:hover {
background-color: #fff;
text-decoration: none;
}

.textwrap dl {
font-size: 14px;
margin: 0;
}
.textwrap dt {
font-size: 12px;
font-weight: bold;
margin: 0 0 5px 10px;
}

#meny {
float: left;
width: 400px;
height: 150px;
}

.menyoverskrift {
visibility: hidden;
font-size: 0px;
margin: 0;
}
#meny ul {
padding: 0;
text-align: center;
}

#meny ul li {
list-style-type: none;
float: left;
border-top: 4px solid #fff;
border-bottom: 4px solid #fff;
border-right: 4px solid #fff;
background-color: #922C13;

}

#meny ul li a {
display: block;
font-size: 10px;
background-color: #922C13;
text-decoration: none;
color: #fff;
padding: 107px 0 20px 0;
width: 96px;

}

#meny ul li a:hover {
background-color: #52727D;
}

#submeny {
margin-top: 20px;
float: right;
width: 196px;
border-bottom: 4px solid #fff;
border-right: 4px solid #fff;
background-color: #9E3D25;
}

#sidemeny ul {
display: block;	
}

#sidemeny ul li {
list-style-image: url(../bilder/dott.jpg);
}

#sidemeny ul li a {
color: #fff;
text-decoration: none;
}

#sidemeny ul li a:hover {
background-color: #52727D;
text-decoration: none;
}

#sidemeny p{
font-size: 12px;
color: #fff;
font-weight: bold;
margin: 10px;
}

#stilvelger ul {
display: block;	
}

#stilvelger ul li {
list-style-image: url(../bilder/dott.jpg);
}

#stilvelger ul li a {
color: #fff;
text-decoration: none;
}

#stilvelger ul li a:hover {
background-color: #52727D;
text-decoration: none;
}

#anbefalt {
text-align: center;
}

#footer {
font-size: 10px;
color: #fff;
float: left;
padding: 4px;
border-right: 4px solid #fff;
border-left: 4px solid #fff;
border-bottom: 4px solid #fff;
background-color: #52727D;
width: 484px;
}

 

Link til siden www.hiimo.net/v3

[kroekkete]

Prøv dette:

 

I begynnelsen av CSS-fila skriver du:

*     {
   margin: 0;
   padding: 0; }

Dette fjerner margin og padding fra alle elementer. (Noe som er bra, siden nettleserne tolker dette forskjellig.)

 

Deretter legger du til margin/padding der du trenger det.

Ser siden ut på en måte i IE, og en annen i FF/Opera gjør du følgende på de elementene du sliter med:

	
#eksempel     {
   margin-left: 10px !important;
   margin-left: 7px; }

Det som skjer her er at !important gjør at FF/Opera bruker det du har skrevet her uansett hva som kommer senere i arket, mens IE velger den beskjeden du gir sist. Dermed kan du iallefall differensiere mellom FF/Opera og IE...

 

Håper dette hjalp noe?

 

 

Mvh Primaxx

[andesh]

takker, hjalp masse, var den !importen som jeg lurte på om jeg kunne bruke.

[andesh]

Kan bare stenge denne tråden, har fått løst problemene.

[kroekkete]

Lucky you!